jQuery Mobile:动态创建网格类型按钮

Question

我想创建一个由具有"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>

需要这个按钮网格应该在运行时根据书籍的数量动态创建。

我正在使用jquery，javascript和html5与phonegap插件。

请帮忙。

提前谢谢。

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 样式的按钮。