在框架外使用jQuery UI按钮

我希望使用jQuery按钮元素作为“独立的”——而不使用

.button（）

函数（包括滚动效果）。将

.button（）

分别分配给每个按钮将非常复杂

我想要的是一个解决方案，或者使用jQueryUI的直接CSS类来创建某种“组合”类，比如：（注意：“import”仅用于描述，我知道它是无效的）

其他可能的方法是将

.button（）

动态应用于特定元素，例如：

// 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>

<a href="#" class="custom-button-ui ui-state-default">Log In</a>. 

//获取类attr中带有“custom button”的所有元素
$（[class*=自定义按钮”）。每个（函数（）{
var t=$（本）；
//将.button（）应用于所有这些
t、 钮扣({
图标：{
//从类名中动态获取图标：
//去掉“自定义按钮”，剩下的就是图标名
主：t.attr（'class'）。子字符串（lastIndexOf（'custom-button-'））
}
});
});

注意：这只是一个解决方案的概要。我对jQueryUI只有一点经验，所以也许有经验的人可以指出这个想法的问题

我的问题是：

还有别的办法吗

如果不是&如果纯CSS不可能-如何完成上面的JS（如果可能）？我知道

.button（）

使用了

.next（）

，我不太明白

---

为什么不简单地将多个类添加到自定义按钮？例如：

// 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>

<a href="#" class="custom-button-ui ui-state-default">Log In</a>. 

。

然后使用jquery设置mouseover/mouseout函数来添加/删除ui状态悬停类

<script type="text/javascript">
$(document).ready(function(){
  $(".custom-button-ui").mouseover(function(){
    $(this).removeClass('ui-state-default').addClass('ui-state-hover');
  });
  $(".custom-button-ui").mouseout(function(){
    $(this).removeClass('ui-state-hover').addClass('ui-state-default');
  });
});
</script>

$（文档）.ready（函数（）{
$（“.custom button ui”）.mouseover（函数（）{
$（this）.removeClass（'ui-state-default'）.addClass（'ui-state-hover'）；
});
$（“.custom button ui”）.mouseout（函数（）{
$（this）.removeClass（'ui-state-hover'）.addClass（'ui-state-default'）；
});
});

甚至

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

及

$（文档）.ready（函数（）{
$（“.custom button ui”）.addClass（'ui-state-default'）；
$（“.custom button ui”）.mouseover（函数（）{
$（this）.removeClass（'ui-state-default'）.addClass（'ui-state-hover'）；
});
$（“.custom button ui”）.mouseout（函数（）{
$（this）.removeClass（'ui-state-hover'）.addClass（'ui-state-default'）；
});
});

经过一些实验，我终于找到了解决方案：

<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>

$（[class*='custom-button']）。每个（函数（）{
var t=$（本）；
var icon_class=t.attr（'class'）；
var icon=icon_class.replace（'custom-button-'，''）；
//警报（图标）；
//将.button（）应用于所有这些
t、 钮扣({
图标：{
//从类名中动态获取图标：
//去掉“自定义按钮”，剩下的就是图标名
主：图标
}
});
如果（t.text（）==“”）{
t、 css（“高度”，“25px”）；
t、 css（“宽度”，“25px”）；
}
});

这将仅用于更改默认/悬停状态。但是，我需要获取按钮的所有行为，包括图标…是的，我可以看到，要获得正确的外观和感觉，这将意味着大量的内务管理。thanx对于编辑我的朋友，但是-这如何为每个按钮生成单独的图标？？