jQuery Mobileの初期化処理 (5/5)
作成:2012-02-20 08:04
更新:2012-02-20 08:04
更新:2012-02-20 08:04
■用意されている主なプロパティ
ウィジェットの初期値として用意されているプロパティ類の扱いは、基本的にどんなウィジェットであれ同じです。これらはすべて「$.mobile.ウィジェット.prototype.options」という形になっています。例えば、ボタンならば$.mobile.button.prototype.optionsにまとめられていたわけですね。
では、ウィジェット類にはどのようなプロパティが用意されているのでしょうか。主なものをここでざっと整理しておきましょう。
・ページ関係
プロパティの場所――$.mobile.page.prototype.options
addBackBtn――ボタンを自動的に追加するかどうか
backBtnText――ボタンのテキスト
backBtnTheme――戻るボタンのテーマ
theme――全体のテーマ
headerTheme――ヘッダーのテーマ
contentTheme――コンテンツのテーマ
footerTheme――フッターのテーマ
・ボタン
プロパティの場所――$.mobile.button.prototype.options
corners――角を丸くするかどうか（真偽値）
shadow――影をつけるかどうか（真偽値）
inline――インラインで組み込むかどうか（真偽値）
theme――ボタンのテーマ
・スライダー
プロパティの場所――$.mobile.slider.prototype.options
theme――取っ手部分のテーマ
trackTheme――トラック部分のテーマ
・セレクトメニュー
プロパティの場所――$.mobile.selectmenu.prototype.options
corners――角を丸くするかどうか（真偽値）
nativeMenu――ネイティブメニュー（HTML本来のメニュー）を使うかどうか（真偽値）
hidePlaceholderMenuItems――プレースホルダを非表示にするかどうか（真偽値）
theme――メニューを呼び出すボタンのテーマ
overlayTheme――リストの周辺枠のテーマ
・リストビュー
プロパティの場所――$.mobile.listview.prototype.options
disabled――使用不可とするかどうか（真偽値）
filter――フィルターのON/OFF（真偽値）
filterCallback――フィルターのコールバック関数
filterPlaceholder――フィルターのプレースホルダ
inset――インセットリストにするかどうか（真偽値）
splitIcon――右側を分割しアイコン表示する場合のアイコン
theme――テーマ
countTheme――項目数をカウントする表示のテーマ
dividerTheme――区切り項目のテーマ
splitTheme――分割領域のアイコンのテーマ
filterTheme――フィルターのテーマ
headerTheme――ヘッダーのテーマ
――前回のサンプルコードをよく見て、$(document).bind("mobileinit", function(){……});の関数でプロパティを設定する処理を記述すれば、これらの初期設定を変更できます。実際にいろいろとプロパティの値を変更してウィジェットの作成がどう変わるか確認してみると面白いでしょう。
例として、ページの各部分のテーマを設定する例を下にあげておきます。ページにアクセスするとdata-themeの指定はしていないので、それぞれの要素が決まったテーマで表示されます。初期値を設定しておけると、いちいち１つ１つの部品に属性などを用意しておかなくても指定した通りの形で表示がされるのですね。
では、ウィジェット類にはどのようなプロパティが用意されているのでしょうか。主なものをここでざっと整理しておきましょう。
・ページ関係
プロパティの場所――$.mobile.page.prototype.options
addBackBtn――ボタンを自動的に追加するかどうか
backBtnText――ボタンのテキスト
backBtnTheme――戻るボタンのテーマ
theme――全体のテーマ
headerTheme――ヘッダーのテーマ
contentTheme――コンテンツのテーマ
footerTheme――フッターのテーマ
・ボタン
プロパティの場所――$.mobile.button.prototype.options
corners――角を丸くするかどうか（真偽値）
shadow――影をつけるかどうか（真偽値）
inline――インラインで組み込むかどうか（真偽値）
theme――ボタンのテーマ
・スライダー
プロパティの場所――$.mobile.slider.prototype.options
theme――取っ手部分のテーマ
trackTheme――トラック部分のテーマ
・セレクトメニュー
プロパティの場所――$.mobile.selectmenu.prototype.options
corners――角を丸くするかどうか（真偽値）
nativeMenu――ネイティブメニュー（HTML本来のメニュー）を使うかどうか（真偽値）
hidePlaceholderMenuItems――プレースホルダを非表示にするかどうか（真偽値）
theme――メニューを呼び出すボタンのテーマ
overlayTheme――リストの周辺枠のテーマ
・リストビュー
プロパティの場所――$.mobile.listview.prototype.options
disabled――使用不可とするかどうか（真偽値）
filter――フィルターのON/OFF（真偽値）
filterCallback――フィルターのコールバック関数
filterPlaceholder――フィルターのプレースホルダ
inset――インセットリストにするかどうか（真偽値）
splitIcon――右側を分割しアイコン表示する場合のアイコン
theme――テーマ
countTheme――項目数をカウントする表示のテーマ
dividerTheme――区切り項目のテーマ
splitTheme――分割領域のアイコンのテーマ
filterTheme――フィルターのテーマ
headerTheme――ヘッダーのテーマ
――前回のサンプルコードをよく見て、$(document).bind("mobileinit", function(){……});の関数でプロパティを設定する処理を記述すれば、これらの初期設定を変更できます。実際にいろいろとプロパティの値を変更してウィジェットの作成がどう変わるか確認してみると面白いでしょう。
例として、ページの各部分のテーマを設定する例を下にあげておきます。ページにアクセスするとdata-themeの指定はしていないので、それぞれの要素が決まったテーマで表示されます。初期値を設定しておけると、いちいち１つ１つの部品に属性などを用意しておかなくても指定した通りの形で表示がされるのですね。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
<!DOCTYPE html>
<html>
<head>
<title>sample</title>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function(){
$.mobile.page.prototype.options.theme = "e";
$.mobile.page.prototype.options.headerTheme = "d";
$.mobile.page.prototype.options.contentTheme = "a";
$.mobile.page.prototype.options.footerTheme = "b";
});
</script>
</script>
<script type="text/javascript"
src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
<!-- home page -->
<div id="home" data-role="page">
<div data-role="header">
<h1>Sample</h1>
</div>
<div data-role="content">
<p id="msg">サンプル</p>
<div>これはサンプルのページです。</div>
<hr>
</div>
<div data-role="footer">
<p>this is footer.</p>
</div>
</div>
</body>
</html>
※関連コンテンツ
「jQuery Mobileによるスマートフォン用Webサイト作成入門」に戻る