Layuiadmin：全能型前端框架

Layuiadmin是基於LayUI框架的前端UI開發框架，同時也是一款全能型前端框架。

一、特點簡述

Layuiadmin有着以下幾個特點：

1、易於上手：Layuiadmin提供了完整的文檔和示例代碼，用戶可以快速上手。

2、輕量級：Layuiadmin的代碼量很小，壓縮後只有100多KB，可以快速加載。

3、模塊化：Layuiadmin採用模塊化開發，代碼易於維護和擴展。

4、豐富的UI組件：Layuiadmin提供了豐富的UI組件，可以快速構建各種複雜的前端頁面。

5、響應式布局：Layuiadmin支持響應式布局，在不同設備上都能保持良好的顯示效果。

二、UI組件豐富

Layuiadmin提供了豐富的UI組件，可用於構建各種複雜的前端頁面。

1、表格

  <table class="layui-hide" id="test" lay-filter="test">
      <thead>
          <tr>
              <th lay-data="{field:'id',type:'checkbox'}"></th>
              <th lay-data="{field:'id', width:80, sort: true}">ID</th>
              <th lay-data="{field:'username', width:80}">用戶名</th>
              <th lay-data="{field:'email', minWidth:150}">郵箱</th>
              <th lay-data="{field:'sex', width:80, sort: true}">性別</th>
              <th lay-data="{field:'city', width:80}">城市</th>
              <th lay-data="{field:'sign'}">簽名</th>
              <th lay-data="{field:'experience', sort: true, width:80}">積分</th>
              <th lay-data="{field:'dead', width:180}">修改時間</th>
              <th lay-data="{fixed: 'right', width:178, align:'center', toolbar: '#barDemo'}">操作</th>
          </tr>
      </thead>
  </table>

2、表單

  <div class="layui-form-item">
      <label class="layui-form-label">標題</label>
      <div class="layui-input-block">
          <input type="text" name="title" required lay-verify="required" placeholder="請輸入標題" autocomplete="off" class="layui-input">
      </div>
  </div>

3、彈出層

  layui.use('layer', function(){
      var layer = layui.layer;
      layer.msg('Hello World');
  });

三、模塊化開發

Layuiadmin採用模塊化開發，代碼易於維護和擴展。

1、定義模塊

  layui.define(function(exports){
      //模塊代碼
      exports('module_name', function(){ //暴露模塊接口
          //接口代碼
      });
  });

2、引用模塊

  layui.use(['module_name'], function(moduleName){
      var module = layui.module_name();
      //調用模塊接口
  });

四、響應式布局

Layuiadmin支持響應式布局，在不同設備上都能保持良好的顯示效果。

1、定義容器

  <div class="layui-container">
      <div class="layui-row">
          <div class="layui-col-md4"></div>
          <div class="layui-col-md4"></div>
          <div class="layui-col-md4"></div>
      </div>
  </div>

2、設置列寬

  <div class="layui-col-md3"></div>
  <div class="layui-col-md6"></div>
  <div class="layui-col-md3"></div>

五、完整代碼示例

以下為一個完整的Layuiadmin頁面的示例代碼：

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Layuiadmin</title>
      <link rel="stylesheet" href="/layui/css/layui.css">
  </head>
  <body>
      <div class="layui-container">
          <div class="layui-row">
              <div class="layui-col-md4"></div>
              <div class="layui-col-md4"></div>
              <div class="layui-col-md4"></div>
          </div>
      </div>
      <table class="layui-hide" id="test" lay-filter="test">
          <thead>
              <tr>
                  <th lay-data="{field:'id',type:'checkbox'}"></th>
                  <th lay-data="{field:'id', width:80, sort: true}">ID</th>
                  <th lay-data="{field:'username', width:80}">用戶名</th>
                  <th lay-data="{field:'email', minWidth:150}">郵箱</th>
                  <th lay-data="{field:'sex', width:80, sort: true}">性別</th>
                  <th lay-data="{field:'city', width:80}">城市</th>
                  <th lay-data="{field:'sign'}">簽名</th>
                  <th lay-data="{field:'experience', sort: true, width:80}">積分</th>
                  <th lay-data="{field:'dead', width:180}">修改時間</th>
                  <th lay-data="{fixed: 'right', width:178, align:'center', toolbar: '#barDemo'}">操作</th>
              </tr>
          </thead>
      </table>
      <form class="layui-form">
          <div class="layui-form-item">
              <label class="layui-form-label">標題</label>
              <div class="layui-input-block">
                  <input type="text" name="title" required lay-verify="required" placeholder="請輸入標題" autocomplete="off" class="layui-input">
              </div>
          </div>
      </form>
      <script src="/layui/layui.js"></script>
      <script>
          layui.use(['table', 'form'], function(){
              var table = layui.table;
              var form = layui.form;
              //渲染表格
              table.render({
                  elem: '#test',
                  url: '/demo/table/user/',
                  page: true,
                  cols: [[
                      {type:'checkbox'},
                      {field:'id', width:80, title: 'ID', sort: true},
                      {field:'username', width:80, title: '用戶名'},
                      {field:'email', minWidth:150, title: '郵箱'},
                      {field:'sex', width:80, title: '性別', sort: true},
                      {field:'city', width:80, title: '城市'},
                      {field:'sign', title: '簽名'},
                      {field:'experience', width: 80, title: '積分', sort: true},
                      {field:'dead', title: '修改時間', width: 180},
                      {fixed: 'right', width:178, align:'center', toolbar: '#barDemo'}
                  ]]
              });
              //監聽提交
              form.on('submit(formDemo)', function(data){
                  layer.msg(JSON.stringify(data.field));
                  return false;
              });
          });
      </script>
  </body>
  </html>

原創文章，作者：RAAFJ，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/368544.html