没有合适的资源?快使用搜索试试~ 我知道了~
使用layui实现的左侧菜单栏以及动态操作tab项方法
28 下载量 137 浏览量
2020-10-16
10:26:44
上传
评论 3
收藏 70KB PDF 举报
温馨提示
试读
3页
今天小编就为大家分享一篇使用layui实现的左侧菜单栏以及动态操作tab项方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
资源推荐
资源详情
资源评论
使用使用layui实现的左侧菜单栏以及动态操作实现的左侧菜单栏以及动态操作tab项方法项方法
今天小编就为大家分享一篇使用layui实现的左侧菜单栏以及动态操作tab项方法,具有很好的参考价值,希望对大家有所帮助。一起跟
随小编过来看看吧
首先说一下左侧菜单栏首先说一下左侧菜单栏
这是一个最基本的左侧菜单栏,实现的过程很简单,官方的说明文档就有,但是我在导入layer.js之后,直接复制这段官方代码到我的编辑器上时,发
现页面是这样的:
发现,绑定属性的菜单并没有下拉选项,这个问题在我导入layer.all.js之后解决了,而且发现如果是在页面的最上方导入的话也没有下拉选项,只有在
html代码下面导入,才可以显示 ,不知道是什么原因。
下面说重点,动态操作下面说重点,动态操作tab项项
页面截图:页面截图:
tab项右键菜单:项右键菜单:
这里右键菜单的样式并没有做太多的美化。
html代码:(页面中关于引入js和css文件的部分被我省略了,还有要注意jQuery的引入顺序)
<div class="layui-tab layui-tab-card site-demo-button" style="position: relative;">
<ul class="layui-nav layui-nav-tree layui-nav-side">
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;" rel="external nofollow" rel="external nofollow" >默认展开</a>
<dl class="layui-nav-child">
<dd>
<a data-url="a" data-id="11" data-title="选项a" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="site-demo-active" data-type="tabAdd">选项a</a>
</dd>
<dd>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-url="b" data-title="选项b" data-id="22" class="site-demo-active" data-type="tabAdd">选项b</a>
</dd>
<dd>
<a href="">跳转</a>
</dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;" rel="external nofollow" rel="external nofollow" >解决方案</a>
<dl class="layui-nav-child">
<dd>
<a href="">移动模块</a>
</dd>
<dd>
<a href="">后台模版</a>
</dd>
<dd>
<a href="">电商平台</a>
</dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-url="c" data-title="选项c" data-id="33" class="site-demo-active" data-type="tabAdd">产品c</a>
</li>
<li class="layui-nav-item">
<a href="">大数据</a>
</li>
</ul>
<div class="layui-tab" lay-filter="demo" lay-allowclose="true" style="margin-left: 200px;">
<ul class="layui-tab-title">
</ul>
<ul class="rightmenu" style="display: none;position: absolute;">
<li data-type="closethis">关闭当前</li>
<li data-type="closeall">关闭所有</li>
</ul>
<div class="layui-tab-content">
</div>
</div>
</div>
js代码:代码:
layui.use('element', function() {
var $ = layui.jquery;
var element = layui.element; //Tab的切换功能,切换事件监听等,需要依赖element模块
//触发事件
var active = {
//在这里给active绑定几项事件,后面可通过active调用这些事件
tabAdd: function(url,id,name) {
//新增一个Tab项 传入三个参数,分别对应其标题,tab页面的地址,还有一个规定的id,是标签中data-id的属性值
//关于tabAdd的方法所传入的参数可看layui的开发文档中基础方法部分
element.tabAdd('demo', {
title: name,
资源评论
weixin_38734993
- 粉丝: 3
- 资源: 938
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功