Mam's WebSite
建築CGパース住宅CGパース

Mamの覚書Q&A検索

トップページMamの覚書Q&A検索WEB(jQueryMobile)⇒Q&A


大項目:「 WEB 」 - 中項目:「 jQueryMobile 」

「 jQueryMobileのページの基本 」

jQueryMobileのページの基本について


回答

jQueryMobileのページの基本については以下参照

ソース

1つのファイルで複数のページを持つ事ができる。ダイアログもページとして作成する。
ページ内には
  ヘッダー、コンテンツ(本文)、フッター、サイドパネル、ポップアップ等
を持つ事が出来る。
ページの移動やダイアログの呼び出しはidを使う。
 
<!-- 1ページ目 -->
<div data-role="page" id="page1">
  <div data-role="header">
    <h3>1ページ目ヘッダー</h3>
  </div>
  <div class="ui-content" role="main">
    <h3>1ページ目</h3>
    <a href="#page2">2ページ目へ</a>
    <a href="#dialog1" data-transition="pop">ダイアログ</a>
  </div>
  <div data-role="footer">
    <h3>1ページ目フッター</h3>
  </div>
</div>
 
<!-- 2ページ目 -->
<div data-role="page" id="page2">
  <div class="ui-content" role="main">
    <h3>2ページ目</h3>
    <a href="#page1">1ページ目へ</a>
  </div>
</div>
 
<!-- ダイアログのページの始まり -->
<div data-role="page" data-title="ダイアログ" id="dialog1" data-dialog="true">
  <div data-role="header" data-theme="b">
    <h2>ダイアログのヘッダー</h2>
  </div>
  <div  class="ui-content" role="main">
    <span>ですよねー。</span>
    <a href="#page1" data-role="button">閉じる</a>
  </div>
</div>
 

その他pageに指定できる属性
data-title  ページごとにタイトルを指定できる
(例)  <div data-role="page" id="pg1" data-title="タイトルです">
 
-----------------------------------------------------------------------
ページ内のコンテンツ(本文)について
 
jQueryMobile1.4のコンテンツ(本文)の記述は以下
  <div  class="ui-content" role="main">
  ~
  </div>
 
(参考)
jQueryMobile1.3までのコンテンツ(本文)の記述は以下
  <div  data-role="content">
  ~
  </div>
-----------------------------------------------------------------------
ページ内には1つのヘッダーを持つ事が出来、ヘッダー内にはナビゲーションボタン等を配置する事が出来る。
  <div data-role="page">
    <div data-role="header">
      ヘッダー
    </div>
  </div>
 
ヘッダー内には<h1>~<h7>タグを使ってタイトルを持つ事が出来る。
  <div data-role="header">
    <h1>タイトル</h1>
  </div>
 
ヘッダー内に<a>タグを入れると、最初のAタグはヘッダー内の左端のボタンになり、2つ目のAタグはヘッダー内の右端のボタンになる。
  <div data-role="header">
    <a href="hoge.html">左端ボタン</a>
    <h3>タイトル</h3>
    <a href="hoge.html">右端ボタン</a>
  </div>
 
ヘッダー内のAタグにはアイコンをつけたり(data-icon)、アイコンの位置を指定することもできる。
  <div data-role="header">
    <a href="top.html" data-icon="gear" class="ui-btn-right">トップページ</a>
    <h1>タイトル</h1>
  </div>
 
ヘッダーに指定できる属性
 
data-theme  ヘッダーにテーマを設定する
指定できる値
  "a"~"e"
(例)
  <div data-role="header" data-theme="a">
 
data-position="fixed"
  ヘッダーを固定配置する。
  つまり、ブラウザ画面を上下方向へスクロールしても常時ヘッダーが表示される。
  タップ(クリック)するとヘッダーが非固定表示と固定表示を交互に繰り替えす。
(例)
  <div data-role="header" data-position="fixed">
 
以下、data-position="fixed"の時に有効な属性
 
data-visible-on-page-show="false"
  ヘッダーの固定配置(data-position="fixed")と共に使う。
  data-visible-on-page-show="false"属性を設定すると、
  初期状態ではヘッダーが固定配置されない。
  タップ(クリック)するとヘッダーが固定表示と非固定表示を交互に繰り替えす。
(例)
  <div data-role="header" data-position="fixed" data-visible-on-page-show="false">
 
data-fullscreen="true"
  この属性を指定すると、コンテンツ(本文)の上に
  ヘッダー(<div data-role="header"></div>)が重なって表示されます。
(例)
  <div data-role="header" data-position="fixed" data-visible-on-page-show="false" data-fullscreen="true">
 
data-tap-toggle="false"
  ヘッダーの固定配置(data-position="fixed")と共に使用する。
  この属性を設定すると、画面をタップ(クリック)してもヘッダの固定表示と非固定表示が切り替えできなくなり、常時ヘッダーが固定表示になる。
(例)
  <div data-role="header" data-position="fixed" data-tap-toggle="false">
 
data-transition="slide" 又は "fade"  又は "none"
  ヘッダーをタップして表示するときの効果を設定。ヘッダーを表示するときにスライドするかフェードするか効果なしか
 
--------------------------------------------------------------------------------
ページ内には1つのフッターを持つ事が出来、フッター内にはナビゲーションボタン等を配置する事が出来る。
  <div data-role="page">
    <div data-role="footer">
      フッター
    </div>
  </div>
 
フッターに指定できる属性
 
data-theme  フッターにテーマを設定する
指定できる値
  "a"~"e"
(例)
  <div data-role="footer" data-theme="a">
 
data-position="fixed"
  フッターを固定配置する。
  つまり、ブラウザ画面を上下方向へスクロールしても常時フッターが表示される。
  タップ(クリック)するとヘッダーが固定表示と非固定表示を交互に繰り替えす。
(例)
  <div data-role="footer" data-position="fixed">
 
data-visible-on-page-show="false"
  フッターの固定配置(data-position="fixed")と共に使う。
  data-visible-on-page-show="false"属性を設定すると、
  初期状態ではフッターが固定配置されない。
  画面をタップ(クリック)したときに固定配置表示される。
(例)
  <div data-role="footer" data-position="fixed" data-visible-on-page-show="false">
 
data-fullscreen="true"
  この属性を指定すると、コンテンツ(<div data-role="content"></div>)の上に
  フッター(<div data-role="footer"></div>)が重なって表示されます。
(例)
  <div data-role="footer" data-position="fixed" data-visible-on-page-show="false" data-fullscreen="true">
 
data-tap-toggle="false"
  フッターの固定配置(data-position="fixed")と共に使用する。
  この属性を設定すると、画面をタップ(クリック)してもフッターの固定表示と非固定表示が切り替えできなくなり常時フッターが固定表示になる。
(例)
  <div data-role="header" data-position="fixed" data-tap-toggle="false">
 
data-transition="slide" 又は "fade"  又は "none"
  フッターをタップして表示するときの効果を設定、フッターを表示するときにスライドするかフェードするか効果なしか


Mam's WebSite