# layuiAdmin v2.x iframe 版 文档

> layuiAdmin iframe 版采用传统的 iframe 多页面开发模式，可更快速直接地开发网页管理系统模板，无需过多地学习成本，简单高效，更容易上手。

- 快速上手

  - 目录说明
  - 部署到服务端
  - 全局配置

- 基础方法

  - admin 模块
  - view 模块

- iframe 内部打开新标签

- 自定义标签栏标题

- 实用组件

- 兼容性

- 关于版权

## 前言

- 该文档适用于 layuiAdmin v2.x iframe 版的的最新版本，阅读之前请务必确认是否与你使用的版本对应。
- 掌握 layuiAdmin 的前提是熟练掌握 layui，因此除了本篇文档， layui 的文档 也是必不可少的。

## 快速上手

### 目录说明

解压文件后，你将看到以下目录：

                    - res/             # 静态资源目录
      - adminui/       # layuiAdmin 主题核心代码目录（重要：一般升级时主要替换此目录）
        - dist/        # 主题核心代码构建后的目录（为主要引用）
          - modules/   # 主题核心 JS 模块
          - css/       # 主题核心 CSS 样式
        - src/         # 主题核心源代码目录（不推荐引用，除非要改动核心代码），结构同 dist 目录
      - json/          # 用于演示的模拟数据
      - layui/         # layui 组件库（重要：若升级 layui 直接替换该目录即可）
      - modules/       # 业务 JS 模块（可按照实际的业务需求进行修改）
      - style/         # 业务 CSS 图片等资源目录
      - views/         # 业务动态模板视图碎片目录
      - config.js      # 初始化配置文件
      - index.js       # 初始化主题入口模块
    - views/           # 业务视图目录，可放置在项目任意目录（注意修改里面的 css、js 相关路径即可）

> 注意：上述为当前 layuiAdmin v2.x iframe 最新版本的目录结构

### 部署到服务端

1. 将 views 文件夹整个复制到你 服务端工程 的 view 层中，通过本地 web 服务器访问（Tomcat / IIS / Apache / Nginx 等）
2. 确保可以访问后，修改好 HTML 文件中的 JS/CSS 路径，即可正常运行页面。

> iframe 版 相比于 单页面版 ，无论是在目录结构还是开发模式上都要简单很多。因为单页版是接管了服务端 MVC 的视图层，而 iframe 版则将视图交给了服务端来控制和输出，可以避免鉴权的复杂程度，直接可衔接好新老项目（因为你们的大部分老项目都是采用 iframe 模式）。

### 全局配置

res 目录中的 `config.js`，里面存储着所有的默认配置项。你可以按照实际需求选择性修改：

    layui.define(['all'], function(exports){
      exports('setter', {
        paths: { // v1.9.0 及以上版本的写法
          core: layui.cache.base + 'adminui/dist/', // 核心库所在目录
          views: layui.cache.base + 'views/', // 动态模板所在目录
          modules: layui.cache.base + 'modules/', // 业务模块所在目录
          base: layui.cache.base // 记录静态资源所在基础目录
        },
        /* v1.9.0 之前的写法
        // views: layui.cache.base + 'views/', // 业务视图所在目录
        // base: layui.cache.base, // 记录静态资源所在基础目录
        */

        container: 'LAY_app', // 容器ID
        entry: 'index', // 默认视图文件名
        engine: '.html', // 视图文件后缀名
        pageTabs: true, // 是否开启页面选项卡功能。iframe 版推荐开启
        refreshCurrPage: true, // 当跳转页面 url 与当前页 url 相同时，是否自动执行刷新 --- 2.0+

        name: 'layuiAdmin',
        tableName: 'layuiAdmin', // 本地存储表名
        MOD_NAME: 'admin', // 模块事件名

        // 记忆
        record: {
          url: true // 是否开启 iframe 跳转时 url 记忆功能 --- 2.0+
        },

        debug: true, // 是否开启调试模式。如开启，接口异常时会抛出异常 URL 等信息

        // 自定义请求字段
        request: {
          tokenName: false // 自动携带 token 的字段名（如：access_token）。可设置 false 不携带。
        },

        // 自定义响应字段
        response: {
          statusName: 'code', // 数据状态的字段名称
          statusCode: {
            ok: 0, // 数据状态一切正常的状态码
            logout: 1001 // 登录状态失效的状态码
          },
          msgName: 'msg', // 状态信息的字段名称
          dataName: 'data' // 数据详情的字段名称
        },

        // 配置业务模块目录中的特殊模块
        extend: {
          layim: 'layim/layim' // layim
        },

        // 主题配置
        theme: {
          // 配色方案，如果用户未设置主题，第一个将作为默认
          color: [{
            main: '#20222A', // 主题色
            selected: '#009688', // 选中色
            logo: '', // logo 区域背景色
            header: '', // 头部区域背景色
            alias: 'default' // 默认别名
          }], // 为了减少篇幅，更多主题此处不做列举，可直接参考 config.js

          // 初始的颜色索引，对应上面的配色方案数组索引
          // 如果本地已经有主题色记录，则以本地记录为优先，除非清除 LocalStorage（步骤：F12呼出调试工具→Aplication→Local Storage→选中页面地址→layuiAdmin→再点上面的X）
          // 1.0 正式版开始新增
          initColorIndex: 0
        }
      });
    });

## 基础方法

- config 模块

> 你可以在任何地方通过 `layui.setter` 得到 config.js 中的配置信息。如：`layui.setter.base`

- admin 模块

> var admin = layui.admin;

- admin.req(options)
  Ajax 请求，用法同 $.ajax(options)，只是该方法会进行错误处理

