| 1 | /* jQuery plugin themeswitcher
|
|---|
| 2 | ---------------------------------------------------------------------*/
|
|---|
| 3 | $.fn.themeswitcher = function(settings){
|
|---|
| 4 | var options = jQuery.extend({
|
|---|
| 5 | loadTheme: null,
|
|---|
| 6 | initialText: 'Switch Theme',
|
|---|
| 7 | width: 150,
|
|---|
| 8 | height: 200,
|
|---|
| 9 | buttonPreText: 'Theme: ',
|
|---|
| 10 | closeOnSelect: true,
|
|---|
| 11 | buttonHeight: 14,
|
|---|
| 12 | cookieName: 'jquery-ui-theme',
|
|---|
| 13 | onOpen: function(){},
|
|---|
| 14 | onClose: function(){},
|
|---|
| 15 | onSelect: function(){}
|
|---|
| 16 | }, settings);
|
|---|
| 17 |
|
|---|
| 18 | //markup
|
|---|
| 19 | var button = $('<a href="#" class="jquery-ui-themeswitcher-trigger"><span class="jquery-ui-themeswitcher-icon"></span><span class="jquery-ui-themeswitcher-title">'+ options.initialText +'</span></a>');
|
|---|
| 20 | var switcherpane = $('<div class="jquery-ui-themeswitcher"><div id="themeGallery"> <ul> <li><a href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css"> <img src="http://static.jquery.com/ui/themeroller/images/themeGallery/theme_30_ui_light.png" alt="UI Lightness" title="UI Lightness" /> <span class="themeName">UI lightness</span> </a></li> <li><a href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-darkness/jquery-ui.css"> <img src="http://static.jquery.com/ui/themeroller/images/themeGallery/theme_30_ui_dark.png" alt="UI Darkness" title="UI Darkness" /> <span class="themeName">UI darkness</span> </a></li> <li><a href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/smoothness/jquery-ui.css"> <img src="http://static.jquery.com/ui/themeroller/images/themeGallery/theme_30_smoothness.png" alt="Smoothness" title="Smoothness" /> <span class="themeName">Smoothness</span> </a></li> <li><a href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/start/jquery-ui.css"> <img src="http://static.jquery.com/ui/themeroller/images/themeGallery/theme_30_start_menu.png" alt="Start" title="Start" /> <span class="themeName">Start</span> </a></li> <li><a href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/jquery-ui.css"> <img src="http://static.jquery.com/ui/themeroller/images/themeGallery/theme_30_windoze.png" alt="Redmond" title="Redmond" /> <span class="themeName">Redmond</span> </a></li> <li><a href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/sunny/jquery-ui.css"> <img src="http://static.jquery.com/ui/themeroller/images/themeGallery/theme_30_sunny.png" alt="Sunny" title="Sunny" /> <span class="themeName">Sunny</span> </a></li> <li><a href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/overcast/jquery-ui.css"> <img src="http://static.jquery.com/ui/themeroller/images/themeGallery/theme_30_overcast.png" alt="Overcast" title="Overcast" /> <span class="themeName">Overcast</span> </a></li> <li><a href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/le-frog/jquery-ui.css"> <img src="http://static.jquery.com/ui/themeroller/images/themeGallery/theme_30_le_frog.png" alt="Le Frog" title="Le Frog" /> <span class="themeName">Le Frog</span> </a></li> <li><a href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/flick/jquery-ui.css"> <img src="http://static.jquery.com/ui/themeroller/images/themeGallery/theme_30_flick.png" alt="Flick" title="Flick" /> <span class="themeName">Flick</span> </a></li> <li><a href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/pepper-grinder/jquery-ui.css"> <img src="http://static.jquery.com/ui/themeroller/images/themeGallery/theme_30_pepper_grinder.png" alt="Pepper Grinder" title="Pepper Grinder" /> <span class="themeName">Pepper Grinder</span> </a></li> <li><a href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/eggplant/jquery-ui.css"> <img src="http://static.jquery.com/ui/themeroller/images/themeGallery/theme_30_eggplant.png" alt="Eggplant" title="Eggplant" /> <span class="themeName">Eggplant</span> </a></li> <li><a href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/dark-hive/jquery-ui.css"> <img src="http://static.jquery.com/ui/themeroller/images/themeGallery/theme_30_dark_hive.png" alt="Dark Hive" title="Dark Hive" /> <span class="themeName">Dark Hive</span> </a></li> <li><a href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/cupertino/jquery-ui.css"> <img src="http://static.jquery.com/ui/themeroller/images/themeGallery/theme_30_cupertino.png" alt="Cupertino" title="Cupertino" /> <span class="themeName">Cupertino</span> </a></li> <li><a href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/south-street/jquery-ui.css"> <img src="http://static.jquery.com/ui/themeroller/images/themeGallery/theme_30_south_street.png" alt="South St" title="South St" /> <span class="themeName">South Street</span> </a></li> <li><a href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/blitzer/jquery-ui.css"> <img src="http://static.jquery.com/ui/themeroller/images/themeGallery/theme_30_blitzer.png" alt="Blitzer" title="Blitzer" /> <span class="themeName">Blitzer</span> </a></li> <li><a href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/humanity/jquery-ui.css"> <img src="http://static.jquery.com/ui/themeroller/images/themeGallery/theme_30_humanity.png" alt="Humanity" title="Humanity" /> <span class="themeName">Humanity</span> </a></li> <li><a href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/hot-sneaks/jquery-ui.css"> <img src="http://static.jquery.com/ui/themeroller/images/themeGallery/theme_30_hot_sneaks.png" alt="Hot Sneaks" title="Hot Sneaks" /> <span class="themeName">Hot sneaks</span> </a></li> <li><a href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/excite-bike/jquery-ui.css"> <img src="http://static.jquery.com/ui/themeroller/images/themeGallery/theme_30_excite_bike.png" alt="Excite Bike" title="Excite Bike" /> <span class="themeName">Excite Bike</span> </a></li> <li><a href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/vader/jquery-ui.css"> <img src="http://static.jquery.com/ui/themeroller/images/themeGallery/theme_30_black_matte.png" alt="Vader" title="Vader" /> <span class="themeName">Vader</span> </a></li> <li><a href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/dot-luv/jquery-ui.css"> <img src="http://static.jquery.com/ui/themeroller/images/themeGallery/theme_30_dot_luv.png" alt="Dot Luv" title="Dot Luv" /> <span class="themeName">Dot Luv</span> </a></li> <li><a href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/mint-choc/jquery-ui.css"> <img src="http://static.jquery.com/ui/themeroller/images/themeGallery/theme_30_mint_choco.png" alt="Mint Choc" title="Mint Choc" /> <span class="themeName">Mint Choc</span> </a></li> <li><a href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/black-tie/jquery-ui.css"> <img src="http://static.jquery.com/ui/themeroller/images/themeGallery/theme_30_black_tie.png" alt="Black Tie" title="Black Tie" /> <span class="themeName">Black Tie</span> </a></li> <li><a href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/trontastic/jquery-ui.css"> <img src="http://static.jquery.com/ui/themeroller/images/themeGallery/theme_30_trontastic.png" alt="Trontastic" title="Trontastic" /> <span class="themeName">Trontastic</span> </a></li> <li><a href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/swanky-purse/jquery-ui.css"> <img src="http://static.jquery.com/ui/themeroller/images/themeGallery/theme_30_swanky_purse.png" alt="Swanky Purse" title="Swanky Purse" /> <span class="themeName">Swanky Purse</span> </a></li> </ul></div></div>').find('div').removeAttr('id');
|
|---|
| 21 |
|
|---|
| 22 | //button events
|
|---|
| 23 | button.click(
|
|---|
| 24 | function(){
|
|---|
| 25 | if(switcherpane.is(':visible')){ switcherpane.spHide(); }
|
|---|
| 26 | else{ switcherpane.spShow(); }
|
|---|
| 27 | return false;
|
|---|
| 28 | }
|
|---|
| 29 | );
|
|---|
| 30 |
|
|---|
| 31 | //menu events (mouseout didn't work...)
|
|---|
| 32 | switcherpane.hover(
|
|---|
| 33 | function(){},
|
|---|
| 34 | function(){if(switcherpane.is(':visible')){$(this).spHide();}}
|
|---|
| 35 | );
|
|---|
| 36 |
|
|---|
| 37 | //show/hide panel functions
|
|---|
| 38 | $.fn.spShow = function(){ $(this).css({top: button.offset().top + options.buttonHeight + 6, left: button.offset().left}).slideDown(50); button.css(button_active); options.onOpen(); }
|
|---|
| 39 | $.fn.spHide = function(){ $(this).slideUp(50, function(){options.onClose();}); button.css(button_default); }
|
|---|
| 40 |
|
|---|
| 41 |
|
|---|
| 42 | /* Theme Loading
|
|---|
| 43 | ---------------------------------------------------------------------*/
|
|---|
| 44 | switcherpane.find('a').click(function(){
|
|---|
| 45 | updateCSS( $(this).attr('href') );
|
|---|
| 46 | var themeName = $(this).find('span').text();
|
|---|
| 47 | button.find('.jquery-ui-themeswitcher-title').text( options.buttonPreText + themeName );
|
|---|
| 48 | $.cookie(options.cookieName, themeName);
|
|---|
| 49 | options.onSelect();
|
|---|
| 50 | if(options.closeOnSelect && switcherpane.is(':visible')){ switcherpane.spHide(); }
|
|---|
| 51 | return false;
|
|---|
| 52 | });
|
|---|
| 53 |
|
|---|
| 54 | //function to append a new theme stylesheet with the new style changes
|
|---|
| 55 | function updateCSS(locStr){
|
|---|
| 56 | var cssLink = $('<link href="'+locStr+'" type="text/css" rel="Stylesheet" class="ui-theme" />');
|
|---|
| 57 | $("head").append(cssLink);
|
|---|
| 58 |
|
|---|
| 59 |
|
|---|
| 60 | if( $("link.ui-theme").size() > 3){
|
|---|
| 61 | $("link.ui-theme:first").remove();
|
|---|
| 62 | }
|
|---|
| 63 | }
|
|---|
| 64 |
|
|---|
| 65 | /* Inline CSS
|
|---|
| 66 | ---------------------------------------------------------------------*/
|
|---|
| 67 | var button_default = {
|
|---|
| 68 | fontFamily: 'Trebuchet MS, Verdana, sans-serif',
|
|---|
| 69 | fontSize: '11px',
|
|---|
| 70 | color: '#666',
|
|---|
| 71 | background: '#eee url(http://jqueryui.com/themeroller/themeswitchertool/images/buttonbg.png) 50% 50% repeat-x',
|
|---|
| 72 | border: '1px solid #ccc',
|
|---|
| 73 | '-moz-border-radius': '6px',
|
|---|
| 74 | '-webkit-border-radius': '6px',
|
|---|
| 75 | textDecoration: 'none',
|
|---|
| 76 | padding: '3px 3px 3px 8px',
|
|---|
| 77 | width: options.width - 11,//minus must match left and right padding
|
|---|
| 78 | display: 'block',
|
|---|
| 79 | height: options.buttonHeight,
|
|---|
| 80 | outline: '0'
|
|---|
| 81 | };
|
|---|
| 82 | var button_hover = {
|
|---|
| 83 | 'borderColor':'#bbb',
|
|---|
| 84 | 'background': '#f0f0f0',
|
|---|
| 85 | cursor: 'pointer',
|
|---|
| 86 | color: '#444'
|
|---|
| 87 | };
|
|---|
| 88 | var button_active = {
|
|---|
| 89 | color: '#aaa',
|
|---|
| 90 | background: '#000',
|
|---|
| 91 | border: '1px solid #ccc',
|
|---|
| 92 | borderBottom: 0,
|
|---|
| 93 | '-moz-border-radius-bottomleft': 0,
|
|---|
| 94 | '-webkit-border-bottom-left-radius': 0,
|
|---|
| 95 | '-moz-border-radius-bottomright': 0,
|
|---|
| 96 | '-webkit-border-bottom-right-radius': 0,
|
|---|
| 97 | outline: '0'
|
|---|
| 98 | };
|
|---|
| 99 |
|
|---|
| 100 |
|
|---|
| 101 |
|
|---|
| 102 | //button css
|
|---|
| 103 | button.css(button_default)
|
|---|
| 104 | .hover(
|
|---|
| 105 | function(){
|
|---|
| 106 | $(this).css(button_hover);
|
|---|
| 107 | },
|
|---|
| 108 | function(){
|
|---|
| 109 | if( !switcherpane.is(':animated') && switcherpane.is(':hidden') ){ $(this).css(button_default); }
|
|---|
| 110 | }
|
|---|
| 111 | )
|
|---|
| 112 | .find('.jquery-ui-themeswitcher-icon').css({
|
|---|
| 113 | float: 'right',
|
|---|
| 114 | width: '16px',
|
|---|
| 115 | height: '16px',
|
|---|
| 116 | background: 'url(http://jqueryui.com/themeroller/themeswitchertool/images/icon_color_arrow.gif) 50% 50% no-repeat'
|
|---|
| 117 | });
|
|---|
| 118 | //pane css
|
|---|
| 119 | switcherpane.css({
|
|---|
| 120 | position: 'absolute',
|
|---|
| 121 | float: 'left',
|
|---|
| 122 | fontFamily: 'Trebuchet MS, Verdana, sans-serif',
|
|---|
| 123 | fontSize: '12px',
|
|---|
| 124 | background: '#000',
|
|---|
| 125 | color: '#fff',
|
|---|
| 126 | padding: '8px 3px 3px',
|
|---|
| 127 | border: '1px solid #ccc',
|
|---|
| 128 | '-moz-border-radius-bottomleft': '6px',
|
|---|
| 129 | '-webkit-border-bottom-left-radius': '6px',
|
|---|
| 130 | '-moz-border-radius-bottomright': '6px',
|
|---|
| 131 | '-webkit-border-bottom-right-radius': '6px',
|
|---|
| 132 | borderTop: 0,
|
|---|
| 133 | zIndex: 999999,
|
|---|
| 134 | width: options.width-6//minus must match left and right padding
|
|---|
| 135 | })
|
|---|
| 136 | .find('ul').css({
|
|---|
| 137 | listStyle: 'none',
|
|---|
| 138 | margin: '0',
|
|---|
| 139 | padding: '0',
|
|---|
| 140 | overflow: 'auto',
|
|---|
| 141 | overflowX: 'hidden', // NEW
|
|---|
| 142 | height: options.height
|
|---|
| 143 | }).end()
|
|---|
| 144 | .find('li').hover(
|
|---|
| 145 | function(){
|
|---|
| 146 | $(this).css({
|
|---|
| 147 | 'borderColor':'#555',
|
|---|
| 148 | 'background': 'url(http://jqueryui.com/themeroller/themeswitchertool/images/menuhoverbg.png) 50% 50% repeat-x',
|
|---|
| 149 | cursor: 'pointer'
|
|---|
| 150 | });
|
|---|
| 151 | },
|
|---|
| 152 | function(){
|
|---|
| 153 | $(this).css({
|
|---|
| 154 | 'borderColor':'#111',
|
|---|
| 155 | 'background': '#000',
|
|---|
| 156 | cursor: 'auto'
|
|---|
| 157 | });
|
|---|
| 158 | }
|
|---|
| 159 | ).css({
|
|---|
| 160 | width: options.width-30,
|
|---|
| 161 | height: '',
|
|---|
| 162 | padding: '2px',
|
|---|
| 163 | margin: '1px',
|
|---|
| 164 | border: '1px solid #111',
|
|---|
| 165 | '-moz-border-radius': '4px',
|
|---|
| 166 | clear: 'left',
|
|---|
| 167 | float: 'left'
|
|---|
| 168 | }).end()
|
|---|
| 169 | .find('a').css({
|
|---|
| 170 | color: '#aaa',
|
|---|
| 171 | textDecoration: 'none',
|
|---|
| 172 | float: 'left',
|
|---|
| 173 | width: '100%',
|
|---|
| 174 | outline: '0'
|
|---|
| 175 | }).end()
|
|---|
| 176 | .find('img').css({
|
|---|
| 177 | float: 'left',
|
|---|
| 178 | border: '1px solid #333',
|
|---|
| 179 | margin: '0 2px'
|
|---|
| 180 | }).end()
|
|---|
| 181 | .find('.themeName').css({
|
|---|
| 182 | float: 'left',
|
|---|
| 183 | margin: '3px 0'
|
|---|
| 184 | }).end();
|
|---|
| 185 |
|
|---|
| 186 |
|
|---|
| 187 |
|
|---|
| 188 | $(this).append(button);
|
|---|
| 189 | $('body').append(switcherpane);
|
|---|
| 190 | switcherpane.hide();
|
|---|
| 191 | if( $.cookie(options.cookieName) || options.loadTheme ){
|
|---|
| 192 | var themeName = $.cookie(options.cookieName) || options.loadTheme;
|
|---|
| 193 | switcherpane.find('a:contains('+ themeName +')').trigger('click');
|
|---|
| 194 | }
|
|---|
| 195 |
|
|---|
| 196 | return this;
|
|---|
| 197 | };
|
|---|
| 198 |
|
|---|
| 199 |
|
|---|
| 200 |
|
|---|
| 201 |
|
|---|
| 202 | /**
|
|---|
| 203 | * Cookie plugin
|
|---|
| 204 | *
|
|---|
| 205 | * Copyright (c) 2006 Klaus Hartl (stilbuero.de)
|
|---|
| 206 | * Dual licensed under the MIT and GPL licenses:
|
|---|
| 207 | * http://www.opensource.org/licenses/mit-license.php
|
|---|
| 208 | * http://www.gnu.org/licenses/gpl.html
|
|---|
| 209 | *
|
|---|
| 210 | */
|
|---|
| 211 | jQuery.cookie = function(name, value, options) {
|
|---|
| 212 | if (typeof value != 'undefined') { // name and value given, set cookie
|
|---|
| 213 | options = options || {};
|
|---|
| 214 | if (value === null) {
|
|---|
| 215 | value = '';
|
|---|
| 216 | options.expires = -1;
|
|---|
| 217 | }
|
|---|
| 218 | var expires = '';
|
|---|
| 219 | if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
|
|---|
| 220 | var date;
|
|---|
| 221 | if (typeof options.expires == 'number') {
|
|---|
| 222 | date = new Date();
|
|---|
| 223 | date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
|
|---|
| 224 | } else {
|
|---|
| 225 | date = options.expires;
|
|---|
| 226 | }
|
|---|
| 227 | expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
|
|---|
| 228 | }
|
|---|
| 229 | // CAUTION: Needed to parenthesize options.path and options.domain
|
|---|
| 230 | // in the following expressions, otherwise they evaluate to undefined
|
|---|
| 231 | // in the packed version for some reason...
|
|---|
| 232 | var path = options.path ? '; path=' + (options.path) : '';
|
|---|
| 233 | var domain = options.domain ? '; domain=' + (options.domain) : '';
|
|---|
| 234 | var secure = options.secure ? '; secure' : '';
|
|---|
| 235 | document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
|
|---|
| 236 | } else { // only name given, get cookie
|
|---|
| 237 | var cookieValue = null;
|
|---|
| 238 | if (document.cookie && document.cookie != '') {
|
|---|
| 239 | var cookies = document.cookie.split(';');
|
|---|
| 240 | for (var i = 0; i < cookies.length; i++) {
|
|---|
| 241 | var cookie = jQuery.trim(cookies[i]);
|
|---|
| 242 | // Does this cookie string begin with the name we want?
|
|---|
| 243 | if (cookie.substring(0, name.length + 1) == (name + '=')) {
|
|---|
| 244 | cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
|
|---|
| 245 | break;
|
|---|
| 246 | }
|
|---|
| 247 | }
|
|---|
| 248 | }
|
|---|
| 249 | return cookieValue;
|
|---|
| 250 | }
|
|---|
| 251 | };
|
|---|
