Archive for category JavaScript

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



, , , ,