0

我想在手风琴内的网格中创建动态按钮。我的静态代码如下。我想让它动态化。在运行时，我会知道我需要在网格中创建的按钮数量。列应保持为 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。我想创建这些按钮并从数据模型设置其背景图像。在上面的代码中，所有按钮都具有相同的背景图像。

4

1 回答 1

1

这是一个小提琴演示：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 方法将样式应用于动态添加的按钮。

于 2013-11-10T23:36:08.090 回答