I'm using this transform to build a jQuery mobile button inside of a regular table 'td':
{
"tag":"button",
"type":"button",
"id":"${idPrefix}-delete",
"data-role":"button",
"data-mini":"true",
"data-icon":"delete",
"html":"Delete"
}
but it renders as an old HTML button.
After I manually refresh the button, it looks like a mobile button with the icon, but the old button is "minified" inside of it.
How can this be fixed?
missing ::before?
I just compared it to a normal looking mobile button, and the problematic button is missing the ::before right before the <button> tag.
I removed all of the mobile attributes and tried to call button() later, same result.
To speed up web app initializing and to increase jQuery Mobile's performance, the team decided to drop .buttonMarkup() widget and replace it with classes.
There is no longer data-role=button, data-mini=true, etc... All are replaced with classes as follows.
To convert a button or an anchor into a jQM button, just add ui-btn class. To add an icon with position ui-btn-icon-left, right, top, bottom. Icon's image ui-icon-bars, delete, info, etc. Mini button/anchor ui-mini. Button's theme ui-btn-a or b.
<button class="ui-btn ui-mini ui-btn-icon-right ui-icon-delete">Button</button>