javascript 如何覆盖按钮 JQuery 的默认样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6201305/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to override default style for button JQuery
提问by Captain Comic
Hi I am building a button on my page like that
嗨，我正在我的页面上构建一个这样的按钮
<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>
The button is diplayed using standard JQuery style. How can I provide my own style for that button. What is the best way?
该按钮使用标准 JQuery 样式显示。我如何为该按钮提供我自己的样式。什么是最好的方法？
The firebug says
萤火虫说
class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"
回答by AlexC
you also can overwrite styles through css :
您还可以通过 css 覆盖样式：
css file :
css文件：
#insert-image-button.ui-button {
background:red ;
border-radius: 0px;
}
回答by Edgar
You can apply different themes with jQuery UI: http://jqueryui.com/themeroller/.
您可以使用 jQuery UI 应用不同的主题：http: //jqueryui.com/themeroller/。
回答by mekwall
As Edgar already pointed out you can rollyour own theme with the ThemeRoller.
正如埃德加已经指出的那样，您可以使用ThemeRoller滚动您自己的主题。
If you prefer to use one of the preexisting themes you can easily include it from the Google Libraries API:
如果您更喜欢使用预先存在的主题之一，您可以轻松地从Google Libraries API 中包含它：
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/{version}/themes/{theme}/jquery-ui.css" type="text/css" />
Replace {version}and {theme}with the ones you want to use.
将{version}和{theme}替换为您要使用的。
Example using latest version (1.8.13) and the Smoothness theme:
使用最新版本 (1.8.13) 和 Smoothness 主题的示例：
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/smoothness/jquery-ui.css" type="text/css" />
For more info on jQuery UI themes and theming, take a look at the documentation.
有关 jQuery UI 主题和主题的更多信息，请查看文档。
回答by lexica98
If you have very few instances of your custom styled content, you can always use inline styles like:
如果您的自定义样式内容实例很少，您始终可以使用内联样式，例如：
<div id = 'insert-image-button' style = 'background: red; border-radius: 0px;'>
</div>
Or simply set the css attributes in jQuery:
或者简单地在 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'});
And you can type this anywhere in your code.
你可以在代码的任何地方输入它。
Note that this doesn't override all UI styles (inline styles succeed more often), and it may not be altogether practical for finished projects. But it can still be a convenient way to test out different styles for your code.
请注意，这不会覆盖所有 UI 样式（内联样式更频繁地成功），并且对于已完成的项目可能并不完全实用。但它仍然是一种测试代码不同风格的便捷方式。
回答by Ziggler
In my case I did like this
就我而言，我确实喜欢这样
In my css file.
在我的 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;
}
In my javascript file
在我的 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");
}
