Response title
This is preview!
Turn off listview icons by default so no need to use data-icon="false" everywhere and override where necessary
in jQuery Mobile
•
10 years ago
I did not want icons on my listview elements except where explicitly defined - basically turning the default behaviour on its head:
1) Add this before the jquery.mobile.js is loaded.
Within $.widget( "mobile.listview", $.mobile.widget ) is the code to define the default icon which currently stands as shown below in refresh: function( create )
This obviously takes no notice of the "options.icon" flag set in step (1) for the list view and will show an icon for all <li> elements where "data-icon" is not defined so I changed the logic to test for explicit values set per <li> element and then fall back to the options.icon value set in the mobile init.
3) Wherever you want an icon just use the data-icon directive as normal e.g.
So now you can remove all those <li data-icon="false"> statements and use <li>
1) Add this before the jquery.mobile.js is loaded.
<script>
$(document).bind("mobileinit", function(){
$.mobile.listview.prototype.options.icon = false;
});
</script>
2) NEED TO EDIT THE CORE JQUERY MOBILE FUNCTION FOR THIS TO WORK:$(document).bind("mobileinit", function(){
$.mobile.listview.prototype.options.icon = false;
});
</script>
Within $.widget( "mobile.listview", $.mobile.widget ) is the code to define the default icon which currently stands as shown below in refresh: function( create )
if ( a.length ) {
icon = item.jqmData("icon");
This obviously takes no notice of the "options.icon" flag set in step (1) for the list view and will show an icon for all <li> elements where "data-icon" is not defined so I changed the logic to test for explicit values set per <li> element and then fall back to the options.icon value set in the mobile init.
if ( a.length ) {
var override = item.jqmData("icon");
icon = (override !== undefined) ? override : (o.icon !== undefined) ? o.icon : override;
icon = (override !== undefined) ? override : (o.icon !== undefined) ? o.icon : override;
3) Wherever you want an icon just use the data-icon directive as normal e.g.
<ul data-role="listview" data-inset="true">
<li data-icon="star" ><a href="#">Icon</a></li>
<li><a href="#">No Icon</a></li>
</ul> <li><a href="#">No Icon</a></li>
So now you can remove all those <li data-icon="false"> statements and use <li>
1
