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

create dynamic buttons in a grid using anchor tag a

本文关键字：网格 创建 动态 按钮      更新时间：2023-09-26

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

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

这是一个小提琴演示： 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 追加函数添加按钮后，触发 jQM 创建方法以将样式应用于动态添加的按钮。

相关文章：