html5j.orgがhtml5+javascriptで metro style アプリを作ってみた
Post on 02-Jul-2015
5.319 Views
Preview:
TRANSCRIPT
SP-001
HTML5開発者コミュニティ html5j.org 管理人
株式会社シーエー・モバイル Web先端技術フェロー
Web Sockets IndexedDBFile API
<html>
…
</html>
<html>
…
</html>
<html>
…
</html>
機能 ローカルコンテキスト 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
<iframe src="http://ds-websocket.qw.to"width=100% height=100%></iframe>
クラス名 機能 クラス名 機能
ListView リストビュー ToggleSwitch トグルスイッチ
AppBar コマンドメニュー ライブタイルスタート画面のタイルをカスタマイズ
Flyout ポップアップ …
<div data-win-control="WinJS.UI.ListView"data-win-options="{layout: {type: WinJS.UI.GridLayout}}">
</div>
Promise
var promise = WinJS.xhr({ url: '/data' });promise.then(function(result) {// 正常時の処理
},function(error) {
// エラー時の処理});
<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>
単一ページ・ナビゲーション
default.html
メソッド／イベントハンドラ 説明
WinJS.Navigation.navigate 履歴スタックに追加
WinJS.Navigation.onnavigated navigateが行われると呼び出されるイベントハンドラ
WinJS.UI.Pages.render ページを読み込んでDOMに追加する
WinJS.UI.Pages.define ページを初期化し、イベントハンドラを関連付ける
#listPage {/* この要素内をグリッド配置する */display: -ms-grid;/* 2行2列のグリッドを定義 */-ms-grid-rows: 126px 1fr;-ms-grid-columns: 40% 1fr;
} 1, 1
#listPage > h1 {-ms-grid-row: 1;-ms-grid-column: 1;-ms-grid-row-span: 2;
}#tweetList {-ms-grid-row: 2;-ms-grid-column: 1;
}
<h1>
top related