Question

I can define icon for a jquery ui button in code like this;

$( ".selector" ).button({ icons: {primary:'ui-icon-gear'} });

but I would like to define button icon in HTML code. for example

<a href="#" class="jqbutton ui-icon-gear">button</a>

this way I can only call..
$( “.selector” ).button();
in onready event and define icons in code. otherwise I need to call button() method for every button that have different icon.

Answer 1

You could use the Metadata Plugin.

<a href="#" class="jqbutton {icon: ui-icon-gear}">button</a>

And the script

$(".jqbutton")
  .each(function(){
    var data = $(this).metadata();
    $(this).button({ icons: {primary:data.icon} });
});

I’ve never used this directly, but I have used it through its support in the jquery validation plugin.