Layui 基礎記錄

Layui 選單功能

Layui 選單功能操作說明

layui-nav 語法名稱


這是 Layui 所提供的選單功能

語法使用方式


    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>水平导航菜单</legend>
      </fieldset>
       
      <ul class="layui-nav">
        <li class="layui-nav-item"><a href="">最新活动</a></li>
        <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="">大数据</a></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>
      </ul>
    <script type="text/javascript">
        layui.use(['element'],function(){

        })
    </script>

樣版說明


補充說明


備註





參考相關網頁


Layui 選項功能

選項卡功能說明

layui-tab語法名稱


layui-tab 這是選項功能

語法使用方式




<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>默认风格的Tab</legend>
    </fieldset>

    <div class="layui-tab" lay-filter="demo" lay-allowclose="true">
        <ul class="layui-tab-title">
            <li lay-id="1" class="layui-this mydemo">网站设置</li>
            <li lay-id="2" class="mydemo" >用户管理</li>
            <li lay-id="3" class="mydemo" >权限分配</li>
            <li lay-id="4" class="mydemo" >商品管理</li>
            <li lay-id="5" class="mydemo" >订单管理</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                1. 高度默认自适应,也可以随意固宽。
                <br>2. Tab进行了响应式处理,所以无需担心数量多少。
            </div>
            <div class="layui-tab-item">内容2</div>
            <div class="layui-tab-item">内容3</div>
            <div class="layui-tab-item">内容4</div>
            <div class="layui-tab-item">内容5</div>
        </div>
    </div>
    <div class="layui-btn-group">
        <button type="button" class="layui-btn" id="add">增加一個tab</button>
        <button type="button" class="layui-btn" id="change">切換用戶管理</button>
        <button type="button" class="layui-btn" id="delete">刪除商品管理</button>
        <button type="button" class="layui-btn" id="deleteAll">刪除所有tab</button>
    </div>
    <script type="text/javascript">
        layui.use(['element', 'jquery'], function () {
            var $ = layui.jquery;
            var element = layui.element;

            // 新增選項標題
            $("#add").click(function () {
                element.tabAdd('demo', {
                    title: '新增標題'
                    , content: '新增標題內容' //支持传入html
                });

            });
            // 快速切換選項
            $("#change").click(function () {
                element.tabChange('demo', '2');
            });
            // 刪除指定的選項
            $("#delete").click(function () {
                element.tabDelete('demo', '4');
            });
            // 刪除 tab 上所有的選項
            $("#deleteAll").click(function () {
                var lis = $(".mydemo");
                $.each(lis, function (index, item) {
                    var layid = item.getAttribute('lay-id');
                    // alert(layid);
                    element.tabDelete('demo', layid);
                });
            });
        });
    </script>

補充說明


備註





參考相關網頁