Menu
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>
929
There are three general approaches to theming jQuery UI plugins: Download a ThemeRoller theme: The easiest way to build a theme is to use ThemeRoller to generate and download a theme.
If you want to design your own theme, jQuery UI has a very slick application for just that purpose. It's called ThemeRoller, and you can always get to it by either clicking the "Themes" link in the jQuery UI navigation, or simply going to jQuery UI ThemeRoller.
jQuery UI features a CSS Framework for building custom jQuery widgets that includes classes used by all of the default ThemeRoller themes. By using the same classes and markup conventions, it allows code integration and theming to be fairly easy.
Basic jQuery UI widget customization can be accomplished fairly easily by using a default themeroller theme and modifying the theme CSS to suit your needs.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
