As of jQuery Mobile 1.4 data-role=button
is deprecated and will be removed on 1.5. It is now replaced by adding classes directly to anchor. The main class is ui-btn
which will convert an element into a button.
HTML
<div data-role="content" class="content">
<div id="buttonContainer" data-bind="foreach: buttons">
<!-- adds button and icon classes -->
<a class="controllerButton" data-bind="text: label, css: icon">
</a>
</div>
</div>
JS
ko.applyBindings({
buttons: [{
"label": "One",
"icon": "ui-btn ui-icon-home ui-btn-icon-top"
}, {
"label": "Two",
"icon": "ui-btn ui-icon-arrow-r ui-btn-icon-right"
}, {
"label": "Three",
"icon": "ui-btn ui-icon-edit ui-btn-icon-bottom"
}, {
"label": "Four",
"icon": "ui-btn ui-icon-info ui-btn-icon-left"
}, {
"label": "Five",
"icon": "ui-btn ui-icon-delete ui-btn-icon-notext"
}]
});