jquery mobile：动态创建网格类型按钮 [英] jquery mobile: create grid type buttons dynamically

问题描述

我想创建一个jquery移动网格，其中包含带有'onclick'或'href'功能的按钮。应在运行时动态创建按钮数。例如，这段代码应该像库索引一样工作。单击库按钮时，它应该在按钮网格中显示书名，并且在单击书名按钮时，它应该显示另一个按钮网格，其中包含将在书中创建的章节编号动态选择书籍。我用于创建网格的静态html代码是，

I want to create a jquery mobile grid consists of buttons with 'onclick' or 'href' functionality. The number of buttons should be created dynamically during runtime. For example, This block of code should work like a library index. on clicking a library button, it should show the 'book names' in a grid of buttons, and on clicking the buttons of book names, it should show another grid of buttons which consists of 'chapter numbers' in the book which will be created dynamically upon book selection. My static html code for creating the grid is,

<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>

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

Need this grid of buttons should to be created dynamically on run time based on the number of books.

我正在使用带有phonegap插件的jquery，javascript和html5。

I'm using jquery, javascript and html5 with phonegap plugin.

请帮忙。

提前致谢。

推荐答案

你需要追加元素，然后为每个元素调用trigger（'create'），例如更简单：

you need append elements and then call trigger('create') for each element, more easy with example:

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;
        }
    };
}

我希望能为你效劳。

这篇关于jquery mobile：动态创建网格类型按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！