/** * AdminLTE Demo Menu * ------------------ * You should not use this file in production. * This file is for demo purposes only. */ (function ($, AdminLTE) { /** * List of all the available skins * * @type Array */ var my_skins = [ "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" ]; //Create the new tab var tab_pane = $("
", { "id": "control-sidebar-theme-demo-options-tab", "class": "tab-pane" }); //Create the tab button var tab_button = $("
  • ") .html("" + "" + ""); //Add the tab button to the right sidebar tabs $("[href='#control-sidebar-home-tab']") .parent() .before(tab_button); //Create the menu var demo_settings = $("
    "); //Layout options demo_settings.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)

    " + "
    " //Control Sidebar Toggle + "
    " + "" + "

    Toggles between slide over content and push content effects.

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

      Blue

      "); skins_list.append(skin_blue); var skin_black = $("
    • ", {style: "float:left; width: 33.33333%; padding: 5px;"}) .append("" + "
      " + "
      " + "      " + "

      Black

      "); skins_list.append(skin_black); var skin_purple = $("
    • ", {style: "float:left; width: 33.33333%; padding: 5px;"}) .append("" + "
      " + "
      " + "      " + "

      Purple

      "); skins_list.append(skin_purple); var skin_green = $("
    • ", {style: "float:left; width: 33.33333%; padding: 5px;"}) .append("" + "
      " + "
      " + "      " + "

      Green

      "); skins_list.append(skin_green); var skin_red = $("
    • ", {style: "float:left; width: 33.33333%; padding: 5px;"}) .append("" + "
      " + "
      " + "      " + "

      Red

      "); skins_list.append(skin_red); var skin_yellow = $("
    • ", {style: "float:left; width: 33.33333%; padding: 5px;"}) .append("" + "
      " + "
      " + "      " + "

      Yellow

      "); skins_list.append(skin_yellow); //Light sidebar skins var skin_blue_light = $("
    • ", {style: "float:left; width: 33.33333%; padding: 5px;"}) .append("" + "
      " + "
      " + "      " + "

      Blue Light

      "); skins_list.append(skin_blue_light); var skin_black_light = $("
    • ", {style: "float:left; width: 33.33333%; padding: 5px;"}) .append("" + "
      " + "
      " + "      " + "

      Black Light

      "); skins_list.append(skin_black_light); var skin_purple_light = $("
    • ", {style: "float:left; width: 33.33333%; padding: 5px;"}) .append("" + "
      " + "
      " + "      " + "

      Purple Light

      "); skins_list.append(skin_purple_light); var skin_green_light = $("
    • ", {style: "float:left; width: 33.33333%; padding: 5px;"}) .append("" + "
      " + "
      " + "      " + "

      Green Light

      "); skins_list.append(skin_green_light); var skin_red_light = $("
    • ", {style: "float:left; width: 33.33333%; padding: 5px;"}) .append("" + "
      " + "
      " + "      " + "

      Red Light

      "); skins_list.append(skin_red_light); var skin_yellow_light = $("
    • ", {style: "float:left; width: 33.33333%; padding: 5px;"}) .append("" + "
      " + "
      " + "      " + "

      Yellow Light

      "); skins_list.append(skin_yellow_light); demo_settings.append("

      Skins

      "); demo_settings.append(skins_list); tab_pane.append(demo_settings); $("#control-sidebar-settings-tab").before(tab_pane); setup(); /** * Toggles layout classes * * @param String cls the layout class to toggle * @returns void */ function change_layout(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")); } /** * 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 change_skin(cls) { $.each(my_skins, function (i) { $("body").removeClass(my_skins[i]); }); $("body").addClass(cls); store('skin', cls); return false; } /** * 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 { alert('Please use a modern browser to properly view this template!'); } } /** * 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 { alert('Please use a modern browser to properly view this template!'); } } /** * Retrieve default settings and apply them to the template * * @returns void */ function setup() { var tmp = get('skin'); if (tmp && $.inArray(tmp, my_skins)) change_skin(tmp); //Add the change skin listener $("[data-skin]").on('click', function (e) { e.preventDefault(); change_skin($(this).data('skin')); }); //Add the layout manager $("[data-layout]").on('click', function () { change_layout($(this).data('layout')); }); $("[data-controlsidebar]").on('click', function () { change_layout($(this).data('controlsidebar')); var slide = !AdminLTE.options.controlSidebarOptions.slide; AdminLTE.options.controlSidebarOptions.slide = slide; if (!slide) $('.control-sidebar').removeClass('control-sidebar-open'); }); } })(jQuery, $.AdminLTE);