javascript - 使用 anchor 标记 a 在网格中创建动态按钮

Question

我想在 Accordion 内部的网格中创建动态按钮。我的静态代码如下。我想让它充满活力。在运行时我会知道我需要在网格中创建的按钮数量。列应保持为 4，而行数可以根据按钮的数量而改变。

<div data-role="collapsible" data-theme="c" data-content-theme="b"  class="custom-collapsible" >
<h3>Kategorie 01</h3>
<div class= "limit-theme">          
        <div data-role="content">
            <div class="ui-grid-c">
                <div class="ui-block-b">  <a data-role="button" class="custom-button"></a>          
                </div>
                <div class="ui-block-b"> <a data-role="button" class="custom-button"></a>
                </div>
                <div class="ui-block-c"> <a data-role="button" class="custom-button"></a>
                </div>
                <div class="ui-block-d"> <a data-role="button" class="custom-button"></a>
                </div>
                <div class="ui-block-a"> <a data-role="button" class="custom-button"></a>
                </div>
                <div class="ui-block-b"> <a data-role="button" class="custom-button"></a>
                </div>
                <div class="ui-block-c"> <a data-role="button" class="custom-button"></a>
                </div>
                <div class="ui-block-d"> <a data-role="button" class="custom-button"></a>
                </div>
                <div class="ui-block-a"> <a data-role="button" class="custom-button"></a>
                </div>
                <div class="ui-block-b"> <a data-role="button" class="custom-button"></a>
                </div>
                <div class="ui-block-c"> <a data-role="button" class="custom-button"></a>
                </div>
                <div class="ui-block-d"> <a data-role="button" class="custom-button"></a>
                </div>
            </div>
        </div>
</div>

我已经创建了一个数据模型，并想将这个数据模型链接到这个网格。此外，每个按钮都有两个不同的背景图像..pressed.jpg 和normal.jpg。我想创建这些按钮并从数据模型设置其背景图像。在上面的代码中，所有按钮都具有相同的背景图像。

Answer 1

这是一个 fiddle 演示: http://jsfiddle.net/ezanker/BJnV6/

我设置了一个包含 4 个列类的数组:

var colClasses = ["ui-block-a","ui-block-b","ui-block-c","ui-block-d"];

然后在 for 循环中添加按钮(为了方便，我给网格 div 指定了 theGrid 的 id):

$(document).on("pagebeforeshow", "#page1", function(){

    var ItemsToAdd = '';
    for (var i = 0; i< 23; i++){
        var col = i % 4;
        ItemsToAdd += '<div class="' + colClasses[col] + '">  <a data-role="button" class="custom-button" href="#">button ' + i +  '</a></div>'
    }

    $("#theGrid").append($(ItemsToAdd));
    $("#theGrid").trigger("create");
});

使用取模函数 (I % 4)，您可以确定应将按钮添加到哪一列，从而确定要使用哪个类。然后在使用 jquery append 函数添加按钮后，触发 jQM create 方法将样式应用于动态添加的按钮。