検索ボックス

検索ボックスは、角の丸い入力域で、文字列が入力されるとクリアのために「x」アイコンが現れる新しい種類のHTMLです。マークアップには input 要素に data-role=“fieldcontain” 属性を指定してください。検索ボックスに指定可能な属性についてはdata属性リファレンスを参照してください。

ラベルは label 要素に for 属性で input 要素のIDを指定することでセマンティックにつなげられます。それらをひとつの div で囲み data-role=“fieldcontain” 属性を指定してグループ化するようにしてください。

<label for="search-basic">Search Input:</label>
<input type="search" name="search" id="search-basic" value="" />

このコードにより、次のような基本的な検索ボックスが生成されます。デフォルトスタイルでは、親要素の幅いっぱいに表示され、ラベルは他の行に分けられた状態になります。

ミニバージョン

ツールバー内など狭いスペースでは、よりコンパクトな大きさのボタンが便利です。ボタンに data-mini=“true” 属性を追加することで、ミニサイズにできます。

<label for="search-basic">Search Input:</label>
<input type="search" name="search" id="searc-basic" value="" data-mini="true" />

フィールドコンテナ

検索ボックスを data-role=“fieldcontain” 属性を持ったコンテナ要素で囲み、横幅のあるフォーム上でもスタイルを向上させることもできます。

<div data-role="fieldcontain">
    <label for="search-basic">Search Input:</label>
    <input type="search" name="search" id="search-basic" value="" />
</div>

この検索ボックスは、次のように出力されます。

スウォッチを適用すると、次のようになります。

プラグイン textinput の呼び出し

このプラグインは、自動的に type=“search” の input 要素を探して初期化します。この時 data-role 属性の指定は不要です。しかし、もし他のjQueryプラグイン同様に手動で特定の要素に textinput プラグインを適用したい場合、次のようにします。

$('.mySearchInput').textinput();

オプション

テキスト入力プラグインは、次のようなオプションを持ちます。

initSelector CSS selector string

default: "input[type='text'], input[type='search'], :jqmData(type='search'), input[type='number'], :jqmData(type='number'), input[type='password'], input[type='email'], input[type='url'], input[type='tel'], textarea, input:not([type])"

ここには、自動初期化処理により textinuputs プラグインになるセレクタを定義します。この値を変更するにはmobileinitイベントを使います。

$( document ).bind( "mobileinit", function(){
   $.mobile.textinput.prototype.options.initSelector = ".myInputs";
});
mini boolean

default: false

要素のサイズを、よりコンパクトなミニバージョンにする。このオプションは、data属性でも指定可能: data-mini="true"

$('.selector').textinput({ mini: "true" });
theme string

default: null, inherited from parent

ウィジェットの色(スウォッチ)を指定します。テーマで定義されたスウォッチをあらわすaからzまでのアルファベットが指定できます。デフォルトでは、個別に設定されない場合、親要素のス ウォッチ指定を引き継ぐようになっています。このオプションはdata属性でも次のように表現できます: data-theme="a"

$('.selector').textinput({ theme: "a" });
clearSearchButtonText string

default: "clear text"

検索用文字列をクリアし、任意の文字列に置き換える。

$('.selector').textinput({ clearSearchButtonText: "custom value" });

メソッド

テキスト入力プラグインは、次のようなメソッドを持ちます。

enable 使用不可状態のテキスト入力を使用可能にする。
 $('.selector').textinput('enable');
disable テキスト入力を使用不可状態にする。
 $('.selector').textinput('disable');

イベント

直接 input 要素イベントにバインドしてください。jQuery Mobileによる仮想的なイベント、もしくは change, focus, blur などのような標準的なJavaScriptのイベントにバインドできます。

$( ".selector" ).bind( "change", function(event, ui) {
  ...
});

テキスト入力プラグインは、次のような独自イベントも持っています。

create triggered when a text input is created
$( ".selector" ).textinput({
   create: function(event, ui) { ... }
});