如何在一个页面上拥有多个jQuery按钮样式？

Question

我正在使用以下外部CSS文件：

<link href="/jquery_custom/green/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
<link href="/jquery_custom/css/blue/jquery-ui-1.8.7.custom.css" rel="stylesheet" type="text/css" /></script>

和JavaScript：

<script language = "javascript" type="text/javascript">
    $(document).ready(function () {
        $("button").button();
    }); 
</script>

我注意到jQuery UI网站上有一个高级选项：

如果页面中有多个样式，我需要做什么？包括两个单独的外部ui-custom js文件会导致问题。我注意到Facebook有两个不同颜色的按钮：

如何做到这一点？

Answer 1

你的意思是每个按钮有不同的颜色/款式？你可以用CSS做到这一点，如下：

<强> CSS

a.button {
    color: #6e6e6e;
    font: bold 12px Helvetica, Arial, sans-serif;
    text-decoration: none;
    padding: 7px 12px;
    position: relative;
    display: inline-block;
    background: #f3f3f3;
    background: -webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
    background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
    border: solid 1px #dcdcdc;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    margin-right: 10px;
}


a.red {
    color:#fff;
    background: red;
    background: -webkit-gradient(linear,0% 40%,0% 70%,from(#FF0000),to(#F1F1F1));
    background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#FF0000),to(#F1F1F1));
}

a.green {
    background: #7FFF24;
     background: -webkit-gradient(linear,0% 40%,0% 70%,from(#7FFF24),to(#F1F1F1));
     background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#7FFF24),to(#F1F1F1));
}

<强> HTML

<a href="#" class="button">Gray Button</a>
<a href="#" class="button red">Red Button</a>
<a href="#" class="button green">Green Button</a>

Demo

Answer 2

你发布的javascript没有创建按钮UI，它只是处理点击事件，所以不知道为什么这在这里很重要。无论您是在html中添加<input type="button" />元素还是在javascript中生成它们 - 无论哪种方式都只使用类或ID标识符并修改您自己的CSS中按钮的外观。

jquery ui css主题对于某些复杂的ui控件（如日期选择器）的操作至关重要，但对于一个简单的按钮，我会将jquery css视为您修改的坚实起点。在jquery ui之后包含你的css文件，这样你就可以只修改你需要的样式，而不再修改。

Answer 3

好的，既然你已经澄清了，请查看： Using Multiple jQuery Themes in a single page 您可以告诉每个主题仅适用于页面的特定部分。