Layui前端框架

本文轉載自查看原文 2021-03-02 06:18 491 前端相關

前言

之前學習了Bootstrap和Vue.js，現在工作里用到了Layui故學習一下。

Layui的特點就是由職業前端傾情打造，面向全層次的前后端開發者，低門檻開箱即用的前端 UI 解決方案。

Layui屬於輕量級框架，簡單美觀。對后端開發人員友好。

 ├─css //css目錄
  │  │─modules //模塊css目錄（一般如果模塊相對較大，我們會單獨提取，比如下面三個：）
  │  │  ├─laydate
  │  │  ├─layer
  │  │  └─layim
  │  └─layui.css //核心樣式文件
  ├─font  //字體圖標目錄
  ├─images //圖片資源目錄（目前只有layim和編輯器用到的GIF表情）
  │─lay //模塊核心目錄
  │  └─modules //各模塊組件
  │─layui.js //基礎核心庫
  └─layui.all.js //包含layui.js和所有模塊的合並文件

使用

layui可以根據模塊進行導入也可以一次性導入全部功能模塊。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <link rel="stylesheet" href="/static/layui/layui-v2.5.7/layui/css/layui.css">
    <script src="/static/layui/layui-v2.5.7/layui/layui.js"></script>
</head>
<body>
<h1>您好</h1>
</body>
<script>
    layui.use(["layer", "form", "element"], function () {
        var layer = layui.layer, form = layui.form,
            element = layui.element;
        layer.msg("您好，世界！")

    })
</script>
</html>

選擇性導入模塊

布局

Layui跟BootStrap一樣有布局容易以及柵格(grid)系統，方便我們對頁面整體進行大小划分和布局。

Layui布局容器

我們可以把整個頁面視為1個容器，設置容器位固定寬度或者完整寬度。

1.固定寬度：class="layui-container" 兩側有留白效果

2.完整寬度：class="layui-fluid"占據屏幕100%的寬度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <!--引入 核心css文件-->
    <link rel="stylesheet" href="/static/layui/layui-v2.5.7/layui/css/layui.css">
</head>
<body>
<!-- 1.固定寬度：兩側有留白效果 -->
<div class="layui-container" style="background-color: navy;height: 200px ">
</div>
<!--2.完整寬度：占據屏幕100%的寬度 -->
<div class="layui-fluid" style="background-color: cyan;height: 500px"></div>
</body>
</html>

X-admin后台管理菜單

<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>運維管理系統</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <link rel="stylesheet" href="/static/X-admin/css/font.css">
    <link rel="stylesheet" href="/static/X-admin/css/xadmin.css">
    <script src="https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
    <script src="/static/X-admin/lib/layui/layui.js" charset="utf-8"></script>

    <script type="text/javascript" src="/static/X-admin/js/xadmin.js"></script>
    <script type="text/javascript" src="/static/X-admin/js/cookie.js"></script>
    <script>
        // 是否開啟刷新記憶tab功能
        // var is_remember = false;
    </script>
    <link id="layuicss-layer" rel="stylesheet"
          href="http://x.xuebingsi.com/x-admin/v2.1/lib/layui/css/modules/layer/default/layer.css?v=3.1.1" media="all">
</head>
<body>
<!-- 頂部開始 -->
<div class="container">
    <div class="logo"><a href="/static/X-admin/index.html">X-admin v2.1</a></div>
    <div class="left_open">
        <i title="展開左側欄" class="iconfont"></i>
    </div>
    <ul class="layui-nav left fast-add" lay-filter="">
        <li class="layui-nav-item">
            <a href="javascript:;">+新增<span class="layui-nav-more"></span></a>
            <dl class="layui-nav-child"> <!-- 二級菜單 -->
                <dd><a onclick="x_admin_show('資訊','https://www.baidu.com')"><i class="iconfont"></i>資訊</a></dd>
                <dd><a onclick="x_admin_show('圖片','https://www.baidu.com')"><i class="iconfont"></i>圖片</a></dd>
                <dd><a onclick="x_admin_show('用戶 最大化','https://www.baidu.com','','',true)"><i class="iconfont"></i>用戶最大化</a>
                </dd>
                <dd><a onclick="x_admin_add_to_tab('在tab打開','https://www.baidu.com',true)"><i class="iconfont"></i>在tab打開</a>
                </dd>
            </dl>
        </li>
        <span class="layui-nav-bar"></span></ul>
    <ul class="layui-nav right" lay-filter="">
        <li class="layui-nav-item">
            <a href="javascript:;">admin<span class="layui-nav-more"></span></a>
            <dl class="layui-nav-child"> <!-- 二級菜單 -->
                <dd><a onclick="x_admin_show('個人信息','http://www.baidu.com')">個人信息</a></dd>
                <dd><a onclick="x_admin_show('切換帳號','http://www.baidu.com')">切換帳號</a></dd>
                <dd><a href="/static/X-admin/login.html">退出</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item to-index"><a href="/">前台首頁</a></li>
        <span class="layui-nav-bar"></span></ul>

