layui选项卡效果实现代码


Posted in Javascript onMay 19, 2017

本文实例为大家分享了layui选项卡的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <link rel="stylesheet" href="layui/css/layui.css">
  </head>
  <body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
 <legend>默认风格的Tab</legend>
</fieldset>

<div class="layui-tab">
 <ul class="layui-tab-title">
  <li class="layui-this">网站设置</li>
  <li>用户管理</li>
  <li>权限分配</li>
  <li>商品管理</li>
  <li>订单管理</li>
 </ul>
 <div class="layui-tab-content">
  <div class="layui-tab-item layui-show">
   1. 高度默认自适应,也可以随意固宽。
   <br>2. 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>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
 <legend>动态操作Tab</legend>
</fieldset>

<div class="layui-tab" lay-filter="demo" lay-allowclose="true">
 <ul class="layui-tab-title">
  <li class="layui-this" lay-id="11">网站设置</li>
  <li lay-id="22">用户管理</li>
  <li lay-id="33">权限分配</li>
  <li lay-id="44">商品管理</li>
  <li lay-id="55">订单管理</li>
 </ul>
 <div class="layui-tab-content">
  <div class="layui-tab-item layui-show">内容1</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>
<div class="site-demo-button" style="margin-bottom: 0;">
 <button class="layui-btn site-demo-active" data-type="tabAdd">新增Tab项</button>
 <button class="layui-btn site-demo-active" data-type="tabDelete">删除:商品管理</button>
 <button class="layui-btn site-demo-active" data-type="tabChange">切换到:用户管理</button>
</div>

<!-- 通用-970*90 -->
<div>
 <ins class="adsbygoogle" style="display:inline-block;width:970px;height:90px" data-ad-client="ca-pub-6111334333458862" data-ad-slot="6835627838"></ins>
</div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
 <legend>Hash地址定位</legend>
</fieldset>
<div class="layui-tab" lay-filter="test">
 <ul class="layui-tab-title">
  <li class="layui-this" lay-id="11">网站设置</li>
  <li lay-id="22">用户管理</li>
  <li lay-id="33">权限分配</li>
  <li lay-id="44">商品管理</li>
  <li lay-id="55">订单管理</li>
 </ul>
 <div class="layui-tab-content">
  <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>

<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>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
 <legend>卡片风格的Tab</legend>
</fieldset>

<div class="layui-tab layui-tab-card">
 <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">默认宽度是相对于父元素100%适应的,你也可以固定宽度。</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 class="layui-tab-item">6</div>
 </div>
</div>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
 <legend>当Tab数超过一定宽度</legend>
</fieldset>

<div class="layui-tab layui-tab-card" style="width: 290px;">
 <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">
   1. 宽度足够,就不会出现右上图标;宽度不够,就会开启展开功能。
   <br>2. 如果你的宽度是自适应的,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 class="layui-tab-item">6</div>
 </div>
</div>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
 <legend>带删除功能的Tab</legend>
</fieldset>

<div class="layui-tab layui-tab-card" lay-allowclose="true">
 <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: 150px;">
  <div class="layui-tab-item layui-show">
   1. 我个人比较喜欢卡片风格的,所以你发现又是以卡片的风格举例
   2. 删除功能适用于所有风格
  </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 class="layui-tab-item">6</div>
 </div>
</div>

<script src="layui/layui.js" charset="utf-8"></script>
<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>

效果图:

layui选项卡效果实现代码

官网Tab

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
window.event快达到全浏览器支持了,以后使用就方便了
Nov 30 Javascript
让浏览器DOM元素最后加载的js方法
Jul 29 Javascript
特殊日期提示功能的实现方法
Jun 16 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
Jun 21 Javascript
JS转换HTML转义符的方法
Aug 24 Javascript
自制微信公众号一键排版工具
Sep 22 Javascript
JS中常用的正则表达式
Sep 29 Javascript
基于BootstrapValidator的Form表单验证(24)
Dec 12 Javascript
微信小程序 switch组件详解及简单实例
Jan 10 Javascript
node简单实现一个更改头像功能的示例
Dec 29 Javascript
Django+vue跨域问题解决的详细步骤
Jan 20 Javascript
layui异步加载table表中某一列数据的例子
Sep 16 Javascript
bootstrap table单元格新增行并编辑
May 19 #Javascript
layui弹出层效果实现代码
May 19 #Javascript
layui分页效果实现代码
May 19 #Javascript
layui前段框架日期控件使用方法详解
May 19 #Javascript
详解Node.js开发中的express-session
May 19 #Javascript
前端页面文件拖拽上传模块js代码示例
May 19 #Javascript
jQuery操作之效果详解
May 19 #jQuery
You might like
基于mysql的论坛(6)
2006/10/09 PHP
php各种编码集详解和以及在什么情况下进行使用
2011/09/11 PHP
解析php中die(),exit(),return的区别
2013/06/20 PHP
php微信公众号开发模式详解
2016/11/28 PHP
用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。
2009/08/15 Javascript
javascript学习笔记(六)数据类型和JSON格式
2014/10/08 Javascript
JavaScript基础语法、dom操作树及document对象
2014/12/02 Javascript
jquery实现网页的页面平滑滚动效果代码
2015/11/02 Javascript
JS 事件绑定、事件监听、事件委托详细介绍
2016/09/28 Javascript
读Javascript高性能编程重点笔记
2016/12/21 Javascript
BootStrap3中模态对话框的使用
2017/01/06 Javascript
canvas实现简易的圆环进度条效果
2017/02/28 Javascript
Webpack打包慢问题的完美解决方法
2017/03/16 Javascript
JS库之wow.js使用方法
2017/09/14 Javascript
js插件实现图片滑动验证码
2020/09/29 Javascript
angularJS实现动态添加,删除div方法
2018/02/27 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
2019/04/10 Javascript
[03:24]CDEC.Y赛前采访 努力备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
[01:07:15]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第二场 1月25日
2021/03/11 DOTA
使用IPython下的Net-SNMP来管理类UNIX系统的教程
2015/04/15 Python
Python基于Pymssql模块实现连接SQL Server数据库的方法详解
2017/07/20 Python
python itchat实现微信自动回复的示例代码
2017/08/14 Python
Python实现二维数组按照某行或列排序的方法【numpy lexsort】
2017/09/22 Python
django ORM之values和annotate使用详解
2020/05/19 Python
python 爬虫请求模块requests详解
2020/12/04 Python
Chinti & Parker官网:奢华羊绒女装和创新针织设计
2021/01/01 全球购物
为数据库创建索引都需要注意些什么
2012/07/17 面试题
Python面试题:如何用Python来发送邮件
2016/03/15 面试题
家长会演讲稿
2014/04/26 职场文书
纪律教育月活动总结
2014/08/26 职场文书
捐书倡议书
2014/08/29 职场文书
2015年政协委员工作总结
2015/05/20 职场文书
详解CSS不受控制的position fixed
2021/05/25 HTML / CSS
MySQL中CURRENT_TIMESTAMP的使用方式
2021/11/27 MySQL
win11电脑关机鼠标灯还亮怎么解决? win11关机后鼠标灯还亮解决方法
2023/01/09 数码科技