data-theme
data-theme属性でjQuery Mobileのカラーテーマが選択可能です。
page要素にdata-theme属性でページの基本テーマを設定できます。
<div data-role="page" data-theme="b">
aからeのテーマが選択できデフォルトはaのテーマが採用されています。
data-theme属性はヘッダーやフッターに対しても設定できます。
<div data-role="header" data-theme="b">
<h1>Page Title</h1>
</div>
<div data-role="footer" data-theme="b">
<h4>footer</h4>
</div>
ヘッダー内のa要素はボタンに変換されますが、data-theme属性でボタンのカラーテーマが選択できます。
<div data-role="header" data-theme="b">
<a href="add-user.php" data-theme="c">Save</a>
<h1>Page Title</h1>
</div>
コラプシブルパネル
コラプシブルパネルのヘッダー部分のテーマも変更できます。
<div data-role="collapsible" data-theme="e">
<h3>I'm a header</h3>
<p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
</div>
コラプシブルパネルのコンテンツ部分はdata-content-theme属性で変更可能です。
パネル
data-role=”panel”が指定された要素にdata-theme属性を指定することでパネルウィジェットのテーマを変更できます。
<div data-role="panel" id="mypanel" data-theme="e">
<h1>パネル部分</h1>
</div>
controlgroup
jQuery 1.4.0よりcontrolgroupに対してテーマを指定することが可能になりました。
<div data-role="controlgroup" data-theme="b">
<a href="index.html" data-role="button">Yes</a>
<a href="index.html" data-role="button">No</a>
<a href="index.html" data-role="button">Maybe</a>
</div>
jQuery Mobile 1.3.0での追加/変更jQuery Mobile 1.3.0でパネルウィジェットのテーマ変更が追加されました。
jQuery Mobile 1.4.0での追加/変更jQuery Mobile 1.4.0でcontrolgroupのテーマ変更が追加されました。
登録日 : 2012年09月26日 最終更新日 : 2016年12月19日