javascript - 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=".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=".8/themes/ui-darkness/jquery-ui.css" type="text/css" rel="stylesheet" >

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

</head>
<body>
<a href="/">jQuery</a>
<button class="ui-button" id='button 1'>hello world</button>

<script src=".8/jquery.min.js"></script>
<script>
    $(document).ready(function(){
    });
</script>
</body>
</html>

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./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./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./">jQuery</a>
<button class="ui-button" id='button 1'>hello world</button>

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

Share Improve this question edited Jun 17, 2014 at 0:03 017Bluefield 1612 silver badges13 bronze badges asked Dec 5, 2012 at 20:46 mikebz 3,33510 gold badges39 silver badges51 bronze badges

2 Looks like you forgot to include jQuery UI itself. – j08691 Commented Dec 5, 2012 at 20:49

Add a ment |

1 Answer 1

Sorted by: Reset to default 6

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - how to apply a jQuery UI theme? - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)