在框架外部使用jQuery UI按鈕

Question

我想使用jQuery按鈕元素作爲「獨立」 - 沒有使用.button()函數（包括翻轉效果）。將.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

爲什麼不能簡單的添加多個類到您的自定義按鈕？財產以後像：

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

與jquery設置鼠標懸停/鼠標移開功能增加/刪除的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> 

甚至

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