Problem getting themes to work in jQueryUI using Google-hosted jquery-ui.js
I'm new to jQueryUI and I think I am overlooking something very basic...
Quick description of my problem
I used ThemeRoller to download a jQueryUI theme, which also generates a jQueryUI javascript file. I'd rather use the file hosted at Google (http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js), but when I do this the theme is not picked up. I find it hard to believe that I must use the ThemeRoller-generated script, because if this were the case then the Google-hosted jQueryUI would be completely useless! What am I doing wrong here??
More details
So I downloaded the "Smoothness" theme from Themeroller as follows:
- Go to ThemeRoller site.
- Click "Gallery" button.
- Click "Download" button beneath "Smoothness" theme.
- Extract the .zip file (using folder names) to a local directory (say,
C:\jqueryui_test).
Now, I created a very simple test.html file in that same directory, which has the following content:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" href="ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
$("#datepicker").datepicker({inline: true});
});
</script>
</head>
<body>
<div id="datepicker"></div>
</body>
</html>
When I open test.html in my browser, the date picker component is not styled (no background images or anything). But if I change the Google-hosted jquery-ui.min.js line to the one that ThemeRoller generated (<script type="text/javascript" src="jquery.ui.all.js"></script>), the page is styled as expected.
Update The answer I accepted wasn't really the final solution, but it lead me down the right path. Turns out if you just download JQueryUI, you get lots of stuff. The Google-hosted file can just replace the "jquery.ui.all.js" file, but you still need the "themes" directory. Plus, the Themeroller themes don't work very well with 1.5.3 (even the "1.5.3 users" link). Since this was only for an admin page, I just used the "flora" theme that was built in. Looks like jQuery UI 1.6 is much better but it's not in "stable" release yet (as of this writing...).
Answer
Replicated your setup here.. Themeroller supplied you with jQuery UI 1.6rc5, whereas the Google version you're refering seems to be a different version (1.5.3?).. Could this be the source of your problem?