- admin.screen()
  获取屏幕类型，根据当前屏幕大小，返回 0 - 3 的值
  0: 低于768px的屏幕
  1：768px到992px之间的屏幕
  2：992px到1200px之间的屏幕
  3：高于1200px的屏幕

- admin.sideFlexible(status)
  侧边伸缩。status 为 null：收缩；status为 “spread”：展开

- admin.on(eventName, callback)

eventName | 描述
--- | ---
tabsPage | 标签页切换事件
side | 侧边栏伸缩事件

- admin.popup(options)
  弹出一个 layuiAdmin 主题风格的 layer 层，参数 options 跟 layer.open(options) 完全相同

- admin.popupRight(options)
  在屏幕右侧呼出一个面板层。options 同上。

    admin.popupRight({
      id: 'LAY-popup-right-new1' //定义唯一ID，防止重复弹出
      ,success: function(){
        //将 views 目录下的某视图文件内容渲染给该面板
        layui.view(this.id).render('视图文件所在路径');
      }
    });

- admin.resize(callback)
  窗口 resize 事件处理，我们推荐你使用该方法取代 jQuery 的 resize 事件，以避免多页面标签下可能存在的冲突。

- admin.fullScreen()
  全屏

- admin.exitScreen()
  退出全屏

- admin.events

  - admin.events.refresh()
    刷新当前右侧区域

  - admin.events.closeThisTabs()
    关闭当前标签页

    > 注意：如果是在 iframe 页面中执行关闭，需要如下写法：

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

  - admin.events.closeOtherTabs()
    关闭其它标签页

  - admin.events.closeAllTabs()
    关闭全部标签页

- view 模块

> var view = layui.view;

- view(id)
  获取指定容器，并返回一些视图渲染的方法，如：

    //渲染视图，viewPath 即为视图路径
    view('id').render(viewPath).then(function(){
        //视图文件请求完毕，视图内容渲染前的回调
    }).done(function(){
       //视图文件请求完毕和内容渲染完毕的回调
    });

也可以通过 `send` 方法直接向容器中插入模板：

    //tpl 为 模板字符；data 是传入的数据。该方法会自动完成动态模板解析
    view('id').send(tpl, data);

一般我们还是推荐 `render` 方法，因为它请求的是一个独立的模板碎片，可以保证代码的可维护性。该方法同样支持动态传参，并可在视图的动态模板中使用。如：

    admin.popup({
      id: 'LAY-popup-test1'
      ,success: function(){
        view(this.id).render('视图文件所在路径', {
           id: 123 //这里的 id 值你可以在一些事件中动态获取（如 table 模块的编辑）
        });
      }
    });

那么，在视图文件中，你可以在动态模板中通过 `{{ d.params.xxx }}` 得到传入的参数，如：

    <script type="text/html" template lay-url="http://api.com?id={{ d.params.id }}">
      配置了接口的动态模板，且接口动态获取了 render 传入的参数：{{ d.params.id }}
    </script>

    <script type="text/html" template>
      也可以直接获取：<input type="hidden" name="id" value="{{ d.params.id }}">
    </script>

而如果是在 JS 语句中去获取模板传递过来的变量，可以借助动态模板的 lay-done 属性去实现，如：

    <script type="text/html" template lay-done="layui.data.sendParams(d.params)">

    </script>

然后在 JS 语句中通过执行动态模板 lay-done 中对应的方法得到对应的参数值：

    <script>
    //定义一个 lay-done 对应的全局方法，以供动态模板执行
    layui.data.sendParams = function(params){
      console.log(params.id) //得到传递过来的 id 参数（或其他参数）值

      //通过得到的参数值，做一些你想做的事
      //…

      //若需用到 layui 组件，layui.use 需写在该全局方法里面，如：
      layui.use(['table'], function(){
        var table = layui.table;
        table.render({
          elem: ''
          ,url: 'url?id='+ params.id
        });
      });
    };
    </script>

总之，驾驭好 `view().render().done(callback)` 对您的项目开发至关重要。

## 在 iframe 页面内部打开新标签

> 通常你会涉及一些在右侧 iframe 页面内部去打开一个新标签的需求，目前有以下方式可以实现

### 方法一：

直接在 a 标签上加上相关属性

    <a lay-href="url">文本</a>

### 方法二：

调用 index 模块的相关方法

    // 这里要注意的是 parent 的层级关系。
    parent.layui.admin.openTabsPage({
      url: '',
      title: ''
    });

    // 注意：v2.0.0 之前的版本写法为
    // parent.layui.index.openTabsPage(url, title);

## 自定义标签栏标题

> 每当你打开一个标签页，头部都会出现标题。它默认读取的是所点元素的文本，但是你也可以自定义标题。

    <a lay-href="url" lay-title="自定义标题文本">默认读取的文本</a>

- 值得说明的是，只要你配置了上述的 `lay-href` 属性，就会打开一个新的标签，如果要在当前标签跳转，直接配置 `href=""` 属性即可。

## 实用组件

### Hover 提示层

通过对元素设置 `lay-tips="提示内容"` 来开启一个 hover 提示，如：

    <i class="layui-icon layui-icon-tips" lay-tips="要支持的噢" lay-offset="5"></i>

其中 `lay-offset` 用于定于水平偏移距离（单位px），以调整箭头让其对准元素

## 兼容性

layuiAdmin 使用到了 layui 的栅格系统，而栅格则是基于浏览器的媒体查询。ie8、9不支持。
所以要在 views 目录的 html 文件中加上下面这段代码保证兼容：

    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[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]-->

## 关于版权

> layuiAdmin 受国家计算机软件著作权保护，禁止公开及传播模板源文件、盗版及非法倒卖等，违者将自行承担相应的法律责任。

© layuiAdmin