That's a most excellent question, Mark. This could be made a lot more clear.
Gotcha #1: You don't mention if you are working with jQueryUI 1.6 or 1.7. This matters, and these differences were, for me, most confusing of all. I am assuming you are using 1.7 and that you've downloaded a custom bundle, and you're using the same folder structure as the bundle, and that's mapped directly to your web root folder. Step 1: Declare your CSS in the <head> <link type="text/css" href="css/THEMENAME/jquery-ui-1.7.1.custom.css" rel="stylesheet"> Step 2: Place a div for the theme switcher in your page. The theme switcher is pretty well documented here: http://jqueryui.com/docs/Theming/ThemeSwitcher <!-- This is where your Theme Switcher will end-up --> <div id="switcher" style="margin-top:2em;"></div> Step 3: Declare your Javascript. For performance reasons, I put mine just before the close-body </body> tag. Also for performance reasons, I fetch jQuery and jQueryUI from Google's Content Delivery Network (CDN), and the switcher from the jQueryUI site (to always get the latest). Following that, call your widgets and your switcher. In this example, I'm calling Tabs, then the switcher. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/ jquery.min.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/jquery- ui.min.js" type="text/javascript"></script> <script src="http://jqueryui.com/themeroller/themeswitchertool/"; type="text/javascript"></script> <script type="text/javascript"> $(function() { $("#tabs").tabs(); $('#switcher').themeswitcher({'width':'145'}); }); </script> Walla! Now if you perfer to work with local js, and with your local custom bundle, then the above reduces to: <script src="/js/jquery.min.js" type="text/javascript"></script> <script src="/js/jquery-ui-1.7.2.custom.min.js" type="text/ javascript"></script> <!-- Capture the response from the call to http://jqueryui.com/themeroller/themeswitchertool/ and store it in /js/jquery.ui-themeswitcher.js --> <script src="/js/jquery.ui-themeswitcher.js" type="text/javascript"></ script> <script type="text/javascript"> $(function() { $("#tabs").tabs(); $('#switcher').themeswitcher({'width':'145'}); }); </script> In other words, keep the folder structure provided by the jQueryUI download if you can. **--** Steve On Sep 11, 12:02 am, Mark Jackson <[email protected]> wrote: > Hi Group, > > I'm finding the jquery UI plugin to be a pretty complex piece of work, > especially when you add in the additional feature of swappable > themes. What's more, I am having trouble finding many really basic - > yet thorough - tutorials or documentation on using UI and swappable > themes. An example would be the zip folder that you get when you > download a theme. It has several folders internally: css, development- > bundle and js. Inside the development-bundle folder there is: ui, > themes and external. Now, when I try building a web application using > these files, just exactly which ones are absolutely necessary to load > on my server in order to be able to use the whole functionality of > jquery.ui? Which ones are necessary for just swapping out different > themes? How are other folks going about setting up multi-theme-able > websites using jquery? > > Thanks, > Mark --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "jQuery UI" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en -~----------~----~----~----~------~----~------~--~---
