2

我想创建一个 jquery 移动网格，由具有“onclick”或“href”功能的按钮组成。按钮的数量应在运行时动态创建。例如，这段代码应该像图书馆索引一样工作。单击图书馆按钮时，应在按钮网格中显示“书名”，单击书名按钮时，应显示另一个按钮网格，其中包含将要创建的书中的“章节编号”在选择书籍时动态。我用于创建网格的静态 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 回答