5

クライアント側でJSを使用して生成しているHTMLがいくつかあります。jQueryMobileUIのスタイルと機能をこれらのオブジェクトにも適用したいと思います。どうやらわからないようですが...

私が生成するとします：

<div data-role="fieldcontain">
    <label for="select-choice-1" class="select">Choose shipping method:</label>
    <select name="select-choice-1" id="select-choice-1">
        <option value="standard">Standard: 7 day</option>
        <option value="rush">Rush: 3 days</option>
        <option value="express">Express: next day</option>
        <option value="overnight">Overnight</option>
    </select>
</div>

そして、ページ内のjQuery Mobile UIを介してレンダリングしたい...どうすればよいでしょうか？

標準のjQueryUIでは、次の行に沿って呼び出しを行う必要があることを知っています。

$("#select-choice-1").buttonset();

jQuery Mobile UIにこのようなものはありますか？

4

2 に答える 2

2

アップデート！

うん！イベント付きの新しい実装がちょうど上陸しました！

http://jquerymobile.com/blog/2011/07/22/jquery-mobile-team-update-week-of-july-18th/

現在、beta2createでは、要素でトリガーされたイベントがそのレンダリングを引き起こします。

beta2の出荷時にFAQを更新します。

DOMに追加する最上位の要素を見つけて、それを呼び出します.page()。この質問は、実際にはjquery-mobileとタグ付けされた他の多くの質問と重複しているため、毎回説明しないようにショットチュートリアルを作成しました。

ここで最初の投稿を参照してください：http：//jquerymobiledictionary.dyndns.org/faq.html

于 2011-01-13T07:39:44.890 に答える
2

pagecreateで呼び出された場合

$('#page').live('pagecreate',function(event){
    $('#elem_container').page();
});

あなたは再帰的なループライドに行きます。この問題を処理するために、独自のenhance（）関数を作成しました。

$('#page').live('pagecreate',function(event){
    enhance($('#elem_container'));
});

関数は基本的に以下のコードを要約したものです...

function enhance(dis){
    dis.find( "[type='radio'], [type='checkbox']" ).checkboxradio();
    dis.find( "button, [type='button'], [type='submit'], [type='reset'], [type='image']" ).not( ".ui-nojs" ).button();
    dis.find( "input, textarea" ).not( "[type='radio'], [type='checkbox'], button, [type='button'], [type='submit'], [type='reset'], [type='image']" ).textinput();
    dis.find( "input, select" ).filter( "[data-role='slider'], [data-type='range']" ).slider();
    dis.find( "select:not([data-role='slider'])" ).selectmenu();
}

古い投稿：

jQuery mobileファイルを調べた後、私はついにそれを理解しました...実際には非常に簡単です...

$("#select-choice-3").selectmenu();

そして、これが私がこれを掘り下げたコードのチャンクです...

_enchanceControls: function() {
    var o = this.options;
    // degrade inputs to avoid poorly implemented native functionality
    this.element.find( "input" ).each(function() {
        var type = this.getAttribute( "type" );
        if ( o.degradeInputs[ type ] ) {
            $( this ).replaceWith(
                $( "<div>" ).html( $(this).clone() ).html()
                    .replace( /type="([a-zA-Z]+)"/, "data-type='$1'" ) );
        }
    });

    // enchance form controls
    this.element
        .find( "[type='radio'], [type='checkbox']" )
        .checkboxradio();

    this.element
        .find( "button, [type='button'], [type='submit'], [type='reset'], [type='image']" )
        .not( ".ui-nojs" )
        .button();

    this.element
        .find( "input, textarea" )
        .not( "[type='radio'], [type='checkbox'], button, [type='button'], [type='submit'], [type='reset'], [type='image']" )
        .textinput();

    this.element
        .find( "input, select" )
        .filter( "[data-role='slider'], [data-type='range']" )
        .slider();

    this.element
        .find( "select:not([data-role='slider'])" )
        .selectmenu();
}
于 2011-01-12T23:02:14.307 に答える