如何覆蓋按鈕的JQuery

Question

嗨我建設我的網頁上的按鈕一樣，

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
<script> 
     $("#insert-image-button") 
      .button() 
      .click(function() { 
       $("#AttachImage").dialog("open"); 
      }); 
</script> 


<button id="insert-image-button">Create new user</button> 

按鈕使用標準的jQuery風格diplayed默認樣式。我該如何爲該按鈕提供我自己的風格。什麼是最好的方法？

螢火蟲說

class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" 

Answer 1

您可以將不同的主題與jQuery用戶界面：http://jqueryui.com/themeroller/。

Answer 2

由於埃德加已經指出你可以滾你自己的主題與ThemeRoller。

如果你喜歡使用預先存在的一個主題，你可以很容易地從Google Libraries API它包含：

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/{version}/themes/{theme}/jquery-ui.css" type="text/css" /> 

更換{版本}和{主題}您要使用的。使用最新版本（1.8.13）和平滑主題

例子：

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/smoothness/jquery-ui.css" type="text/css" /> 

有關jQuery UI的主題和主題化的詳細信息，看看the documentation。

Answer 3

你也可以通過CSS覆蓋樣式：

css文件：

#insert-image-button.ui-button { 
    background:red ; 
    border-radius: 0px; 
} 

Answer 4

如果您有您的自定義樣式的內容非常少的情況下，你總是可以使用內嵌樣式，如：

<div id = 'insert-image-button' style = 'background: red; border-radius: 0px;'> 
</div> 

或者只需在jQuery中設置CSS屬性：

$('#insert-image-button').css('background','red').css('border-radius','0px'); 

// or use the alternative notation 

$('#insert-image-button').css({ 'background': 'red','border-radius': '0px'}); 

// you can use classes too 

$('.insert-image-buttons').css({ 'background': 'red','border-radius': '0px'}); 

而且你可以在代碼中的任何位置輸入。

請注意，這不會覆蓋所有UI樣式（內聯樣式更經常地成功），並且它對於已完成的項目可能並不完全實用。但它仍然是測試代碼中不同樣式的便捷方式。

Answer 5

在我的情況下，我是這樣做的

在我的css文件中。

.myDialog .ui-dialog-buttonpane .ui-dialog-buttonset .ButtonStyle { 
    cursor: pointer; 
    text-align: center; 
    vertical-align: middle; 
    padding-left: 10px; 
    padding-right: 10px; 
    margin-left: 1px; 
    font: 10pt 'Myriad Pro Regular', sans-serif!important; 
    font-weight: 800; 
    color: #ffffff; 
    background-color: #003668; 
    border-left: 1px solid buttonhighlight; 
    border-top: 1px solid buttonhighlight; 
    border-right: 1px solid buttonshadow; 
    border-bottom: 1px solid buttonshadow; 
} 

在我的JavaScript文件

function ShowDialog() { 

    var options = { 
     width: 600, 
     height: 220, 
     modal: true, 
     autoOpen: false, 
     resizable: false, 
     closeOnEscape: false, 
     my: "center", 
     at: "center", 
     of: window, 
     dialogClass: "myDialog", 
     buttons:[{ 
      text: "Close", 
      "class": "ButtonStyle", 
      click: 
      function(){ 
       // I declared theDialog globally 
       if (theDialog != null) { 
        theDialog.dialog("close"); 
       } 
      } 
     }] 
    }; 

    theDialog = $("#divMultipleMatchPopup").dialog(options); 
    var ret = theDialog.dialog("open"); 
}