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