Adminlte Tutorial-2 configuration file App.js detailed

Source: Internet
Author: User

I generally write code, is to set up a index.html file, and then in the content through the AJAX request, dynamically replace the page content to achieve page switching, to achieve a single page effect.

Adminlte configuration file is App.js, introduced in the page, want to modify the configuration, generally should not modify the configuration file, but before the configuration file to write a section of JS code, by giving the variable (adminlte specified) Adminlteoptions assigned value, When loading app.js, it is time to detect if there is no such variable, take precedence over the configuration of the variable, the variable has no assigned configuration information and then use the original configuration in App.js. The page is then configured. As follows:

<!-- fastclick --><script src= "Plugins/fastclick/fastclick.js" ></script><! -- adminlte app --><!-- slimscroll 1.3.0 --><script src= " Plugins/slimscroll/jquery.slimscroll.min.js "></script><script>  // Variable adminlteoptions is used to modify the configuration in the app.js, all need to write before App.js   //  (in fact, after App.js can also, see what your code structure is, normal need to put before app.js)   var adminlteoptions = {    /*1, within the menu configuration, is the message, reminders, tasks that three of the internal menu that * *     //add slimscroll to the navigation bar menu (actually loading the plug-in after App.js can also run)     //  This will require you to load the Jquery.slimscroll.min.js plugin before the app.js of each page,     navbarmenuslimscroll: true,// Whether to use the Slimscroll plugin     navbarMenuSlimscrollWidth:  "10px" for the inside menu,  //the width of the scroll bar in the menu      navbarMenuHeight:  "200px",//Inside menu height     /*2, */     Specifies the control's folding speed, such as Box collapse/expand expand collapse  and&nbsP;sidebar treeview slide up/down slide up and down.     //This option accepts integers as milliseconds, ' fast ',  ' normal ', or  ' slow '      animationspeed:  ' Fast ',     /*3, specifies the control button for the side bar telescoping */     sidebartoggleselector:  "[data-toggle= ' Offcanvas ']",     sidebarpushmenu: true,// Side bar telescopic enable     sidebarslimscroll: true,//fixed fixed layout sidebar scroll bar enable      sidebarexpandonhover: true,//when the sidebar is hidden, hover the sidebar to expand. When fixed and Sidebar-mini are used together, either True or false expands (that is, the configuration is invalid)     /*box*/     Enableboxrefresh: false,    /*bootstrap.js Tip Information */     enablebstoppltip: true,//enable     BSTooltipSelector:  "[data-toggle= ' tooltip ']",// Specifies the ToolTip event for the element, and the event in the element must be the same as the event     /* a quick Click experience on the touch device, which requires reference jquery.slimscroll.min.js*/     enableFastclick: false,    enablecontroltreeview: true,//tree view Control, that is, the side bar click Animation effect     enablecontrolsidebar: true,// Control options for right sidebar     /* right sidebar configuration */    controlsidebaroptions: {       //which button should trigger on/off event       toggleBtnSelector:  "[ Data-toggle= ' Control-sidebar ',       //sidebar selector        selector:  ". Control-sidebar",       //run across content        slide: false//true means overlay on top of content, false means push     },     enableboxwidget: true,//allow box to collapse and delete     //box plug-in plugin options      boxwidgetoptions: {      boxwidgeticons: {         //Collapse icon        collapse:  ' Fa-minus ',         //open icon        open:  ' Fa-plus ',         //Remove icon        remove:  ' Fa-times '       },      boxwidgetselectors: {         //Remove button selector         remove:  ' [data-widget= ' remove '] ',         Selection of folding buttons         collapse:  ' [data-widget= ' collapse "] '        }    },    //direct chat plugin  options    directchat: {      //Enable direct chat by default        enable: true,      //Open and close the Chat Contacts pane button        contacttoggleselector:  ' [data-widget= "Chat-pane-toggle"]     },     //can add a new color     colors: {      lightblue yourself here:   "#3c8dbc",      red:  "#f56954",       green:  "#00a65a",      aqua:  "#00c0ef",       yellow:  "#f39c12",      blue:  "#0073b7",       navy:  "#001F3F",      teal:  "#39CCCC",       olive:  "#3D9970",      lime:  "#01FF70",       orange:  "#FF851B",      fuchsia:  "#F012BE",       purple:  "#8E24AA",      maroon:  "# D81b60 ",       black:  "#222222",      gray:  "#d2d6de"      },    //here is the demarcation point for modifying the response     screenSizes: {       xs: 480,      sm: 768,       md: 992,      lg: 1200    }   };</script><script src= "Dist/js/app.js" ></script>




Adminlte Tutorial-2 configuration file App.js detailed

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.