アプリ映像8 (jQuery Mobile2)
2013/3/26 17:26 | Category アプリ開発実践フェーズ | Comment (0)
■jQueryMobile
(2)jQueryMobile sample1 [ページ作成] 【sample1/index.html】
<div data-role=”page”>
ヘッダ コンテンツ フッタ
</div>
<div data-role=”page” id=”page2″ data-add-back-btn=”true”>
ヘッダ コンテンツ フッタ
</div>
<div data-role=”page” id=”page3″ data-add-back-btn=”true” data-back-btn-text=”戻る”>
ヘッダ コンテンツ フッタ
</div>
(3)jQueryMobile sample2 [リスト表示] 【sample2/index.html】
▼スマホ向けリストの設定
<ul data-role=”listview”>
▼テーマの設定 (背景色)
<li data-theme=”e”>
(4)jQueryMobile1 sample3 [ボタンの追加] 【sample3/index.html】
<div data-role=”header”>
<h1>ヘッダー</h1>
<a href=”#page1″>ボタン</a>
<a href=”#page3″%gt;class=”ui-btn-right”>ボタン</a>
</div>
★ヘッダの中にa要素を書くと、勝手にボタンにしてくれる。
☆class=”ui-btn-right” での設定も可能。
●複数ボタンの設置などのサンプル
http://d.hatena.ne.jp/Naotsugu/20120108/1326034322
(5)jQueryMobile1 sample4 [ページ遷移時の効果] 【sample4/index.html】
<a data-role=”button” href=”#page2″ data-transition=”slide”>slide</a>
<a data-role=”button” href=”#page2″ data-transition=”slide” data-direction=”reverse”>slide</a>
data-transition=siedup
data-transition=sieddown
data-transition=pop
data-transition=fade
data-transition=flip
data-transition=flow
data-transition=turn
data-transition=none
(5)jQueryMobile1 sample5 [インターフェースデザイン] 【sample5/index.html】
▼ボタンのアイコン表示
data-icon=”arrow-r”
▼ボタンのアイコン位置
data-iconpos=”right”
▼アイコンだけ表示
data-iconpos=”notext”
◇ボタンのグループ
▼ボタンの縦にグループ化
data-role=”controlgroup
▼ボタンの横にグループ化
data-role=”controlgroup data-type=”horizontal”
(6)jQueryMobile1 sample6 [フォーム作成] 【sample6/index.html】
data-role=”fieldcontain”
placeholder=”ヒント出力”
select ～ data-role=”slider”
3/29(金)に、Mac Book Airで試してみよう！！！