layui豎版tab選項卡

Heerey525發表於2018-09-20
UI

效果圖

加了點css即可，全部程式碼如下

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://hanlei525.github.io/layui-v2.4.3/layui/css/layui.css"><!--地址為線上引用地址，請替換自己專案中layui路徑-->
    <script src="https://hanlei525.github.io/layui-v2.4.3/layui/layui.js"></script><!--地址為線上引用地址，請替換自己專案中layui路徑-->
    <style>
        .layui-tab-title li{
            display: block;
        }
        .layui-tab-title{
            float: left;
            width: 200px;
        }
        .layui-tab-content{
            float: left;
            width: 500px;
        }
    </style>
</head>
<body>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
    <legend>簡潔風格的Tab</legend>
</fieldset>

<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
    <ul class="layui-tab-title">
        <li class="layui-this">網站設定</li>
        <li>使用者管理</li>
        <li>許可權分配</li>
        <li>商品管理</li>
        <li>訂單管理</li>
    </ul>
    <div class="layui-tab-content" style="height: 100px;">
        <div class="layui-tab-item layui-show">內容不一樣是要有，因為你可以監聽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>

<!-- 注意：如果你直接複製所有程式碼到本地，上述js路徑需要改成你本地的 -->
<script>
    layui.use('element', function(){
        var $ = layui.jquery
            ,element = layui.element; //Tab的切換功能，切換事件監聽等，需要依賴element模組

        //觸發事件
        var active = {
            tabAdd: function(){
                //新增一個Tab項
                element.tabAdd('demo', {
                    title: '新選項'+ (Math.random()*1000|0) //用於演示
                    ,content: '內容'+ (Math.random()*1000|0)
                    ,id: new Date().getTime() //實際使用一般是規定好的id，這裡以時間戳模擬下
                })
            }
            ,tabDelete: function(othis){
                //刪除指定Tab項
                element.tabDelete('demo', '44'); //刪除：“商品管理”


                othis.addClass('layui-btn-disabled');
            }
            ,tabChange: function(){
                //切換到指定Tab項
                element.tabChange('demo', '22'); //切換到：使用者管理
            }
        };

        $('.site-demo-active').on('click', function(){
            var othis = $(this), type = othis.data('type');
            active[type] ? active[type].call(this, othis) : '';
        });

        //Hash地址的定位
        var layid = location.hash.replace(/^#test=/, '');
        element.tabChange('test', layid);

        element.on('tab(test)', function(elem){
            location.hash = 'test='+ $(this).attr('lay-id');
        });

    });
</script>

</body>
</html>

 

相關文章