Theme Rollerによるカスタマイズ

Theme Roller

• Theme Roller：http://jquerymobile.com/themeroller/

• 「Adobe Kuler」をクリック

標準のテーマを維持したまま新しいテーマを作る

• 新しくテーマを作成していくと、はじめから用意されていた「a〜e」が書き換えられてしまいます
• 維持したまま「f」以降の独自テーマを作成する方法

（1）「import」ボタンをクリック

（2）「Import Default Theme」リンクをクリック

（3）「import」ボタンを押す

独自テーマを追加する

独自テーマを利用する

（1）「Download Theme」ボタンをクリック

（2）名前をつけて保存（Download.zip）する

（3）必要なデータをサーバーにアップロードする

（4）読み込む

• 「jquery.mobile.structure-1.0.min.css」を読み込むことに注意！

<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">
<link rel="stylesheet" href="各自URL/f.min.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile.structure-1.0.min.css">
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

リストの表示

• 「リスト表示」のページで解説してあるように分割リストの場合に、デフォルトではテーマ「b」が適用されてしまいます

見出しのテーマを変更する　data-dividertheme属性

• ul要素やol要素に対してdata-dividertheme属性を設定すると、見出しのテーマを変更できます。デフォルトでは「b」のテーマが適用されています

<ul data-role="listview" data-dividertheme="a">
   <li data-role="list-divider">見出し</li>
   <li><a href="#page2">list</a></li>
   <li><a href="#page2">list</a></li>
   <li data-role="list-divider">見出し</li>
   <li><a href="#page2">list</a></li>
   <li><a href="#page2">list</a></li>
</ul>

• sample10

検索フィルタも追加

<ul data-role="listview" data-inset="true" data-dividertheme="f" data-filter="true" data-filter-placeholder="キーワードで絞り込み">

ヘッダーをフルスクリーンモードに

<div data-role="page" data-fullscreen="true">
<div data-role="header" data-position="fixed">
<h1>フルスクリーンヘッダー</h1>
</div>
<div data-role="content">
<img src="~.jpg">
</div>
</div>

固定バーのトグル機能をオフにする

<script>
$(document).bind("mobileinit", function(){
	$.mobile.fixedToolbars.setTouchToggleEnabled(false);
});
</script>