Question

我想在手风琴中的网格中创建动态按钮。我的静态代码如下。我想让它充满活力。在运行时我会知道我需要在网格中创建的按钮数量。列应保持为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

这是一个小提琴演示： http://jsfiddle.net/ezanker/BJnV6/

我设置了4个列类的数组：

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

然后在for循环中添加了按钮（为方便起见，我给了网格div一个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方法，将样式应用于动态添加的按钮。

使用锚标记a在网格中创建动态按钮

1 个答案: