jQuery Mobile – Programatically Changing (and Refreshing) Button Icons

I started working with jQuery Mobile and ran into a problem that took me some time to figure out. I have a button with an icon and I want to change that icon programatically every time the button is pressed. After searching the internet, I finally pieced together a solution that worked. I am currently using jQuery Mobile 1.0 RC2.

In the HTML, define your button:

<a href="javascript:changeIcon()" id="changeIconButton" data-role="button" data-icon="delete">Change My Icon</a>

In the JavaScript create your function:

function changeIcon() { 
   $("#changeIconButton").data('icon', 'check'); 
   $("#changeIconButton .ui-icon").addClass("ui-icon-check").removeClass("ui-icon-delete"); 
}

In this case the icon is being changed from a “delete” icon into a “check” icon when the button is pressed. The icon is also refreshed.

Currently you can use the following icon types:

Left arrow – “ui-icon-arrow-l”
Right arrow – “ui-icon-arrow-r”
Up arrow – “ui-icon-arrow-u”
Down arrow – “ui-icon-arrow-d”
Delete – “ui-icon-delete”
Plus – “ui-icon-plus”
Minus – “ui-icon-minus”
Check – “ui-icon-check”
Gear – “ui-icon-gear”
Refresh – “data-iconrefresh”
Forward – “ui-icon-forward”
Back – “ui-icon-back”
Grid – “ui-icon-grid”
Star – “ui-icon-star
Alert – “ui-icon-alert”
Info – “ui-icon-info”
Home – “ui-icon-home”
Search – “ui-icon-search”

More info on jQuery Mobile buttons can be found on the jQuery Mobile Site here

button, buttons, jQuery, jQuery Mobile, jQuery Mobile buttons

This entry was posted on October 26, 2011, 3:06 pm and is filed under JavaScript. You can follow any responses to this entry through RSS 2.0. You can leave a response, or trackback from your own site.

#1 by Dave on April 13, 2012 - 7:09 pm

THANK YOU SO MUCH for posting this excellent little bit of CRITICAL information; should be posted on the jQuery Mobile forum; with this basis i came up with the following which toggles the icon:

function changeIcon() {
if ($(“#changeIconButton”).data(‘icon’) == ‘plus’){
$(“#changeIconButton”).data(‘icon’, ‘minus’);
$(“#changeIconButton .ui-icon”).addClass(“ui-icon-minus”).removeClass(“ui-icon-plus”);
}
else {
$(“#changeIconButton”).data(‘icon’, ‘plus’);
$(“#changeIconButton .ui-icon”).addClass(“ui-icon-plus”).removeClass(“ui-icon-minus”);
}
}

AGAIN, mucho thanks.

#2 by Dan Smart on August 22, 2012 - 8:07 am

Thanks, very useful.

#3 by TeBone on December 1, 2012 - 4:38 pm

Just want to thank you for the snippet!
Just a note from my side, I couldn’t use it right away! I am using jqm 1.2.0 final and in my case the toggle of classes did not refresh the underlaying spans so I changed your code to the following:

click (function(){
if ($(this).data(‘icon’) == ‘plus’){
$(this).data(‘icon’,’minus’);
$(this).find(‘span .ui-icon-plus’).addClass(“ui-icon-minus”).removeClass(“ui-icon-plus”);
}else{
$(this).data(‘icon’,’plus’);
$(this).find(‘span .ui-icon-minus’).addClass(“ui-icon-plus”).removeClass(“ui-icon-minus”);
}
}

Hope it that this is helpful to others

- #4 by Todd Jones on December 28, 2012 - 11:44 am
  
  Thanks Tebone, the JQM help.
  
  Question when my button is first rendered i see the span created by JQM, but then after the first click the <div is all that is left and the span is gone.
  
  button is declared as: "Read More”
  
#5 by nawaz005 on March 6, 2013 - 6:56 am

Thank u very much!!!

#6 by Dave Faulkmore (@usguyintokyo) on July 9, 2013 - 2:06 am

Realize this post is quite old. Would recommend instead of putting javascript in the html (href=”javascript:changeIcon()”) bind to click event

$(“#changeIconButton”).on(‘click’, changeIcon() );

jsimapps