フレームワーク外のjQuery UIボタンを使用

Question

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

注意：これは、ソリューションがどのように見えるかの概要です。私はjQueryのUIとほんの少しの経験を持っているので、多分より多くの経験を持った人が、この考え方の問題点を指摘することができ...

私の質問は以下のとおりです。

1. これを行うにはどのように他の方法はありますか？
2. &純粋なCSSが不可能な場合 - 上記のJSを完了するにはどうすればいいですか？ .button()は、私が理解していない.next()を使用しています...

Answer 1

いくつかの実験の後私は最終的に解決策を見つけました：

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

Answer 2

カスタムボタンに複数のクラスを追加するのはなぜ簡単ではないのですか？等気にいら：

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

と

除去/ UI-状態ホバークラスを追加するために、マウスオーバー/マウスアウト機能を設定jQueryを使ってその後

<a href="#" class="custom-button-ui ui-state-default">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>