Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

HTML+CSS+JavaScriptなMetro style apps 開発 (MetroS...

HTML+CSS+JavaScriptなMetro style apps 開発 (MetroStyleDeveloper #3)

HTML+CSS+JavaScriptなMetro style apps 開発 (MetroStyleDeveloper #3)

PowerPointのスライドファイル: http://sdrv.ms/KAvp6j

Mayuki Sawatari

May 19, 2012
Tweet

More Decks by Mayuki Sawatari

Other Decks in Programming

Transcript

  1. Web

  2. ?

  3. A. HTML+CSS ! <section class="main" aria-label="Main content" role="main"> <div class="panel">Content

    goes here.</div> <div class="panel">Content goes here.</div> <div class="panel">Content goes here.</div> </section> .main .panel { width: 120px; height: 120px; background-color: #ffa500; margin-bottom: 10px; }
  4. A. JavaScript !!1 var targetElements = element.querySelectorAll('.main .panel'); Array.prototype.forEach.call(targets, function

    (elem, i) { elem.addEventListener('MSPointerDown', function (e) { anim.pointerDown(e.srcElement); }); elem.addEventListener('MSPointerUp', function (e) { anim.pointerUp(e.srcElement); }); });
  5. A. HTML CSS JavaScript !!1 var listView = element.querySelector('.listView').winControl; WinJS.UI.setOptions(listView,

    { itemTemplate: element.querySelector('.listViewItemTemplate'), itemDataSource: items.dataSource, layout: new WinJS.UI.GridLayout({ groupInfo: { multiSize: true, slotWidth: 0, slotHeight: 0, } }), }); .pagecontrol2 .win-listview .win-container .win-item .item-content { width: 150px; height: 150px; background-size: 150px 150px; } .pagecontrol2 .win-listview .win-container:nth-of-type(2) .win-item .item-content { width: 310px; height: 310px; background-size: 310px 310px; } .pagecontrol2 .win-listview .win-container .win-item .item-content .item-label { display: none; } .pagecontrol2 .win-listview .win-container:nth-of-type(2) .win-item .item-content .item-label { display: block; background-color: rgba(0, 0, 0, 0.5); padding: 5px; } <div class="listView" data-win-control="WinJS.UI.ListView"></div> <div class="listViewItemTemplate" data-win-control="WinJS.Binding.Template"> <div class="item-content" data-win-bind="style.backgroundImage: src"> <span class="item-label" data-win-bind="textContent: title">Title</span> </div> </div> HTML ListView item templating sample
  6. ( )