Before proceeding, ensure you are using the iframe variant, not the single-page professional edition. Mastery of layui is essential, as layuiAdmin extends its components and patterns. Always refer to the official layui documentation for foundational usage.

Project Structure

After extracting the distribution package, you’ll find two primary directories:

• src/ — Development environment source code
• dist/ — Production-ready build output (minified assets generated via Gulp)

Within src/:

• layuiadmin/ — Core framework assets (JS, CSS, modules)
• layuiadmin/layui/ — Customized version of the layui core library
• layuiadmin/lib/ — Essential admin modules; avoid modification
• layuiadmin/modules/ — Business logic modules
• layuiadmin/style/ — Custom styles and themes
• layuiadmin/tpl/ — Reusable template fargments
• layuiadmin/config.js — Central configuration file
• views/ — Server-rendered page templates (copy to your backend’s view directory)

To deploy:

1. Copy the entire views/ folder into your backend application’s template directory (e.g., Spring Boot, ASP.NET, PHP).
2. Update all static resource paths (JS/CSS) in HTML templates to reflect your server’s URL structure.
3. Start your backend server (Nginx, Apache, Tomcat, etc.) and access via browser.

Global Configuration

Modify src/layuiadmin/config.js to tailor behavior. This file exports a setter object that defines runtime settings:

layui.define(['laytpl', 'layer', 'element', 'util'], function(exports){
  exports('setter', {
    container: 'LAY_app',
    base: layui.cache.base,
    views: layui.cache.base + 'tpl/',
    entry: 'index',
    engine: '.html',
    pageTabs: true,

    name: 'layuiAdmin',
    tableName: 'layuiAdmin',
    MOD_NAME: 'admin',
    debug: true,

    request: {
      tokenName: false
    },

    response: {
      statusName: 'code',
      statusCode: {
        ok: 0,
        logout: 1001
      },
      msgName: 'msg',
      dataName: 'data'
    },

    extend: [
      'echarts',
      'echartsTheme'
    ],

    theme: {
      color: [{
        main: '#20222A',
        selected: '#009688',
        logo: '',
        header: '',
        alias: 'default'
      }],
      initColorIndex: 0
    }
  });
});

Key configurations:

• pageTabs: true — Enables tabbed navigation in the main content area.
• debug: true — Enables detailed error logging during development.
• response.statusCode.logout — Triggers automatic redirect to login on token expiry.
• extend — Registers third-party libraries (e.g., ECharts) for global use.
• theme.initColorIndex — Sets default theme; persists via localStorage unless cleared.

Core Utility Methods

Access the admin module via:

var admin = layui.admin;

Available methods:

• admin.req(options) — Enhanced AJAX wrapper. Behaves like $.ajax() but auto-handles response codes (e.g., redirects on logout).
• admin.screen() — Returns screen size category: 0 (mobile), 1 (tablet), 2 (small desktop), 3 (large desktop).
• admin.sideFlexible(status) — Toggles sidebar state: null (collapse), 'spread' (expand).
• admin.on(eventName, callback) — Listens for internal events (e.g., tab changes).
• admin.popup(options) — Opens a themed layer dialog (identical to layer.open()).
• admin.popupRight(options) — Slides in a panel from the right edge. Use with layui.view(id).render('path/to/template') to load dynamic content.
• admin.resize(callback) — Safely handles window resize events acrosss multiple iframes. Prefer over jQuery’s .resize().
• admin.fullScreen() / admin.exitScreen() — Toggles browser fullscreen mode.

Tab Management

Use admin.events to control tab behavior:

• admin.events.refresh() — Reloads the active iframe tab.
• admin.events.closeThisTabs() — Closes the current tab.
• admin.events.closeOtherTabs() — Closes all tabs except the current one.
• admin.events.closeAllTabs() — Clears all tabs.

If executing from within an iframe, reference the parent context:

parent.layui.admin.events.closeThisTabs();

Dynamic Page Loading

To open new tabs from within iframe content:

Method 1: Data Attributes

<a lay-href="/user/profile" lay-text="User Profile">Profile</a>

• lay-href — Specifies target URL.
• lay-text — Overrides default tab title (defaults to link text).
• Use standard href to navigate within current tab.

Method 2: Programmatic Control

parent.layui.index.openTabsPage('/user/profile', 'User Profile');

Always use parent. when calling from within an iframe to access the parent window’s context.

Interactive Components

Hover Tooltip

Add tooltips to icons or elements using lay-tips:

<i class="layui-icon layui-icon-tips" 
   lay-tips="This feature requires admin rights" 
   lay-offset="8"></i>

• lay-offset — Adjusts horizontal offset in pixels to align the tooltip arrow.

Browser Compatibility

layuiAdmin relies on CSS media queries for responsive layouts. Internet Explorer 8 and 9 lack native support. Include polyfills in your main HTML template:

<!--[if lt IE 9]>
  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

These scripts enable media query support and responsive grid behavior in legacy browsers.