如何覆盖按钮的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"); 
}