Force a refresh on a Jquery Mobile controlgroup button on small screen display
I have a Jquery Mobile controlgroup with two buttons:
<div data-role="controlgroup" data-type="horizontal" class="headerMenu iconposSwitcher">
<a href="#" data-role="button" data-icon="barcode" data-iconpos="left" class="EANView">EAN</a>
<a href="#" data-role="button" data-icon="style" data-iconpos="left" class="styleView">Style</a>
</div>
On larger screens (PC, iPad) I want the text to show ~ data-iconpos="left". On smaller screens (Mobile, Smartphone) there is little space, so I don't want to display the text ~ data-iconpos="notext"
I can use the "refresh" function on select-menus. Is there a similar way to refresh controlgroups or button elements?
I tried it like this, changes iconpos, but does not rebuild the button.
if ($('body').width() < 275)
{
$(".iconposSwitcher a").attr('data-iconpos','notext');
$('.headerMenu').controlgroup('refresh', true);
}
Thanks for hints & Rgs
EDIT:
This works:
$(".iconposSwitcher a").removeClass('ui-btn-icon-left').addClass('ui-btn-icon-notext');
Easier than thought...
EDIT:
For div elements (controlgroup with input
):
$(".iconposSwitcher-div a").attr('data-iconpos','notext').removeClass('ui-btn-icon-left ui-btn-icon-right').addClass('ui-btn-icon-notext');
maybe its too late but for those who come here with same question:
You can use .trigger('create')
on any Element to trigger 'Create' event to do JQM magic on elements.
I've solved it this way:
$button = [YOUR CONTROLGROUP DIV]
$button.find('a').button();
$button.controlgroup();
For buttons, use the buttonMarkup()
method instead of controlgroup()
In general, I prefer the usage of the page()
method, see this post
Jquery Mobile: updating a form more than once
What works for me is calling controlgroup() twice; once to initialize, next to refresh, eg:
// refresh group
$('#checkboxes').controlgroup().controlgroup('refresh');
精彩评论