I'm new to jQueryUI and I think I am overlooking something very basic...
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??
So I downloaded the "Smoothness" theme from Themeroller as follows:
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...).
jQuery maintainers are continuing to modernize its overall project that still is one of the most widely deployed JavaScript libraries today. The team announced that the cross-platform jQuery Mobile project under its umbrella will be fully deprecated as of October 7, 2021.
jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.
jQuery is a JavaScript library primarily designed with the purpose to make it easier to use JavaScript on our website. jQuery wraps many lines of JavaScript code into methods that we can call with a single line of code. Google provides CDN support for jQuery via the googleapis.com domain.
No, Google certainly does not use jQuery—it is all vanilla JavaScript and (sometimes) Closure Library. As for inlining, if JS/CSS is relatively small, it is faster to inline it to minimize the number of HTTP requests. Google Page Speed Online can give you some tips on how to optimize your page.
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?
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