How can I have multiple jQuery button styles on one page?

Question

I'm using the following external CSS files:

<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>

And JavaScript:

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

I have noticed on the jQuery UI site there is an Advanced option:

What do I need to do to have more than one style one the page? Including the two separate external ui-custom js files cause problems. And I notice Facebook has two different colored buttons:

How can this be done?

Answer 1

You mean have different colors/styles for each button? You can do that with just CSS, like so:

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

The javascript you posted doesn't create the button UI, it just handles the click event, so not sure why that is important here. Whether you've added the <input type="button" /> elements in html or generated them in javascript - either way just use class or id identifiers and modify the look of the buttons in your own css.

The jquery ui css theme is vital to the operation of some complex ui controls, such as the date picker, but for a simple button, I would view the jquery css as a solid starting point for your modifications. Include your css file after the jquery ui one, so you can modify just the styles you need, and no more.

Answer 3

好的，既然您已经弄清楚了，请签出： 在单个页面中使用多个jQuery主题您可以告诉每个主题仅适用于页面的特定部分。