CODEWITHSUNDEEP
javascriptjqueryjquery-ui
mikebz
mikebz

Reputation: 3335

how to apply a jQuery UI theme?

This is a total n00b question. I am trying out using JQuery UI and it doesn't seem like the JQuery CSS is making any difference in my HTML file.

Here are the steps that I took: 1) picked out a theme and included a link to it (I tried both remote and local)

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

2) set up a class for a button to use the theme:

<button class="ui-button" id='button 1'>hello world</button>

At this point in time I thought that's all that it would take. I read through some tutorials and they all assume that all the themes work out of the box and concentrate mainly on tweaking them.

What's the bare minimum to get started?

Final HTML document:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery demo</title>

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

    <style>
        a.test { font-weight: bold; }
    </style>

</head>
<body>
<a href="http://jquery.com/">jQuery</a>
<button class="ui-button" id='button 1'>hello world</button>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
    $(document).ready(function(){
    });
</script>
</body>
</html>

Upvotes: 8

Views: 11417

Answers (1)

Blazemonger
Blazemonger

Reputation: 92893

You've loaded the jQuery script, but not the jQuery-UI script. (jQuery-UI requires both a CSS and a JS file, in addition to jQuery itself.)

Change your <script> tags to this:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
    $(document).ready(function(){
});
</script>

Upvotes: 6

Related Questions