0

.button()関数（ロールオーバー効果を含む）を使用せずに、jQueryボタン要素を「スタンドアロン」として使用したいと思います。それぞれに個別に割り当てるのは.button()非常に複雑です...

私が探しているのは、jQuery UIの直接CSSクラスを使用して、次のような「結合された」クラスを作成するソリューションです（注意：「インポート」は説明にのみ使用され、無効であることはわかっています）

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

注意：これは、ソリューションがどのように見えるかの概要にすぎません。私はjQueryUIの経験が少ししかないので、もっと経験のある人がこのアイデアの問題を指摘するかもしれません...

私の質問は次のとおりです。

  1. これを行う他の方法はありますか？
  2. そうでない場合、および純粋なCSSが不可能な場合-上記のJSを完了する方法（可能な場合）？.button()よくわからない使い方を知って.next()います...
4

2 に答える 2

1

カスタムボタンに複数のクラスを簡単に追加してみませんか？次のようなもの：

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

次に、jqueryを使用して、マウスオーバー/マウスアウト関数を設定し、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 に答える