</div>
<!-- 頂部結束 -->
<!-- 中部開始 -->
<!-- 左側菜單開始 -->
<div class="left-nav">
    <div id="side-nav">
        <ul id="nav">
            <li>
                <a href="javascript:;">
                    <i class="iconfont"></i>
                    <cite>會員管理</cite>
                    <i class="iconfont nav_right"></i>
                </a>
                <ul class="sub-menu">
                    <li date-refresh="1">
                        <a _href="member-list.html">
                            <i class="iconfont"></i>
                            <cite>會員列表(靜態表格)</cite>

                        </a>
                    </li>
                    <li>
                        <a _href="member-list1.html">
                            <i class="iconfont"></i>
                            <cite>會員列表(動態表格)</cite>

                        </a>
                    </li>
                    <li date-refresh="1">
                        <a _href="member-del.html">
                            <i class="iconfont"></i>
                            <cite>會員刪除</cite>

                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <i class="iconfont"></i>
                            <cite>會員管理</cite>
                            <i class="iconfont nav_right"></i>
                        </a>
                        <ul class="sub-menu">
                            <li>
                                <a _href="xxx.html">
                                    <i class="iconfont"></i>
                                    <cite>會員列表</cite>

                                </a>
                            </li>
                            <li>
                                <a _href="xx.html">
                                    <i class="iconfont"></i>
                                    <cite>會員刪除</cite>

                                </a>
                            </li>
                            <li>
                                <a _href="xx.html">
                                    <i class="iconfont"></i>
                                    <cite>等級管理</cite>

                                </a>
                            </li>

                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <a href="javascript:;">
                    <i class="iconfont"></i>
                    <cite>訂單管理</cite>
                    <i class="iconfont nav_right"></i>
                </a>
                <ul class="sub-menu">
                    <li>
                        <a _href="order-list.html">
                            <i class="iconfont"></i>
                            <cite>訂單列表</cite>
                        </a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="javascript:;">
                    <i class="iconfont"></i>
                    <cite>分類管理</cite>
                    <i class="iconfont nav_right"></i>
                </a>
                <ul class="sub-menu">
                    <li>
                        <a _href="cate.html">
                            <i class="iconfont"></i>
                            <cite>多級分類</cite>
                        </a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="javascript:;">
                    <i class="iconfont"></i>
                    <cite>城市聯動</cite>
                    <i class="iconfont nav_right"></i>
                </a>
                <ul class="sub-menu">
                    <li>
                        <a _href="city.html">
                            <i class="iconfont"></i>
                            <cite>三級地區聯動</cite>
                        </a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="javascript:;">
                    <i class="iconfont"></i>
                    <cite>管理員管理</cite>
                    <i class="iconfont nav_right"></i>
                </a>
                <ul class="sub-menu">
                    <li>
                        <a _href="admin-list.html">
                            <i class="iconfont"></i>
                            <cite>管理員列表</cite>
                        </a>
                    </li>
                    <li>
                        <a _href="admin-role.html">
                            <i class="iconfont"></i>
                            <cite>角色管理</cite>
                        </a>
                    </li>
                    <li>
                        <a _href="admin-cate.html">
                            <i class="iconfont"></i>
                            <cite>權限分類</cite>
                        </a>
                    </li>
                    <li>
                        <a _href="admin-rule.html">
                            <i class="iconfont"></i>
                            <cite>權限管理</cite>
                        </a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="javascript:;">
                    <i class="iconfont"></i>
                    <cite>系統統計</cite>
                    <i class="iconfont nav_right"></i>
                </a>
                <ul class="sub-menu">
                    <li>
                        <a _href="echarts1.html">
                            <i class="iconfont"></i>
                            <cite>拆線圖</cite>
                        </a>
                    </li>
                    <li>
                        <a _href="echarts2.html">
                            <i class="iconfont"></i>
                            <cite>柱狀圖</cite>
                        </a>
                    </li>
                    <li>
                        <a _href="echarts3.html">
                            <i class="iconfont"></i>
                            <cite>地圖</cite>
                        </a>
                    </li>
                    <li>
                        <a _href="echarts4.html">
                            <i class="iconfont"></i>
                            <cite>餅圖</cite>
                        </a>
                    </li>
                    <li>
                        <a _href="echarts5.html">
                            <i class="iconfont"></i>
                            <cite>雷達圖</cite>
                        </a>
                    </li>
                    <li>
                        <a _href="echarts6.html">
                            <i class="iconfont"></i>
                            <cite>k線圖</cite>
                        </a>
                    </li>
                    <li>
                        <a _href="echarts7.html">
                            <i class="iconfont"></i>
                            <cite>熱力圖</cite>
                        </a>
                    </li>
                    <li>
                        <a _href="echarts8.html">
                            <i class="iconfont"></i>
                            <cite>儀表圖</cite>
                        </a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="javascript:;">
                    <i class="iconfont"></i>
                    <cite>圖標字體</cite>
                    <i class="iconfont nav_right"></i>
                </a>
                <ul class="sub-menu">
                    <li>
                        <a _href="unicode.html">
                            <i class="iconfont"></i>
                            <cite>圖標對應字體</cite>
                        </a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="javascript:;">
                    <i class="iconfont"></i>
                    <cite>其它頁面</cite>
                    <i class="iconfont nav_right"></i>
                </a>
                <ul class="sub-menu">
                    <li>
                        <a href="login.html" target="_blank">
                            <i class="iconfont"></i>
                            <cite>登錄頁面</cite>
                        </a>
                    </li>
                    <li>
                        <a _href="error.html">
                            <i class="iconfont"></i>
                            <cite>錯誤頁面</cite>
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>
<!-- <div class="x-slide_left"></div> -->
<!-- 左側菜單結束 -->
<!-- 右側主體開始 -->
<div class="page-content">
    <div class="layui-tab tab" lay-filter="xbs_tab" lay-allowclose="false">
        <ul class="layui-tab-title">
            <li class="home"><i class="layui-icon"></i>我的桌面<i class="layui-icon layui-unselect layui-tab-close">ဆ</i>
            </li>
        </ul>
        <div class="layui-unselect layui-form-select layui-form-selected" id="tab_right">
            <dl>
                <dd data-type="this">關閉當前</dd>
                <dd data-type="other">關閉其它</dd>
                <dd data-type="all">關閉全部</dd>
            </dl>
        </div>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <iframe src="./welcome.html" frameborder="0" scrolling="yes" class="x-iframe"></iframe>
            </div>
        </div>
        <div id="tab_show"></div>
    </div>
