Accordion

First

Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.

Second

Phasellus mattis tincidunt nibh.

Third

Nam dui erat, auctor a, dignissim quis.

Tabs

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.
Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.

Slider

Progressbar

Datepicker

jQuery UI ThemeSwitcher Widget

This is a demo page for the jQuery UI ThemeSwitcher Widget. Try it out!

NOTE: The code elements are editable, so if you want to give it a try, you can edit the code and click "Make it so!" to evaluate the javascript.

Examples:

This is the default themeswitcher. Make it so! $('#theme-switcher').themeswitcher({ imageLocation:"css/images/" });
This is the default themeswitcher, but using the current theme. Make it so! $('#theme-switcher').themeswitcher({ imageLocation:"css/images/", isThemable:true });
This is the default themeswitcher with a custom theme defined. Make it so! $('#theme-switcher').themeswitcher({ themes:{ 'My Theme':{ icon:'css/mytheme/mytheme.png', css:'css/mytheme/jquery-ui-1.8.9.custom.css' } }, imageLocation:"css/images/" });
This is the default themeswitcher with only a custom theme defined. Make it so! $('#theme-switcher').themeswitcher({ themes:{ 'My Theme':{ icon:'css/mytheme/mytheme.png', css:'css/mytheme/jquery-ui-1.8.9.custom.css' } }, imageLocation:"css/images/", useStandard:false });
Custom theme, ignoring several Gallery Themes Make it so! $('#theme-switcher').themeswitcher({ themes:{ 'My Theme':{ icon:'css/mytheme/mytheme.png', css:'css/mytheme/jquery-ui-1.8.9.custom.css' } }, imageLocation:"css/images/", disableThemes:['ui-lightness','base','le-frog'] });
Custom theme, only using several Gallery Themes Make it so! $('#theme-switcher').themeswitcher({ themes:{ 'My Theme':{ icon:'css/mytheme/mytheme.png', css:'css/mytheme/jquery-ui-1.8.9.custom.css' } }, imageLocation:"css/images/", enableThemes:['ui-lightness','base','le-frog'] });
This is the default themeswitcher with callbacks for the events. Make it so! $('#theme-switcher').themeswitcher({ imageLocation:"css/images/", onSelect:function(obj){$('#eventLog').append('<br/>onSelect() fired: '+obj.themeName)}, onOpen:function(obj){$('#eventLog').append('<br/>onOpen() fired: '+obj.themeName)}, onClose:function(obj){$('#eventLog').append('<br/>onClose() fired: '+obj.themeName)} }); eventLog: