javascript - how to update the styles to a listview in jquery mobile? -
i getting data server , create ul list trying update styles.
it seems listview('refresh',true)
doesn't work. using jqm 1.4 beta
function parsedata(data) { var html = '<ul data-role="listview" data-autodividers="true" data-filter="true" data-inset="true">'; $.each(data, function( index, value ) { html = '<li>' + '<div data-role="collapsible">' + '<p>' + value.title + '</p>' + '</div>' + '</li>'; }); html += '</ul>'; return html; } var div = $('#div'); div.html(parsedata(data)); div.find('ul').listview('refresh',true);
an ideas?
as of jquery mobile 1.4 alpha 2, .trigger('create')
, .trigger('pagecreate')
deprecated , removed 1.5.
the replacement of function .enhancewithin()
, when called on parent element, widgets within enhannced.
also, correct syntax / markup of collapsible is
<div data-role="collapsible"> <h4>heading</h4> <!-- missing tag --> <p>collapsible / expandable contents</p> </div>
to enhance listview , collapsible, need is
$('#div').enhancewithin();
update
collapsibles inheriting margin
parent li
, resulting in styling collapsible's heading , content inadequately. adding below css fixes issue.
li .ui-collapsible-heading, .ui-collapsible-heading-toggle { margin: 0 !important; } li .ui-collapsible-heading-collapsed .ui-collapsible-heading-toggle { margin-bottom: 1px !important; }
Comments
Post a Comment