Geek Answers Handbook

How to apply jQuery user interface theme?

This is a common question n00b. I am trying to use jQuery UI and it looks like jQuery CSS does not make any difference in my HTML file.

Here are the steps I took: 1) I selected a topic 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) configure the class for the button to use the theme:

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

At that moment, I thought all that was required. I read some tutorials, and they all assume that all topics work out of the box and are mainly focused on setting them up.

What is the minimum minimum to start?

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>
+7
source share
1 answer

Loaded jQuery script, but not jQuery-UI script. (jQuery-UI requires both CSS and a JS file in addition to jQuery itself.)

Change the <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>
+5
source

More articles:


All Articles