jQuery Mobile ウィジェットのオプションを JavaScriptで設定する

jQuery Mobile ではウィジェットのスタイルや振る舞いを規定するためにさまざまなオプションを設定しますが、データ属性やクラスを付加するのではなく、JavaScript で設定する方法について解説します。

«次の特集記事»
«前の特集記事»

【コンテンツ】

  1. オプション設定の方法
  2. メソッドを使う方法のサンプル
  3. $.mobileオブジェクトを使う方法のサンプル

【記事執筆時の環境】
jQuery Mobile 1.4.4/1.4.5

オプション設定の方法

ウィジェットに対してオプション設定などの操作を加えるには、これまではデータ属性やクラスを付加してきました。jQuery Mobile の提供する API を利用すれば、オプション設定は JavaScript でも行うことができます。Webサイト全体でウィジェットに対し同じ設定をする場合には、JavaScriptのコードを組んで初期化時に実行するようにしておいたほうが効率的です。

ウィジェットにオプションを設定する方法は2つあります。

1つはウィジェットを操作するメソッドを使う方法で、以下の書式で記述します。

$("セレクタ").ウィジェット名({ オプション名: 値 });

そしてもう1つは、$.mobileオブジェクトのプロパティに設定する方法で、以下の書式で記述します。

$.mobile.ウィジェット名.prototype.options.オプション名 = 値;

メソッドを使う方法のサンプル

ナビゲーションバーとリストビューにメソッドを使ってオプション設定してみます。
ナビゲーションバーのアイコン位置をボトムへ変更し、リストビューをインセットリストに変更します。

JavaScriptコードは pagebeforecreateイベントリスナーとして記述します。

$.mobileオブジェクトを使う方法のサンプル

メソッドを使った場合と同様の設定を、$.mobileオブジェクトを使った方法で記述してみます。

JavaScriptコードは mobileinitイベントリスナーとして記述しますが、記述する場所が jQuery Mobile を読み込む前ですので注意してください。

ウィジェットにデータ属性やクラスを付加してオプション設定する方法は HTMLコードだけで済むので可読性は増しますが、量が多いと変更時にわずらわしいです。JavaScriptをうまく使って効率的な方法を検討しましょう。

«次の特集記事»
«前の特集記事»

スポンサーリンク

jQuery Mobile 特集記事

基本的な使い方

ウィジェットの設置

フォームの設置

イベント・動作設定

カスタマイズ

使い方の応用

オンライン講座

Webの基礎マスター講座ページへのリンク


連載講座:WordPressで作る簡単Webサイトページへのリンク

提供しているサービス

WordPressサイト制作出張講座ページへのリンク

WordPress を利用した Webサイト制作の方法を、
あなたのオフィスにうかがいご説明いたします。
料金:¥45,000

サービス詳細ページ >>

申し込みフォーム >>


Webサイト1日公開サービスページへのリンク

一刻も早く Webサイトが必要な方のために、
一緒に作業し1日で公開までもっていきます。
料金:¥45,000

サービス詳細ページ >>

申し込みフォーム >>

スポンサーリンク

ページの先頭へ