/** * AdminLTE Demo Menu * ------------------ * You should not use this file in production. * This file is for demo purposes only. */ $(function () { 'use strict' /** * Get access to plugins */ $('[data-toggle="control-sidebar"]').controlSidebar() $('[data-toggle="push-menu"]').pushMenu() var $pushMenu = $('[data-toggle="push-menu"]').data('lte.pushmenu') var $controlSidebar = $('[data-toggle="control-sidebar"]').data('lte.controlsidebar') var $layout = $('body').data('lte.layout') $(window).on('load', function() { // Reinitialize variables on load $pushMenu = $('[data-toggle="push-menu"]').data('lte.pushmenu') $controlSidebar = $('[data-toggle="control-sidebar"]').data('lte.controlsidebar') $layout = $('body').data('lte.layout') }) /** * 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) $layout.fixSidebar() if ($('body').hasClass('fixed') && cls == 'fixed') { $pushMenu.expandOnHover() $layout.activate() } $controlSidebar.fix() } /** * 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 = !$controlSidebar.options.slide $controlSidebar.options.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) $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() $('[data-toggle="tooltip"]').tooltip() })