CODEWITHSUNDEEP
htmljquery-mobile
user2779065
user2779065

Reputation: 183

change listview icon JQM

<ul data-role= listview></ul>

in jQuery mobile, the default data-icon of code above is arrow-r. Is it possible to change the default data-icon to delete? and is it also possible to make onclick function on the icon?

Upvotes: 0

Views: 257

Answers (2)

Omar
Omar

Reputation: 31732

If you want to change all listview items, you can achieve it through two ways.

  1. Change default icon on pagecreate event, of a specific listview

    $(document).on("pagecreate", "[data-role=page]", function () {
  $(".selector").listview({ icon:"delete" });
});

    Demo

  2. Change default icon globally on mobileinit event, of all listviews This should be loaded after jQuery js library and before jQuery Mobile js.

    $(document).on("mobileinit", function () {
  $.mobile.listview.prototype.options.icon = "delete";
});

    Demo

Upvotes: 1

ezanker
ezanker

Reputation: 24738

You can change the icon on the LI element by setting the data-icon:

<ul data-role="listview" >
    <li data-icon="delete"><a href="#">data-icon="delete"</a></li>
    <li data-icon="gear"><a href="#">data-icon="gear"</a></li>
    <li data-icon="info"><a href="#">data-icon="info"</a></li>
    <li data-icon="false"><a href="#">data-icon="false"</a></li>
</ul>

If you want a click handler just on the icon, you are better off using split buttons. See example here: http://view.jquerymobile.com/1.3.2/dist/demos/widgets/listviews/#list-split

<ul data-role="listview" data-split-icon="delete" data-split-theme="d" data-inset="true">
    <li><a href="#">
        <h2>Broken Bells</h2>
        <p>Broken Bells</p></a>
        <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
    </li>
    <li><a href="#">
        <h2>Warning</h2>
        <p>Hot Chip</p></a>
        <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
    </li>
</ul>

Upvotes: 1

Related Questions