900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > layui tab选项卡外部html页面 layui的Tab选项卡知识

layui tab选项卡外部html页面 layui的Tab选项卡知识

时间:2020-04-03 07:08:21

相关推荐

layui tab选项卡外部html页面 layui的Tab选项卡知识

layui的公共类:

lay-filter=" "

事件过滤器。你可能会在很多地方看到他,他一般是用于监听特定的自定义事件。你可以把它看作是一个ID选择器

layui的公共属性:

layui-show属性:显示页面元素

tab选项卡介绍:

tab选项卡,可用于一个界面点击,显示另一个界面的内容 重要

依赖加载组件:element(请注意:必须加载element模块,相关功能才能正常使用,详见:内置组件 - 常用元素操作

基础类:

layui-tab:放在div中定义一个tab选项卡

layui-tab-card:放在带有layui-tab的div后面,表示一个卡片风格的选项卡

layui-tab-title:放在ul中定义一个选项卡菜单

layui-this:放在ul的第一个li中定义选项卡的菜单项

layui-tab-content:放在div中定义选项卡的菜单项的对应的具体内容区域

layui-tab-item:放在带有layui-tab-content的div里面,定义每个菜单项的具体内容

layui-show:放在带有layui-tab-item的div的第一个div里面 进入第一个菜单项页面不用点击直接显示itme区域的内容

lay-allowClose属性:你可以对父层容器(带layui-tab的div)设置属性lay-allowClose="true"来允许Tab选项卡被删除

注意:

值得注意的是,如果存在layui-tab-item的内容区域,在切换时自动定位到对应内容。如果不存在内容区域,则不会定位到对应内容。

你通常需要设置过滤器,通过element模块的监听tab事件来进行切换操作。详见文档

eg:基础tab选项卡

开始使用layui网站设置用户管理权限控制写网站设置界面的内容写用户管理界面的内容写权限控制的页面的内容

//加载模块

layui.use(['layer','compent','element'],function(){

var layer = layui.layer;

var element = layui.element;

layer.msg("风继续吹!");

})

卡片风格选项卡(带可删除的tab)

网站设置用户管理权限分配商品管理订单管理123456

ID焦点定位 重点

hash(哈希)

你可以通过对选项卡设置属性lay-id="xxx"来作为唯一的匹配索引,以用于外部的定位切换,如后台的左侧导航、以及页面地址 hash的匹配。

网站设置用户管理权限分配商品管理订单管理123456

标签:layer,选项卡,Tab,layui,element,tab,div

来源: /nanfengnan/p/14351514.html

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。