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