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样式显示按钮。如何为该按钮提供自己的样式。什么是最好的方式？

萤火虫说

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

Answer 1

你也可以通过css覆盖样式：

css文件：

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

Answer 2

您可以使用jQuery UI应用不同的主题：http://jqueryui.com/themeroller/。

Answer 3

正如Edgar已经指出的那样，您可以使用ThemeRoller 滚动您自己的主题。

如果您希望使用其中一个预先存在的主题，可以从Google Libraries API轻松添加主题：

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

将 {version} 和 {theme} 替换为您要使用的

。

使用最新版本（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 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");
}

如何覆盖按钮JQuery的默认样式

5 个答案: