使用layui实现的左侧菜单栏以及动态操作tab项

最新推荐文章于 2024-08-08 07:55:01 发布

憨虫子

最新推荐文章于 2024-08-08 07:55:01 发布

阅读量1.5w

点赞数 1

分类专栏： layui 文章标签： layui

本文链接：https://blog.csdn.net/luowei85520/article/details/80900548

版权

这篇博客介绍了如何利用layui框架创建一个包含左侧菜单栏和动态操作tab项的界面。重点讲解了layui的nav、tab组件以及element模块的相关方法，如element.tabAdd、element.tabChange、element.tabDelete，并提到了JS中的contextmenu右键菜单和each函数应用。

摘要由CSDN通过智能技术生成

基本界面如下：
基本界面就是如此
首先引入layui.js和layui.css文件，这个不不再多叙述。

自定义CSS样式

<style type="text/css">
   .rightmenu{
    font-size:12px; padding:5px 10px; border-radius: 2px;}
   .rightmenu li{
    line-height:20px; cursor: pointer;}
   ul.layui-tab-title li:first-child i{
    display:none;}
</style>

html代码

<ul class="layui-nav layui-nav-tree layui-nav-side" lay-filter="treenav">
    <li class="layui-nav-item"><a href="javascript:;" class="site-url" data-id="1" data-title="控制台" data-url="http://www.sohu.com">控制台</a></li>
    <li class="layui-nav-item"><a href="javascript:;" class="site-url" data-title="组件" data-id="2" data-url="http://www.baidu.com">组件</