demo.js (17319B)
1 /** 2 * AdminLTE Demo Menu 3 * ------------------ 4 * You should not use this file in production. 5 * This file is for demo purposes only. 6 */ 7 (function ($, AdminLTE) { 8 9 "use strict"; 10 11 /** 12 * List of all the available skins 13 * 14 * @type Array 15 */ 16 var my_skins = [ 17 "skin-blue", 18 "skin-black", 19 "skin-red", 20 "skin-yellow", 21 "skin-purple", 22 "skin-green", 23 "skin-blue-light", 24 "skin-black-light", 25 "skin-red-light", 26 "skin-yellow-light", 27 "skin-purple-light", 28 "skin-green-light" 29 ]; 30 31 //Create the new tab 32 var tab_pane = $("<div />", { 33 "id": "control-sidebar-theme-demo-options-tab", 34 "class": "tab-pane active" 35 }); 36 37 //Create the tab button 38 var tab_button = $("<li />", {"class": "active"}) 39 .html("<a href='#control-sidebar-theme-demo-options-tab' data-toggle='tab'>" 40 + "<i class='fa fa-wrench'></i>" 41 + "</a>"); 42 43 //Add the tab button to the right sidebar tabs 44 $("[href='#control-sidebar-home-tab']") 45 .parent() 46 .before(tab_button); 47 48 //Create the menu 49 var demo_settings = $("<div />"); 50 51 //Layout options 52 demo_settings.append( 53 "<h4 class='control-sidebar-heading'>" 54 + "Layout Options" 55 + "</h4>" 56 //Fixed layout 57 + "<div class='form-group'>" 58 + "<label class='control-sidebar-subheading'>" 59 + "<input type='checkbox' data-layout='fixed' class='pull-right'/> " 60 + "Fixed layout" 61 + "</label>" 62 + "<p>Activate the fixed layout. You can't use fixed and boxed layouts together</p>" 63 + "</div>" 64 //Boxed layout 65 + "<div class='form-group'>" 66 + "<label class='control-sidebar-subheading'>" 67 + "<input type='checkbox' data-layout='layout-boxed'class='pull-right'/> " 68 + "Boxed Layout" 69 + "</label>" 70 + "<p>Activate the boxed layout</p>" 71 + "</div>" 72 //Sidebar Toggle 73 + "<div class='form-group'>" 74 + "<label class='control-sidebar-subheading'>" 75 + "<input type='checkbox' data-layout='sidebar-collapse' class='pull-right'/> " 76 + "Toggle Sidebar" 77 + "</label>" 78 + "<p>Toggle the left sidebar's state (open or collapse)</p>" 79 + "</div>" 80 //Sidebar mini expand on hover toggle 81 + "<div class='form-group'>" 82 + "<label class='control-sidebar-subheading'>" 83 + "<input type='checkbox' data-enable='expandOnHover' class='pull-right'/> " 84 + "Sidebar Expand on Hover" 85 + "</label>" 86 + "<p>Let the sidebar mini expand on hover</p>" 87 + "</div>" 88 //Control Sidebar Toggle 89 + "<div class='form-group'>" 90 + "<label class='control-sidebar-subheading'>" 91 + "<input type='checkbox' data-controlsidebar='control-sidebar-open' class='pull-right'/> " 92 + "Toggle Right Sidebar Slide" 93 + "</label>" 94 + "<p>Toggle between slide over content and push content effects</p>" 95 + "</div>" 96 //Control Sidebar Skin Toggle 97 + "<div class='form-group'>" 98 + "<label class='control-sidebar-subheading'>" 99 + "<input type='checkbox' data-sidebarskin='toggle' class='pull-right'/> " 100 + "Toggle Right Sidebar Skin" 101 + "</label>" 102 + "<p>Toggle between dark and light skins for the right sidebar</p>" 103 + "</div>" 104 ); 105 var skins_list = $("<ul />", {"class": 'list-unstyled clearfix'}); 106 107 //Dark sidebar skins 108 var skin_blue = 109 $("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"}) 110 .append("<a href='javascript:void(0);' data-skin='skin-blue' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>" 111 + "<div><span style='display:block; width: 20%; float: left; height: 7px; background: #367fa9;'></span><span class='bg-light-blue' style='display:block; width: 80%; float: left; height: 7px;'></span></div>" 112 + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #222d32;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>" 113 + "</a>" 114 + "<p class='text-center no-margin'>Blue</p>"); 115 skins_list.append(skin_blue); 116 var skin_black = 117 $("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"}) 118 .append("<a href='javascript:void(0);' data-skin='skin-black' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>" 119 + "<div style='box-shadow: 0 0 2px rgba(0,0,0,0.1)' class='clearfix'><span style='display:block; width: 20%; float: left; height: 7px; background: #fefefe;'></span><span style='display:block; width: 80%; float: left; height: 7px; background: #fefefe;'></span></div>" 120 + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #222;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>" 121 + "</a>" 122 + "<p class='text-center no-margin'>Black</p>"); 123 skins_list.append(skin_black); 124 var skin_purple = 125 $("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"}) 126 .append("<a href='javascript:void(0);' data-skin='skin-purple' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>" 127 + "<div><span style='display:block; width: 20%; float: left; height: 7px;' class='bg-purple-active'></span><span class='bg-purple' style='display:block; width: 80%; float: left; height: 7px;'></span></div>" 128 + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #222d32;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>" 129 + "</a>" 130 + "<p class='text-center no-margin'>Purple</p>"); 131 skins_list.append(skin_purple); 132 var skin_green = 133 $("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"}) 134 .append("<a href='javascript:void(0);' data-skin='skin-green' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>" 135 + "<div><span style='display:block; width: 20%; float: left; height: 7px;' class='bg-green-active'></span><span class='bg-green' style='display:block; width: 80%; float: left; height: 7px;'></span></div>" 136 + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #222d32;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>" 137 + "</a>" 138 + "<p class='text-center no-margin'>Green</p>"); 139 skins_list.append(skin_green); 140 var skin_red = 141 $("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"}) 142 .append("<a href='javascript:void(0);' data-skin='skin-red' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>" 143 + "<div><span style='display:block; width: 20%; float: left; height: 7px;' class='bg-red-active'></span><span class='bg-red' style='display:block; width: 80%; float: left; height: 7px;'></span></div>" 144 + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #222d32;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>" 145 + "</a>" 146 + "<p class='text-center no-margin'>Red</p>"); 147 skins_list.append(skin_red); 148 var skin_yellow = 149 $("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"}) 150 .append("<a href='javascript:void(0);' data-skin='skin-yellow' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>" 151 + "<div><span style='display:block; width: 20%; float: left; height: 7px;' class='bg-yellow-active'></span><span class='bg-yellow' style='display:block; width: 80%; float: left; height: 7px;'></span></div>" 152 + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #222d32;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>" 153 + "</a>" 154 + "<p class='text-center no-margin'>Yellow</p>"); 155 skins_list.append(skin_yellow); 156 157 //Light sidebar skins 158 var skin_blue_light = 159 $("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"}) 160 .append("<a href='javascript:void(0);' data-skin='skin-blue-light' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>" 161 + "<div><span style='display:block; width: 20%; float: left; height: 7px; background: #367fa9;'></span><span class='bg-light-blue' style='display:block; width: 80%; float: left; height: 7px;'></span></div>" 162 + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #f9fafc;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>" 163 + "</a>" 164 + "<p class='text-center no-margin' style='font-size: 12px'>Blue Light</p>"); 165 skins_list.append(skin_blue_light); 166 var skin_black_light = 167 $("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"}) 168 .append("<a href='javascript:void(0);' data-skin='skin-black-light' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>" 169 + "<div style='box-shadow: 0 0 2px rgba(0,0,0,0.1)' class='clearfix'><span style='display:block; width: 20%; float: left; height: 7px; background: #fefefe;'></span><span style='display:block; width: 80%; float: left; height: 7px; background: #fefefe;'></span></div>" 170 + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #f9fafc;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>" 171 + "</a>" 172 + "<p class='text-center no-margin' style='font-size: 12px'>Black Light</p>"); 173 skins_list.append(skin_black_light); 174 var skin_purple_light = 175 $("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"}) 176 .append("<a href='javascript:void(0);' data-skin='skin-purple-light' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>" 177 + "<div><span style='display:block; width: 20%; float: left; height: 7px;' class='bg-purple-active'></span><span class='bg-purple' style='display:block; width: 80%; float: left; height: 7px;'></span></div>" 178 + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #f9fafc;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>" 179 + "</a>" 180 + "<p class='text-center no-margin' style='font-size: 12px'>Purple Light</p>"); 181 skins_list.append(skin_purple_light); 182 var skin_green_light = 183 $("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"}) 184 .append("<a href='javascript:void(0);' data-skin='skin-green-light' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>" 185 + "<div><span style='display:block; width: 20%; float: left; height: 7px;' class='bg-green-active'></span><span class='bg-green' style='display:block; width: 80%; float: left; height: 7px;'></span></div>" 186 + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #f9fafc;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>" 187 + "</a>" 188 + "<p class='text-center no-margin' style='font-size: 12px'>Green Light</p>"); 189 skins_list.append(skin_green_light); 190 var skin_red_light = 191 $("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"}) 192 .append("<a href='javascript:void(0);' data-skin='skin-red-light' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>" 193 + "<div><span style='display:block; width: 20%; float: left; height: 7px;' class='bg-red-active'></span><span class='bg-red' style='display:block; width: 80%; float: left; height: 7px;'></span></div>" 194 + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #f9fafc;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>" 195 + "</a>" 196 + "<p class='text-center no-margin' style='font-size: 12px'>Red Light</p>"); 197 skins_list.append(skin_red_light); 198 var skin_yellow_light = 199 $("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"}) 200 .append("<a href='javascript:void(0);' data-skin='skin-yellow-light' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>" 201 + "<div><span style='display:block; width: 20%; float: left; height: 7px;' class='bg-yellow-active'></span><span class='bg-yellow' style='display:block; width: 80%; float: left; height: 7px;'></span></div>" 202 + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #f9fafc;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>" 203 + "</a>" 204 + "<p class='text-center no-margin' style='font-size: 12px;'>Yellow Light</p>"); 205 skins_list.append(skin_yellow_light); 206 207 demo_settings.append("<h4 class='control-sidebar-heading'>Skins</h4>"); 208 demo_settings.append(skins_list); 209 210 tab_pane.append(demo_settings); 211 $("#control-sidebar-home-tab").after(tab_pane); 212 213 setup(); 214 215 /** 216 * Toggles layout classes 217 * 218 * @param String cls the layout class to toggle 219 * @returns void 220 */ 221 function change_layout(cls) { 222 $("body").toggleClass(cls); 223 AdminLTE.layout.fixSidebar(); 224 //Fix the problem with right sidebar and layout boxed 225 if (cls == "layout-boxed") 226 AdminLTE.controlSidebar._fix($(".control-sidebar-bg")); 227 if ($('body').hasClass('fixed') && cls == 'fixed') { 228 AdminLTE.pushMenu.expandOnHover(); 229 AdminLTE.layout.activate(); 230 } 231 AdminLTE.controlSidebar._fix($(".control-sidebar-bg")); 232 AdminLTE.controlSidebar._fix($(".control-sidebar")); 233 } 234 235 /** 236 * Replaces the old skin with the new skin 237 * @param String cls the new skin class 238 * @returns Boolean false to prevent link's default action 239 */ 240 function change_skin(cls) { 241 $.each(my_skins, function (i) { 242 $("body").removeClass(my_skins[i]); 243 }); 244 245 $("body").addClass(cls); 246 store('skin', cls); 247 return false; 248 } 249 250 /** 251 * Store a new settings in the browser 252 * 253 * @param String name Name of the setting 254 * @param String val Value of the setting 255 * @returns void 256 */ 257 function store(name, val) { 258 if (typeof (Storage) !== "undefined") { 259 localStorage.setItem(name, val); 260 } else { 261 window.alert('Please use a modern browser to properly view this template!'); 262 } 263 } 264 265 /** 266 * Get a prestored setting 267 * 268 * @param String name Name of of the setting 269 * @returns String The value of the setting | null 270 */ 271 function get(name) { 272 if (typeof (Storage) !== "undefined") { 273 return localStorage.getItem(name); 274 } else { 275 window.alert('Please use a modern browser to properly view this template!'); 276 } 277 } 278 279 /** 280 * Retrieve default settings and apply them to the template 281 * 282 * @returns void 283 */ 284 function setup() { 285 var tmp = get('skin'); 286 if (tmp && $.inArray(tmp, my_skins)) 287 change_skin(tmp); 288 289 //Add the change skin listener 290 $("[data-skin]").on('click', function (e) { 291 if($(this).hasClass('knob')) 292 return; 293 e.preventDefault(); 294 change_skin($(this).data('skin')); 295 }); 296 297 //Add the layout manager 298 $("[data-layout]").on('click', function () { 299 change_layout($(this).data('layout')); 300 }); 301 302 $("[data-controlsidebar]").on('click', function () { 303 change_layout($(this).data('controlsidebar')); 304 var slide = !AdminLTE.options.controlSidebarOptions.slide; 305 AdminLTE.options.controlSidebarOptions.slide = slide; 306 if (!slide) 307 $('.control-sidebar').removeClass('control-sidebar-open'); 308 }); 309 310 $("[data-sidebarskin='toggle']").on('click', function () { 311 var sidebar = $(".control-sidebar"); 312 if (sidebar.hasClass("control-sidebar-dark")) { 313 sidebar.removeClass("control-sidebar-dark") 314 sidebar.addClass("control-sidebar-light") 315 } else { 316 sidebar.removeClass("control-sidebar-light") 317 sidebar.addClass("control-sidebar-dark") 318 } 319 }); 320 321 $("[data-enable='expandOnHover']").on('click', function () { 322 $(this).attr('disabled', true); 323 AdminLTE.pushMenu.expandOnHover(); 324 if (!$('body').hasClass('sidebar-collapse')) 325 $("[data-layout='sidebar-collapse']").click(); 326 }); 327 328 // Reset options 329 if ($('body').hasClass('fixed')) { 330 $("[data-layout='fixed']").attr('checked', 'checked'); 331 } 332 if ($('body').hasClass('layout-boxed')) { 333 $("[data-layout='layout-boxed']").attr('checked', 'checked'); 334 } 335 if ($('body').hasClass('sidebar-collapse')) { 336 $("[data-layout='sidebar-collapse']").attr('checked', 'checked'); 337 } 338 339 } 340 })(jQuery, $.AdminLTE);