CODEWITHSUNDEEP
jquerycssjquery-mobile
Mario
Mario

Reputation: 335

Customizing ui-icon arrow of listview items

I want to use my own image of arrow for items in listview. Where and how I should change jquery mobile default grey circle arrow? Should I override jquery css classes? I'm using jquery-mobile 1.1.0RC. There's my html code for list items:

        <ul data-role="listview" id="list_id"> </ul>

And there's my javascript code, there I'm dynamically adding list items:

var ap = "<li data-corners=\"false\" data-shadow=\"false\" data-iconshadow=\"true\" data-inline=\"false\" data-wrapperels=\"div\" data-icon=\"images/next.png\" data-iconpos=\"right\" data-theme=\"a\" class=\"ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-li-has-thumb ui-btn-up-c\"><div class=\"ui-btn-inner ui-li\"><div class=\"ui-btn-text\"><a href=\"index.html\" class=\"ui-link-inherit\">"+
    "<img src=\"test_thumb.jpg\" class=\"ui-li-thumb\">"+
"<h3 class=\"ui-li-heading\">Big text</h3>"+
"<p class=\"ui-li-desc\">Smaller text</p>"+
"</a></div><span class=\"ui-icon ui-icon-arrow-r ui-icon-shadow\">&nbsp;</span</div</li>";

$('#list_id').append(ap);
$('#list_id').listview('refresh');

As you can see I've tried to change data-icon attribute to my own image source, but it doesn't work. Sorry if question is too obvious, I'm newbie on css and jquery framework, so any help will be appreciated. Thanks!

Upvotes: 1

Views: 6623

Answers (2)

codaniel
codaniel

Reputation: 5253

To use custom icons, specify a data-icon value that has a unique name like myapp-email and the button plugin will generate a class by prefixing ui-icon- to the data-icon value and apply it to the button: ui-icon-myapp-email.

You can then write a CSS rule in your stylesheet that targets the ui-icon-myapp-email class to specify the icon background source. To maintain visual consistency with the rest of the icons, create a white icon 18x18 pixels saved as a PNG-8 with alpha transparency.

In this example, we're just pointing to a standalone icon image, but you could just as easily use an icon sprite and specify the positioning instead, just like the icon sprite we use in the framework.

.ui-icon-myapp-email {
  background-image: url("app-icon-email.png");
}

Yeah check out my copy and paste skills. http://jquerymobile.com/test/docs/buttons/buttons-icons.html

Upvotes: 2

Kyle
Kyle

Reputation: 67244

You can either create a new class that uses your custom image and apply it to all the elements within the mobile site that will use it.

Or replace the jQuery icon image itself, I believe they're in a directory called images.

If you're still stuck after that, try reading this easy to follow tutorial by Andy Matthews.:)

Upvotes: 1

Related Questions