Question

I would like to use the jQuery button elements as “standalone” – without the usage of the .button() function (including the rollover effect). Assigning the .button() to each individually would be quite complicated…

What I am looking for is a solution to either use the direct CSS classes of jQuery UI to create some sort of “combined” class, something like: (Notice: “import” used to describe only, I know it’s invalid)

.ui-button-custom {
    "import" ui-state-default;
}
.ui-button-custom:hover {
    "import" ui-state-hover;
}

Other possible way would be to apply .button() dynamically to specific elements, i.e. something like:

// gets all elements with "custom-button" in the class attr
$("a[class*=custom-button").each(function(){
  var t=$(this);
  // apply .button() to all of them
  t.button({
    icons: {
      // get the icon dynamically from the class name:
      // strip off "custom-button-" and the rest is the icon name
      primary: t.attr('class').substring(lastIndexOf('custom-button-'))
    }
  });
});

<a href="#" class="custom-button-ui-icon-refresh">Log In</a>

Notice: This is just an outline of what an solution could look like. I have just a little experience with jQuery UI so maybe someone with more experience could point out problems with this idea…

My questions are:

1. Is there any other way how to do this?
2. If not & if pure CSS is not possible – how to complete the JS above (if possible)? I know that the .button() uses .next() which I quite don’t understand…

Answer 1

After some experimenting I finally found the solution:

<a href="#" id="sss" class="custom-button-ui-icon-refresh">Log In</a>
<br />
<a href="#" id="sssaaa" class="custom-button-ui-icon-circle-close">Log In</a>
<br />
<br />

<script type="text/javascript">
$("a[class*='custom-button']").each(function(){
  var t=$(this);
  var icon_class = t.attr('class');
  var icon = icon_class.replace('custom-button-','');
  // alert(icon);
  // apply .button() to all of them
  t.button({
    icons: {
      // get the icon dynamically from the class name:
      // strip off "custom-button-" and the rest is the icon name
      primary: icon
    }
  });
  if ( t.text() == "" ){
     t.css("height", "25px");
     t.css("width", "25px");
  }
});
</script>