/** * AdminLTE Demo Menu * ------------------ * You should not use this file in production. * This file is for demo purposes only. */ (function ($, AdminLTE) { 'use strict'; /** * List of all the available skins * * @type Array */ var mySkins = [ 'skin-blue', 'skin-black', 'skin-red', 'skin-yellow', 'skin-purple', 'skin-green', 'skin-blue-light', 'skin-black-light', 'skin-red-light', 'skin-yellow-light', 'skin-purple-light', 'skin-green-light' ]; /** * Get a prestored setting * * @param String name Name of of the setting * @returns String The value of the setting | null */ function get(name) { if (typeof (Storage) !== 'undefined') { return localStorage.getItem(name); } else { window.alert('Please use a modern browser to properly view this template!'); } } /** * Store a new settings in the browser * * @param String name Name of the setting * @param String val Value of the setting * @returns void */ function store(name, val) { if (typeof (Storage) !== 'undefined') { localStorage.setItem(name, val); } else { window.alert('Please use a modern browser to properly view this template!'); } } /** * Toggles layout classes * * @param String cls the layout class to toggle * @returns void */ function changeLayout(cls) { $('body').toggleClass(cls); AdminLTE.layout.fixSidebar(); // Fix the problem with right sidebar and layout boxed if (cls == 'layout-boxed') AdminLTE.controlSidebar._fix($('.control-sidebar-bg')); if ($('body').hasClass('fixed') && cls == 'fixed') { AdminLTE.pushMenu.expandOnHover(); AdminLTE.layout.activate(); } AdminLTE.controlSidebar._fix($('.control-sidebar-bg')); AdminLTE.controlSidebar._fix($('.control-sidebar')); } /** * Replaces the old skin with the new skin * @param String cls the new skin class * @returns Boolean false to prevent link's default action */ function changeSkin(cls) { $.each(mySkins, function (i) { $('body').removeClass(mySkins[i]); }); $('body').addClass(cls); store('skin', cls); return false; } /** * Retrieve default settings and apply them to the template * * @returns void */ function setup() { var tmp = get('skin'); if (tmp && $.inArray(tmp, mySkins)) changeSkin(tmp); // Add the change skin listener $('[data-skin]').on('click', function (e) { if ($(this).hasClass('knob')) return; e.preventDefault(); changeSkin($(this).data('skin')); }); // Add the layout manager $('[data-layout]').on('click', function () { changeLayout($(this).data('layout')); }); $('[data-controlsidebar]').on('click', function () { changeLayout($(this).data('controlsidebar')); var slide = !AdminLTE.options.controlSidebarOptions.slide; AdminLTE.options.controlSidebarOptions.slide = slide; if (!slide) $('.control-sidebar').removeClass('control-sidebar-open'); }); $('[data-sidebarskin="toggle"]').on('click', function () { var $sidebar = $('.control-sidebar'); if ($sidebar.hasClass('control-sidebar-dark')) { $sidebar.removeClass('control-sidebar-dark') $sidebar.addClass('control-sidebar-light') } else { $sidebar.removeClass('control-sidebar-light') $sidebar.addClass('control-sidebar-dark') } }); $('[data-enable="expandOnHover"]').on('click', function () { $(this).attr('disabled', true); AdminLTE.pushMenu.expandOnHover(); if (!$('body').hasClass('sidebar-collapse')) $('[data-layout="sidebar-collapse"]').click(); }); // Reset options if ($('body').hasClass('fixed')) { $('[data-layout="fixed"]').attr('checked', 'checked'); } if ($('body').hasClass('layout-boxed')) { $('[data-layout="layout-boxed"]').attr('checked', 'checked'); } if ($('body').hasClass('sidebar-collapse')) { $('[data-layout="sidebar-collapse"]').attr('checked', 'checked'); } } // Create the new tab var $tabPane = $('
', { 'id' : 'control-sidebar-theme-demo-options-tab', 'class': 'tab-pane active' }); // Create the tab button var $tabButton = $('
  • ', { 'class': 'active' }) .html('' + '' + ''); // Add the tab button to the right sidebar tabs $('[href="#control-sidebar-home-tab"]') .parent() .before($tabButton); // Create the menu var $demoSettings = $('
    '); // Layout options $demoSettings.append( '

    ' + 'Layout Options' + '

    ' // Fixed layout + '
    ' + '' + '

    Activate the fixed layout. You can\'t use fixed and boxed layouts together

    ' + '
    ' // Boxed layout + '
    ' + '' + '

    Activate the boxed layout

    ' + '
    ' // Sidebar Toggle + '
    ' + '' + '

    Toggle the left sidebar\'s state (open or collapse)

    ' + '
    ' // Sidebar mini expand on hover toggle + '
    ' + '' + '

    Let the sidebar mini expand on hover

    ' + '
    ' // Control Sidebar Toggle + '
    ' + '' + '

    Toggle between slide over content and push content effects

    ' + '
    ' // Control Sidebar Skin Toggle + '
    ' + '' + '

    Toggle between dark and light skins for the right sidebar

    ' + '
    ' ); var $skinsList = $('
      ', { 'class': 'list-unstyled clearfix' }); // Dark sidebar skins var $skinBlue = $('
    • ', { style: 'float:left; width: 33.33333%; padding: 5px;' }) .append('' + '
      ' + '
      ' + '
      ' + '

      Blue

      '); $skinsList.append($skinBlue); var $skinBlack = $('
    • ', { style: 'float:left; width: 33.33333%; padding: 5px;' }) .append('' + '
      ' + '
      ' + '
      ' + '

      Black

      '); $skinsList.append($skinBlack); var $skinPurple = $('
    • ', { style: 'float:left; width: 33.33333%; padding: 5px;' }) .append('' + '
      ' + '
      ' + '
      ' + '

      Purple

      '); $skinsList.append($skinPurple); var $skinGreen = $('
    • ', { style: 'float:left; width: 33.33333%; padding: 5px;' }) .append('' + '
      ' + '
      ' + '
      ' + '

      Green

      '); $skinsList.append($skinGreen); var $skinRed = $('
    • ', { style: 'float:left; width: 33.33333%; padding: 5px;' }) .append('' + '
      ' + '
      ' + '
      ' + '

      Red

      '); $skinsList.append($skinRed); var $skinYellow = $('
    • ', { style: 'float:left; width: 33.33333%; padding: 5px;' }) .append('' + '
      ' + '
      ' + '
      ' + '

      Yellow

      '); $skinsList.append($skinYellow); // Light sidebar skins var $skinBlueLight = $('
    • ', { style: 'float:left; width: 33.33333%; padding: 5px;' }) .append('' + '
      ' + '
      ' + '
      ' + '

      Blue Light

      '); $skinsList.append($skinBlueLight); var $skinBlackLight = $('
    • ', { style: 'float:left; width: 33.33333%; padding: 5px;' }) .append('' + '
      ' + '
      ' + '
      ' + '

      Black Light

      '); $skinsList.append($skinBlackLight); var $skinPurpleLight = $('
    • ', { style: 'float:left; width: 33.33333%; padding: 5px;' }) .append('' + '
      ' + '
      ' + '
      ' + '

      Purple Light

      '); $skinsList.append($skinPurpleLight); var $skinGreenLight = $('
    • ', { style: 'float:left; width: 33.33333%; padding: 5px;' }) .append('' + '
      ' + '
      ' + '
      ' + '

      Green Light

      '); $skinsList.append($skinGreenLight); var $skinRedLight = $('
    • ', { style: 'float:left; width: 33.33333%; padding: 5px;' }) .append('' + '
      ' + '
      ' + '
      ' + '

      Red Light

      '); $skinsList.append($skinRedLight); var $skinYellowLight = $('
    • ', { style: 'float:left; width: 33.33333%; padding: 5px;' }) .append('' + '
      ' + '
      ' + '
      ' + '

      Yellow Light

      '); $skinsList.append($skinYellowLight); $demoSettings.append('

      Skins

      '); $demoSettings.append($skinsList); $tabPane.append($demoSettings); $('#control-sidebar-home-tab').after($tabPane); setup(); })(jQuery, $.AdminLTE);