0

我想将 jQuery 按钮元素用作“独立” - 不使用该.button()功能（包括翻转效果）。单独分配.button()给每个人会很复杂......

我正在寻找的是一种解决方案，可以使用 jQuery UI 的直接 CSS 类来创建某种“组合”类，例如：（注意：“import”仅用于描述，我知道它是无效的）

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

其他可能的方法是.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>

注意：这只是一个解决方案的轮廓。我对 jQuery UI 有一点经验，所以也许有更多经验的人可以指出这个想法的问题......

我的问题是：

  1. 有没有其他方法可以做到这一点？
  2. 如果不是 & 如果纯 CSS 是不可能的 - 如何完成上面的 JS（如果可能）？我知道我完全不明白的.button()用途.......next()
4

2 回答 2

1

为什么不简单地向您的自定义按钮添加多个类？像：

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

然后用 jquery 设置一个 mouseover/mouseout 函数来添加/删除 ui-state-hover 类

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

甚至

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

和

<script type="text/javascript">
$(document).ready(function(){
  $(".custom-button-ui").addClass('ui-state-default');
  $(".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>
于 2012-04-24T14:18:21.787 回答
0

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

<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>
于 2012-04-24T15:10:22.597 回答