html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
•Download as PPTX, PDF•
20 likes•3,128 views
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
Similar to html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた (20)
More from Shumpei Shiraishi
More from Shumpei Shiraishi (20)
Recently uploaded
Recently uploaded (9)
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
- 2. SP-001
- 3. HTML5開発者コミュニティ html5j.org 管理人 株式会社シーエー・モバイル Web先端技術フェロー
- 7. Web Sockets File API IndexedDB
- 8. <html> <html> … <html> …… </html> </html> </html>
- 10. 機能 ローカルコンテキスト Webコンテキスト Windows Runtime Yes No Windows Library for JS Yes Yes* JavaScript URIs No Yes 外部スクリプトの参照 No Yes window.close Yes No クロスドメインXHR Yes No innerHTMLの自由な利用 No Yes
- 12. <iframe src="http://ds-websocket.qw.to" width=100% height=100%></iframe>
- 21. クラス名 機能 クラス名 機能 ListView リストビュー ToggleSwitch トグルスイッチ スタート画面のタイル AppBar コマンドメニュー ライブタイル をカスタマイズ Flyout ポップアップ …
- 22. <div data-win-control="WinJS.UI.ListView" data-win-options="{layout: {type: WinJS.UI.GridLayout}}"> </div>
- 23. Promise var promise = WinJS.xhr({ url: '/data' }); promise.then( function(result) { // 正常時の処理 }, function(error) { // エラー時の処理 });
- 25. <div id="tweetTemplate" data-win-control="WinJS.Binding.Template"> <div data-win-bind="textContent: text"></div> <div data-win-bind="textContent: created_at"></div> </div> <div id="tweetList" data-win-control="WinJS.UI.ListView" data-win-options=" { itemDataSource: global.tweets.dataSource, itemTemplate: select('#tweetTemplate'), layout: {type: WinJS.UI.ListLayout}}"> </div>
- 26. 単一ページ・ナ ビゲーション default.html
- 27. メソッド／イベントハンドラ 説明 WinJS.Navigation.navigate 履歴スタックに追加 WinJS.Navigation.onnavigated navigateが行われると呼び出され るイベントハンドラ WinJS.UI.Pages.render ページを読み込んでDOMに追加 する WinJS.UI.Pages.define ページを初期化し、イベントハン ドラを関連付ける
- 33. #listPage { /* この要素内をグリッド配置する */ display: -ms-grid; /* 2行2列のグリッドを定義 */ -ms-grid-rows: 126px 1fr; -ms-grid-columns: 40% 1fr; } 1, 1
- 34. #listPage > h1 { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-row-span: 2; } #tweetList { -ms-grid-row: 2; <h1> -ms-grid-column: 1; }