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>

sample

コラプシブルパネルのコンテンツ部分はdata-content-theme属性で変更可能です。

パネル

data-role=”panel”が指定された要素にdata-theme属性を指定することでパネルウィジェットのテーマを変更できます。

<div data-role="panel" id="mypanel" data-theme="e">
	<h1>パネル部分</h1>
</div>

sample

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>

sample

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日

同じカテゴリー(テーマ)のエントリー

検索

スポンサードリンク

バージョン

リファレンス