header

data-role=”page”の直下にdiv要素などにdata-role属性「header」を指定するとヘッダーを定義することができます。

<div data-role="page">
  <div data-role="header">
    //ヘッダーの内容を記述
  </div>
  //ページの内容を記述
</div>

header内ではh1要素やh2要素でタイトルを記述することができます。

<div data-role="header">
   <h1>タイトル</h1>
</div>

header内にa要素を記述するとボタンとして表示されます。

<div data-role="header">
   <a href="#top">TOP</a>
   <h1>タイトル</h1>
</div>

header内のボタンは2つまで記述できます。

<div data-role="header">
   <a href="#top">TOP</a>
   <h1>タイトル</h1>
   <a href="#menu">メニュー</a>
</div>

ボタンにはdata-icon属性でアイコンを付けることもできます。

<div data-role="header">
   <a href="#top" data-icon="gear">TOP</a>
   <h1>タイトル</h1>
</div>

class属性「ui-btn-right」を付加するとボタンは右上に追加されます。

<div data-role="header">
   <a href="#top" class="ui-btn-right">TOP</a>
   <h1>タイトル</h1>
</div>

headerのタイトルを表示したくない場合に何も入力しないと余白が調整確保されません。
span要素などにclass属性「ui-title」を入れて挿入しておきましょう。

<div data-role="header">
   <span class="ui-title"></span>
</div>

ヘッダーはdata-position=”fixed”をあわせて指定することで固定配置にすることも可能です。

また、ヘッダーとヘッダー内のボタンのテーマはdata-theme属性で変更可能です。

data-role="header"はjQuery Mobile 1.0で定義された属性です。

data-theme属性を省略した場合、jQuery Mobile 1.3までは「A」のテーマが採用されましたが、jQuery Mobile 1.4よりdata-role="page"のテーマが継承されるようになりました。

登録日 : 2012年09月17日最終更新日 : 2016年12月19日

jQuery Mobile リファレンス