Turn off listview icons by default so no need to use data-icon="false" everywhere and override where necessary

[stevegrove]

INITIAL POST - https://forum.jquery.com/topic/turn-off-listview-icons-by-default-so-no-need-to-use-data-icon-false-everywhere-and-override-where-necessary

JQM 1.1.0 FINAL

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.

<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:

Within $.widget( "mobile.listview", $.mobile.widget ) is the code to define the default icon which currently stands as shown below in refresh: function( create ) around line 4982

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

elements where "data-icon" is not defined so I changed the logic to test for explicit values set per

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;

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>

So now you can remove all those <li data-icon="false"> statements and use <li> instead. I don't think there are any regressions with this update, behaviour will be as current 1.1.0 if the listview option.icon flag is left undefined.

[jaspermdegroot]

@stevegrove

Thanks for the suggestion. Do you mind creating a pull request for this?

https://github.com/jquery/jquery-mobile#pull-requests

BTW - Use triple backtick (before and after) to display code. See Github Flavored Markdown.

[stevegrove]

Sure thing as soon as I get a moment. - thanks for your help BTW - have updated accordingly. I also hope that perhaps this could expand to more than just the listview icons, I'll see when I get round to the Github Pull Request

[MauriceG]

Hi @stevegrove, hi @uGoMobi
I think a listview icon-option would be a good idea to set or disable icons for all list items at once instead of just disable it application wide.

[jaspermdegroot]

@stevegrove - To separate bugs from new features I am closing this issue. It has label "feature request" for tracking and I added it here https://github.com/jquery/jquery-mobile/wiki/Feature-Requests

If you need help with that PR you can still comment this issue.

[jaspermdegroot]

@stevegrove

Were you planning on creating a PR for this?
@MauriceG already created one (#4582). Maybe you want to join the discussion there so we can look for the best solution together.

[stevegrove]

So sorry but had two major deliveries to do last week. Thanks for the heads up.

Sent from my iPhone

On 4 Jul 2012, at 15:58, "Jasper de Groot" reply@reply.github.com wrote:

@stevegrove

Were you planning on creating a PR for this?
@MauriceG already created one (#4582). Maybe you want to join the discussion there so we can look for the best solution together.

---

Reply to this email directly or view it on GitHub:
#4570 (comment)

[jaspermdegroot]

@stevegrove

No problem at all. I just wanted to check, because I would feel bad if you were working on a PR for a feature you came up with and in the meantime I merge someone else his PR.