ansaurus

Question

Answer 1

A:

Skoders right.

You have to use the element id, class or tagname in the JQuery notation.

For a class: .class
For an id: #id
For the tagname: table

You'd best choose the class way, since it isn't just more classy than the others but much more usable (it can be used on multiple objects) and you don't mess up any layout elements like divs or tables. After all, the css scope justs adds the provided value to each css definition. i.e.

.ui-icon { ... }

becomes

.scope .ui-icon { ... }

Edit: Make sure you included the right stylesheet, I got the whole thing working with the following code

<html>
    <head>
        <title>JQuery UI Theme Scope</title>
        <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.1.custom.min.js"></script>
        <link type="text/css" href="css/red/jquery-ui-1.8.1.custom.css" rel="stylesheet" />
        <link type="text/css" href="css/default/jquery-ui-1.8.1.default.css" rel="stylesheet" />
    </head>
    <body>
        <input type="submit" class="ui-state-default ui-corner-all" value="Submit" />
        <div class="red">
            <input type="submit" class="ui-state-default ui-corner-all" value="Submit" />
        </div>
    </body>
</html>

Don't link to the stylesheet in the "developement-bundle" directory, use the one in the "css" directory instead.

Dänu 2010-06-01 20:28:08

I am using class. The problem is I can't get the red scope to load in and override the base theme by setting the class name.

lloydphillips 2010-06-01 21:19:07

Take a look at my edit.

Dänu 2010-06-02 17:06:58

Answer 2

+1 A:

@lloydphillips:

The following URL contains sample code that demonstrates how to include scoped themes.

http://digg.com/software/jaldropdown_jqueryui_theming_and_scoping_sample

Hope that works for you.

Assign Labs 2010-06-02 17:12:45

ansaurus

tags:

views:

answers:

jQuery multiple themes on one page

related questions