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

我想创建一个由'onclick'或'href'功能组成的jquery移动网格。运行时应该动态创建按钮的数量。例如，这段代码应该像库索引一样工作。在点击库按钮时，它应该在按钮的网格中显示“书名”，并且在点击书名的按钮时，它应该显示另一个按钮的网格，这些按钮由书中将要创建的“章节号”组成动态选择书籍。我创建了电网静态HTML代码，jquery mobile：动态创建网格类型按钮

<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插件。

请帮忙。

在此先感谢。

来源

2013-02-03 Karthi

你需要添加的元素，然后调用触发（“创建”），对每个元素，更容易例如：

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-01 10:52:55 fermin

很简单：

首先通过创建一个按钮，HTML JQuery的元素：

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

接下来，无论你希望它是在页面注入按钮：

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

而且最后运行button（）按钮上的JQuery Mobile命令：

button.button();

您现在应该在页面中拥有功能和JQM样式的按钮。

来源

2013-03-05 19:23:40

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

回答

相关问题