CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-mobile
naki
naki

Reputation: 77

create dynamic buttons in a grid using anchor tag a

I want to create dynamic buttons in a grid inside an accordion. My static code is bellow. I would like to make it dynamic. At run time I would know the number of buttons i need to creat in the grid. The columns should remain to 4 while number of rows can change according to the number of buttons.

<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>

I have created a data model and would like to link this data-model to this grid. Furthermore every button has two different background images ..pressed.jpg and normal.jpg. I want to create theses buttons and set its background-image from data-model. In the above code all the buttons have the same background-image.

Upvotes: 0

Views: 1219

Answers (1)

ezanker
ezanker

Reputation: 24738

Here is a fiddle demo: http://jsfiddle.net/ezanker/BJnV6/

I set up an array of the 4 column classes:

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

Then added the buttons in a for loop (i gave the grid div an id of theGrid for convenience):

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

Using the modulo function (I % 4), you can determine which column the button should be added to and therefore which class to use. Then after adding the buttons using the jquery append function, trigger the jQM create method to apply styling to the dynamically added buttons.

Upvotes: 1

Related Questions