Question

我想创建一个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。

请帮忙。

提前致谢。

Answer 1

你需要追加元素，然后为每个元素调用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;
        }
    };
}

我希望能帮到你。

Answer 2

很简单：

首先通过以下方式创建HTML JQuery元素按钮：

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

接下来，将按钮注入页面中的任何位置：

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

最后在按钮上运行按钮（）JQuery Mobile命令：

button.button();

到目前为止，您的页面中应该有一个功能齐全的JQM样式按钮。

jquery mobile：动态创建网格类型按钮

2 个答案: