layui實(shí)現(xiàn)左側(cè)菜單點(diǎn)擊右側(cè)內(nèi)容區(qū)顯示

zhangyucha0 發(fā)布于2019-08-02 10:18 / 785人閱讀

摘要：這個(gè)前端框架對(duì)后端人員來(lái)說(shuō)提供了極大的方便，很大一部分同學(xué)在剛接觸到這個(gè)框架就迫不及待的要?jiǎng)邮謱?shí)踐了，剛好最近需要開(kāi)發(fā)一個(gè)后臺(tái)管理項(xiàng)目，就拿來(lái)進(jìn)行學(xué)習(xí)和實(shí)踐還沒(méi)有接觸到的同學(xué)可以先通讀一遍文檔，這樣在遇到問(wèn)題的時(shí)候才能夠?qū)ΠY下藥，仔細(xì)研究相

layui這個(gè)前端框架對(duì)后端人員來(lái)說(shuō)提供了極大的方便，很大一部分同學(xué)在剛接觸到這個(gè)框架就迫不及待的要?jiǎng)邮謱?shí)踐了，剛好最近需要開(kāi)發(fā)一個(gè)后臺(tái)管理項(xiàng)目，就拿layui來(lái)進(jìn)行學(xué)習(xí)和實(shí)踐．

還沒(méi)有接觸到的同學(xué)可以先通讀一遍文檔，這樣在遇到問(wèn)題的時(shí)候才能夠?qū)ΠY下藥，仔細(xì)研究相關(guān)的板塊
今天我們先來(lái)學(xué)習(xí)一下使用layui來(lái)實(shí)現(xiàn)左側(cè)點(diǎn)擊菜單，內(nèi)容區(qū)顯示tab

實(shí)驗(yàn)效果

實(shí)現(xiàn)過(guò)程

html代碼




    
    
    
    <?php echo $curTitle;?>
    



    
        XXXX業(yè)務(wù)管理平臺(tái)
        
            
                歡迎光臨，商戶(hù)001
            
            安全退出
        
    

    
        
            
            
                
                    管理員管理
                    
                        
                            管理員列表
                        管理員日志
                    
                
                
                    交易管理
                    
                        存款列表
                        
                        代付列表
                    
                
                
                    系統(tǒng)管理
                    
                        支付API設(shè)置
                        公告設(shè)置
                        控制臺(tái)
                
            
        
    

    
    
        
        
    


    
    ? sunway.tk XXXX業(yè)務(wù)管理平臺(tái)

javascript代碼：

    layui.use(["element", "layer", "jquery"], function () {
        var element = layui.element;
        // var layer = layui.layer;
        var $ = layui.$;
        // 配置tab實(shí)踐在下面無(wú)法獲取到菜單元素
        $(".site-demo-active").on("click", function () {
            var dataid = $(this);
            //這時(shí)會(huì)判斷右側(cè).layui-tab-title屬性下的有l(wèi)ay-id屬性的li的數(shù)目，即已經(jīng)打開(kāi)的tab項(xiàng)數(shù)目
            if ($(".layui-tab-title li[lay-id]").length <= 0) {
                //如果比零小，則直接打開(kāi)新的tab項(xiàng)
                active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
            } else {
                //否則判斷該tab項(xiàng)是否以及存在
                var isData = false; //初始化一個(gè)標(biāo)志，為false說(shuō)明未打開(kāi)該tab項(xiàng) 為true則說(shuō)明已有
                $.each($(".layui-tab-title li[lay-id]"), function () {
                    //如果點(diǎn)擊左側(cè)菜單欄所傳入的id 在右側(cè)tab項(xiàng)中的lay-id屬性可以找到，則說(shuō)明該tab項(xiàng)已經(jīng)打開(kāi)
                    if ($(this).attr("lay-id") == dataid.attr("data-id")) {
                        isData = true;
                    }
                })
                if (isData == false) {
                    //標(biāo)志為false 新增一個(gè)tab項(xiàng)
                    active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
                }
            }
            //最后不管是否新增tab，最后都轉(zhuǎn)到要打開(kāi)的選項(xiàng)頁(yè)面上
            active.tabChange(dataid.attr("data-id"));
        });

        var active = {
            //在這里給active綁定幾項(xiàng)事件，后面可通過(guò)active調(diào)用這些事件
            tabAdd: function (url, id, name) {
                //新增一個(gè)Tab項(xiàng) 傳入三個(gè)參數(shù)，分別對(duì)應(yīng)其標(biāo)題，tab頁(yè)面的地址，還有一個(gè)規(guī)定的id，是標(biāo)簽中data-id的屬性值
                //關(guān)于tabAdd的方法所傳入的參數(shù)可看layui的開(kāi)發(fā)文檔中基礎(chǔ)方法部分
                element.tabAdd("demo", {
                    title: name,
                    content: "",
                    id: id //規(guī)定好的id
                })
                FrameWH();  //計(jì)算ifram層的大小
            },
            tabChange: function (id) {
                //切換到指定Tab項(xiàng)
                element.tabChange("demo", id); //根據(jù)傳入的id傳入到指定的tab項(xiàng)
            },
            tabDelete: function (id) {
                element.tabDelete("demo", id);//刪除
            }
        };
        function FrameWH() {
            var h = $(window).height();
            $("iframe").css("height",h+"px");
        }
    });

實(shí)現(xiàn)邏輯：動(dòng)態(tài)判斷所點(diǎn)擊的菜單元素，利用元素上設(shè)置的data屬性值，在右側(cè)內(nèi)容區(qū)生成頁(yè)面iframe進(jìn)行動(dòng)態(tài)顯示
參考文獻(xiàn)：layui官網(wǎng)

GPU云服務(wù)器云服務(wù)器 js實(shí)現(xiàn)點(diǎn)擊菜單顯示左側(cè)菜單 asp左側(cè)菜單 asp 左側(cè)菜單

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/52262.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

zhangyucha0

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

??導(dǎo)圖整理大廠面試高頻數(shù)組8: 移除元素的雙指針優(yōu)化, 力扣27??

閱讀 2212·2021-09-02 15:11
svg系列：2. svg path實(shí)現(xiàn)圖片路徑動(dòng)畫(huà)

閱讀 1530·2019-08-30 15:43
css常用小技巧

閱讀 2083·2019-08-29 13:48
PWA之 workbox 學(xué)習(xí)

閱讀 2803·2019-08-26 13:55
React-事件機(jī)制雜記

閱讀 2110·2019-08-23 15:09
【劍指offer】4.二叉樹(shù)的遍歷和重建

閱讀 2905·2019-08-23 14:40
「前端早讀君005」開(kāi)源與安全：Ant Design圣誕“彩蛋”事件始末

閱讀 3438·2019-08-23 14:23
JS 總結(jié)之事件循環(huán)

閱讀 2646·2019-08-23 14:20

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

layui實(shí)現(xiàn)左側(cè)菜單點(diǎn)擊右側(cè)內(nèi)容區(qū)顯示

相關(guān)文章