создавать динамические кнопки в сетке с помощью тега привязки

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. Я хочу создать тезисы и установить фоновое изображение из модели данных. В приведенном выше коде все кнопки имеют одинаковое фоновое изображение.

Теги:
jquery-mobile

1 ответ

1
Лучший ответ

Вот демонстрация скрипки: http://jsfiddle.net/ezanker/BJnV6/

Я создал массив из четырех классов столбцов:

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

Затем добавили кнопки в цикле for (я дал для div grid id id of the Grid):

$(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");
});

Используя функцию modulo (I% 4), вы можете определить, в каком столбце должна быть добавлена кнопка, и, следовательно, какой класс использовать. Затем, добавив кнопки с помощью функции jquery append, запустите метод создания jQM, чтобы применить стиль к динамически добавленным кнопкам.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню