2

「onclick」または「href」機能を備えたボタンで構成される jquery モバイル グリッドを作成したいと考えています。ボタンの数は、実行時に動的に作成する必要があります。たとえば、このコード ブロックはライブラリ インデックスのように機能するはずです。ライブラリ ボタンをクリックすると、ボタンのグリッドに「書籍名」が表示され、書籍名のボタンをクリックすると、作成される書籍の「章番号」で構成されるボタンの別のグリッドが表示されます。本の選択時に動的に。グリッドを作成するための私の静的 html コードは、

<div class="ui-grid-d" id="book_chooser">
        <div class="ui-block-a"><button class="ui-bar ui-bar-a" style="height:30px">Book A</button></div>
        <div class="ui-block-b"><button class="ui-bar ui-bar-a" style="height:30px">Book B</button></div>
        <div class="ui-block-c"><button class="ui-bar ui-bar-a" style="height:30px">Book C</button></div> 
        <div class="ui-block-d"><button class="ui-bar ui-bar-a" style="height:30px">Book D</button></div>
        <div class="ui-block-e"><button class="ui-bar ui-bar-a" style="height:30px">Book E</button></div>
        <div class="ui-block-a"><button class="ui-bar ui-bar-a" style="height:30px">Book A</button></div>
        <div class="ui-block-b"><button class="ui-bar ui-bar-a" style="height:30px">Book B</button></div>
        <div class="ui-block-c"><button class="ui-bar ui-bar-a" style="height:30px">Book C</button></div> 
        <div class="ui-block-d"><button class="ui-bar ui-bar-a" style="height:30px">Book D</button></div>
        <div class="ui-block-e"><button class="ui-bar ui-bar-a" style="height:30px">Book E</button></div>
        <div class="ui-block-a"><button class="ui-bar ui-bar-a" style="height:30px">Book A</button></div>
        <div class="ui-block-b"><button class="ui-bar ui-bar-a" style="height:30px">Book B</button></div>
        <div class="ui-block-c"><button class="ui-bar ui-bar-a" style="height:30px">Book C</button></div> 
        <div class="ui-block-d"><button class="ui-bar ui-bar-a" style="height:30px">Book D</button></div>
        <div class="ui-block-e"><button class="ui-bar ui-bar-a" style="height:30px">Book E</button></div>

このボタンのグリッドは、本の数に基づいて実行時に動的に作成する必要があります。

phonegapプラグインでjquery、javascript、およびhtml5を使用しています。

助けてください。

前もって感謝します。

4

2 に答える 2

3

要素を追加してから、要素ごとにtrigger（'create'）を呼び出す必要があります。例を使用すると、より簡単になります。

function redrawGrid(num){

    $('#book_chooser').html(''); //clean grid
    for (var i = 0, class_div = "a"; i < num; i++) {

        var d = '<div class="ui-block-'+class_div+'"> \
                    <div class="ui-bar ui-bar-e" style="height:70px"> \
                        <small>dia '+ (i+1) +'</small> \
                        <button type="submit" data-theme="a" data-icon="plus">Book</button> \
                    </div> \
                </div>';

        $('#book_chooser').append(d).trigger('create'); 

        switch(class_div){ //change class of ui-block
            case 'a' : class_div= "b"; break;
            case 'b' : class_div= "a";break;
        }
    };
}

それがあなたのために働くことを願っています。

于 2013-03-01T10:52:55.030 に答える
2

非常に簡単です：

まず、次の方法でボタン HTML JQuery 要素を作成します。

var button = $("<button>My Button</button>");

次に、ページ内の任意の場所にボタンを挿入します。

$("#my_button_div").append(button);

最後に、ボタンで button() JQuery Mobile コマンドを実行します。

button.button();

これで、ページに機能的で JQM スタイルのボタンが表示されます。

于 2013-03-05T19:23:40.517 に答える