To avoid conflicts for future Magento theme and extension developers, I created the jQuery Update extension. Similar to Drupal’s jQuery Update module, this extension will standardize the use of jQuery and jQuery UI within Magento.
Enabling the jQuery Update Magento Extension
Once the extension is enabled, jQuery will be loaded in both the front-end and back-end by default. However, jQuery UI is not loaded by default, it must be enabled in the Configuration section.
Selecting jQuery UI Themes
Note in the image above, that you are able to select a jQuery UI theme. This theme will be used in both the front-end and back-end (if jQuery UI is enabled for the back-end). jQuery Update packages the standard jQuery UI themes. Only the CSS files for the selected theme will be loaded in the browser.
You are also able to create custom themes. All themes are located under /js/jquery_update/themes/[theme name]. The jQuery UI theme drop-down is dynamically generated – the code iterates over the child [theme-name] folders in the themes directory to create the value and label for the drop-down. So to add a custom jQuery UI theme, when packaging your Magento extension or theme, create a child folder (theme-name) and then add the images folder and jquery-ui.min.css file to the custom folder.
js/jquery_update/themes/[your theme name]/images folder
js/jquery_update/themes/[your theme name]/jquery-ui.min.css
Note: When packaging your extensioin theme, add jQuery Update as a dependent package.
That’s it. Many Magento developers use jQuery. Hopefully, this extension will standardize it’s use. jQuery Update can be downloaded from Magento Connect.