Web & AOR Music Blog

I'm Web Front-End Engineer. I like AOR music.

アプリ映像8 (jQuery Mobile2)

■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で試してみよう!!!

Copyright © Web & AOR Music Blog, All Rights Reserve.