</div>
<div class="page-content-bg"></div>
<!-- 右側主體結束 -->
<!-- 中部結束 -->
<!-- 底部開始 -->
<div class="footer">
    <div class="copyright">Copyright ©2017 x-admin v2.3 All Rights Reserved</div>
</div>
<!-- 底部結束 -->
<script>
    //百度統計可去掉
    var _hmt = _hmt || [];
    (function () {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>

</body>
</html>

運維管理后台

Layui柵格系統

定義1行：layui-row

定義行中的列： layui-col-md9

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <!--引入 核心css文件-->
    <link rel="stylesheet" href="/static/layui/layui-v2.5.7/layui/css/layui.css">
</head>
<body>
<!-- 1.固定寬度：兩側有留白效果 -->
<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-md7" style="background-color: #00F7DE">內容的12/7</div>
        <div class="layui-col-md5" style="background-color: #00FF00">內容的12/5</div>
    </div>
    <div class="layui-row">
        <div class="layui-col-md9" style="background-color: #0000FF">
            你的內容 12/9
        </div>
        <div class="layui-col-md3" style="background-color: red">
            你的內容 12/3
        </div>
    </div>
</div>

</body>
</html>

Layui響應式布局

響應式布局就是根據用戶使用設備的分辨率大小，自動調整頁面大小。

柵格的響應式能力，得益於CSS3媒體查詢（Media Queries）的強力支持，從而針對四類不同尺寸的屏幕，進行相應的適配處理

列間距

我們可以通過 layui-col-space10類來設定列與列之間的間距。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <!--引入 核心css文件-->
    <link rel="stylesheet" href="/static/layui/layui-v2.5.7/layui/css/layui.css">
</head>
<body>
<!-- 1.固定寬度：兩側有留白效果 -->
<div class="layui-container">
    <!--設置列與列之間的間距為10px-->
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md4">
            <div style="background-color: #0000FF">1/3</div>
        </div>
        <div class="layui-col-md4">
            <div style="background-color: #0000FF">1/3</div>
        </div>
        <div class="layui-col-md4">
            <div style="background-color: #0000FF">1/3</div>
        </div>
    </div>
</div>
</body>
</html>

列偏移

layui-col-md-offset* 的預設類，從而讓列向右偏移。其中 * 號代表的是偏移占據的列數，可選中為 1 - 12。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <!--引入 核心css文件-->
    <link rel="stylesheet" href="/static/layui/layui-v2.5.7/layui/css/layui.css">
</head>
<body>
<!-- 1.固定寬度：兩側有留白效果 -->
<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-md4">
            4/12
        </div>
            <!--本列占4個柵格，設置本列向右偏移4個柵格-->
        <div class="layui-col-md4 layui-col-md-offset4">
            偏移4列，從而在最右
        </div>
    </div>
</div>
</body>
</html>

柵格嵌套

我們可以把1個行划分為12列，也可以把1列作為一行繼續划分了12列，實現無限嵌套列。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <!--引入 核心css文件-->
    <link rel="stylesheet" href="/static/layui/layui-v2.5.7/layui/css/layui.css">
</head>
<body>
<!-- 1.固定寬度：兩側有留白效果 -->
<div class="layui-container">
    <div class="layui-row layui-col-space5">
        <div class="layui-col-md5">
            <div class="layui-row grid-demo">
                <div class="layui-col-md3">
                    內部列
                </div>
                <div class="layui-col-md9">
                    內部列
                </div>
                <div class="layui-col-md12">
                    內部列
                </div>
            </div>
        </div>
        <div class="layui-col-md7">
            <div class="layui-row grid-demo grid-demo-bg1">
                <div class="layui-col-md12">
                    內部列
                </div>
                <div class="layui-col-md9">
                    內部列
                </div>
                <div class="layui-col-md3">
                    內部列
                </div>
            </div>
        </div>
    </div>

</div>
</body>
</html>

柵格嵌套

按鈕

給任意一種HTML元素設置class="layui-btn"即可建立一個基礎按鈕。

    <!--我們可以向任意元素設置layui-btn -->
    <p class="layui-btn">1111</p>
    <div class="layui-btn">222</div>
    <ul class="layui-btn">333</ul>

通過追加類layui-btn-{type}的class來定義按鈕的風格。

<button type="button" class="layui-btn">標志按鈕</button>
<a href="https://www.baidu.com/" class="layui-btn">可以跳轉的按鈕</a>

調整按鈕大小

尺寸	組合
大型	class="layui-btn layui-btn-lg"
默認	class="layui-btn"
小型	class="layui-btn layui-btn-sm"
迷你	class="layui-btn layui-btn-xs"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <!--引入 核心css文件-->
    <link rel="stylesheet" href="/static/layui/layui-v2.5.7/layui/css/layui.css">
</head>
<body>
<div class="layui-container">
    <button type="button" class="layui-btn layui-btn-lg">大型按鈕</button>
    <button type="button" class="layui-btn layui-btn-sm">小型按鈕</button>
    <button type="button" class="layui-btn layui-btn-xs">迷你型按鈕</button>
</div>

</body>
</html>

按鈕尺寸

調整鈕樣式

名稱	組合
原始	class="layui-btn layui-btn-primary"
默認	class="layui-btn"
百搭	class="layui-btn layui-btn-normal"
暖色	class="layui-btn layui-btn-warm"
警告	class="layui-btn layui-btn-danger"
禁用	class="layui-btn layui-btn-disabled"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <!--引入 核心css文件-->
    <link rel="stylesheet" href="/static/layui/layui-v2.5.7/layui/css/layui.css">
</head>
<body>
<div class="layui-container">
    <button type="button" class="layui-btn">默認按鈕</button>
    <button type="button" class="layui-btn layui-btn-primary">原始樣式</button>
    <button type="button" class="layui-btn layui-btn-normal">百搭樣式</button>
    <button type="button" class="layui-btn layui-btn-warm">暖色</button>
    <button type="button" class="layui-btn layui-btn-danger">警告</button>
    <button type="button" class="layui-btn layui-btn-disabled">禁用</button>

</div>

</body>
</html>

樣式

導航菜單（面包屑）

在設計前端頁面時，用戶通過登錄頁面進行賬號注冊和登錄之后，展示該站點的菜單（功能）是首要考慮問題。

菜單樣式

layui-nav:代表這是個導航菜單

layui-nav-item:代表菜單的子項

layui-this:默認選中的菜單項

設置菜單方向

我們可以選擇不同菜單方向。

1.水平導航

<ul class="layui-nav">默認水平導航菜單的方向，可以通過style="float: right"把某個菜單移動到最右/左側。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui導航</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/layui/layui-v2.5.7/layui/css/layui.css">
</head>
<body>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>水平導航菜單</legend>
</fieldset>

<ul class="layui-nav">
    <!--導航嵌套效果 -->
    <li class="layui-nav-item layui-this">
        <a href="javascript:;">產品</a>
        <dl class="layui-nav-child">
            <dd><a href="">選項1</a></dd>
            <dd><a href="">選項2</a></dd>
            <dd><a href="">選項3</a></dd>
        </dl>
    </li>

    <li class="layui-nav-item">
        <a href="javascript:;">解決方案</a>
        <dl class="layui-nav-child">
            <dd><a href="">移動模塊</a></dd>
            <dd><a href="">后台模版</a></dd>
            <dd class="layui-this"><a href="">選中項</a></dd>
            <dd><a href="">電商平台</a></dd>
        </dl>
    </li>
    <!--無導航嵌套效果 -->
    <li class="layui-nav-item"><a href="">最新活動</a></li>
    <li class="layui-nav-item"><a href="">大數據</a></li>
    <li class="layui-nav-item"><a href="">社區</a></li>
</ul>

<script src="/static/layui/layui-v2.5.7/layui/layui.js" charset="utf-8"></script>
<script>
    layui.use('element', function () {
    });
</script>

</body>
</html>

水平導航

2.垂直導航

給ul標簽增加layui-nav-tree可以讓菜單變成垂直方向。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui導航</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/layui/layui-v2.5.7/layui/css/layui.css">
</head>
<body>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>垂直導航菜單</legend>
</fieldset>
<!--增加layui-nav-tree可以讓菜單變成垂直樣式 -->
<ul class="layui-nav layui-nav-tree ">
    <!--包含二級菜單 -->
    <li class="layui-nav-item layui-this">
        <a href="javascript:;">產品</a>
        <dl class="layui-nav-child">
            <dd><a href="">選項1</a></dd>
            <dd><a href="">選項2</a></dd>
            <dd><a href="">選項3</a></dd>
        </dl>
    </li>
    <!--包含二級菜單 -->
    <li class="layui-nav-item">
        <a href="javascript:;">解決方案</a>
        <dl class="layui-nav-child">
            <dd><a href="">移動模塊</a></dd>
            <dd><a href="">后台模版</a></dd>
            <dd class="layui-this"><a href="">選中項</a></dd>
            <dd><a href="">電商平台</a></dd>
        </dl>
    </li>
    <!--不包含二級菜單 -->
    <li class="layui-nav-item"><a href="">最新活動</a></li>
    <li class="layui-nav-item"><a href="">大數據</a></li>
    <li class="layui-nav-item"><a href="">社區</a></li>
</ul>

<script src="/static/layui/layui-v2.5.7/layui/layui.js" charset="utf-8"></script>
<script>
    layui.use('element', function () {
    });
</script>

</body>
</html>

垂直菜單

選項卡

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui導航</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/layui/layui-v2.5.7/layui/css/layui.css">
</head>
<body>
<div class="layui-tab">
    <!--選項卡的標題 -->
    <ul class="layui-tab-title">
        <li class="layui-this">網站設置</li>
        <li>用戶管理</li>
        <li>權限分配</li>
        <li>商品管理</li>
        <li>訂單管理</li>
    </ul>
    <!--選項卡的內容：順序和選項卡的標題保持一致 -->
    <div class="layui-tab-content">
        <div class="layui-tab-item">內容1</div>
        <div class="layui-tab-item layui-show">
            1. 高度默認自適應，也可以隨意固寬。
            <br>2. Tab進行了響應式處理，所以無需擔心數量多少。
        </div>

        <div class="layui-tab-item">內容3</div>
        <div class="layui-tab-item">內容4</div>
        <div class="layui-tab-item">內容5</div>
    </div>
</div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
    <legend>動態操作Tab</legend>
</fieldset>


<script src="/static/layui/layui-v2.5.7/layui/layui.js" charset="utf-8"></script>
<script>
    //注意引入element模塊，選項卡才可點擊 
    layui.use('element', function () {
    });
</script>

</body>
</html>

默認樣式選項卡

layer

layer可以幫我們打開1個彈出的對話框。

  layer.open({
                title: "搜索條件",
                type: 1,
                area: ['300px', '300px'],
                content: $('#searchSet') //這里content是一個DOM，注意：最好該元素要存放在body最外層，否則可能被其它的相對元素所影響
            });
            $("#confirmCondition").click(issueAction.tableFilter);

並列搜索的UI

   checkCondition: function (item) {
            var boolArry = [];
            var parameterCounter = 0;
            $("#searchArea input").each(function (index, element) {
                if ($(element).val().trim().length >= 1) {
                    parameterCounter += 1;
                    if (item[$(element).attr("name")] == $(element).val().trim())
                        boolArry.push(true)
                }
            });
            if (boolArry.length == parameterCounter && parameterCounter >= 1) {
                return true
            }
        },

前后端交互

layui.use(['form', 'jquery', 'table'], function () {
    var $ = layui.jquery,
        form = layui.form,
        table = layui.table;

    // table表格
    var defaultParams = form.val("corpusQueryForm");
    var corpusTableObject = table.render({
        id: 'corpusTable', elem: '#corpusTable',
        even: false, loading: true, sm: true, height: 'full-105',
        url: '/model/corpus/trainData', method: 'POST', where: defaultParams,
        cols: [[
            {title: '序號', type: 'numbers', align: 'center', width: 70},
            {field: 'itemName', title: '任務名稱', align: 'center', minWidth: 300},
            {field: 'fpName', title: '功能項名稱', align: 'center', minWidth: 180},
            {field: 'fpType', title: '申報類型', align: 'center', width: 100},
            {field: 'auditType', title: '審核類型', align: 'center', width: 100}
        ]]
    });
    // form表單提交，server端響應數據，function(formData) 回調函數把數據渲染到table標簽
    form.on('submit(corpusQueryForm)', function (formData) {
        corpusTableObject.reload({
            where: formData.field, page: {curr: 1}
        });
    });
});

X-admin 后台布局

LayUIdeo

官方文檔

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Layui前端框架介紹前端框架bootstrap和layui的區別有哪些前端框架——Layui（樹形表格treeGrid ）使用Layui前端框架完成簡單的增刪改查 layui經典模塊化前端UI框架初識基於MVC框架layui分頁控件實現前端分頁信息寫法 Layui前端框架中的Button添加Click事件 layui的table前端分頁 layui 框架之秒傳文件 (前端分段 MD5 型成秒傳） layui-前端框架整體使用實例（三級聯動）