编程 Javascript

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

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

layui选项卡效果实现代码

- Author -

广信_刘东君

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

关于实现代码语法标亮 dp.SyntaxHighlighter

Feb 02 Javascript

jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft

Mar 23 Javascript

Jquery下:nth-child(an+b)的使用注意

May 28 Javascript

js事件冒泡实例分享(已测试)

Apr 23 Javascript

关于两个jQuery(js)特效冲突的bug的解决办法

Sep 04 Javascript

bootstrap3使用bootstrap datetimepicker日期插件

May 24 Javascript

老生常谈JavaScript面向对象基础与this指向问题

Oct 16 Javascript

傻瓜式解读koa中间件处理模块koa-compose的使用

Oct 30 Javascript

Vue 3.0 前瞻Vue Function API新特性体验

Aug 12 Javascript

如何检测JavaScript中的死循环示例详解

Aug 30 Javascript

openlayers实现图标拖动获取坐标

Sep 25 Javascript

vue backtop组件的实现完整代码

Apr 07 Vue.js

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

一个用php实现的获取URL信息的类

2007/01/02 PHP

PHP中限制IP段访问、禁止IP提交表单的代码

2011/04/23 PHP

php清空（删除）指定目录下的文件，不删除目录文件夹的实现代码

2014/09/04 PHP

JSON PHP中,Json字符串反序列化成对象/数组的方法

2018/05/31 PHP

document对象execCommand的command参数介绍

2006/08/01 Javascript

JQuery的ajax获取数据后的处理总结(html,xml,json)

2010/07/14 Javascript

jquery实现居中弹出层代码

2010/08/25 Javascript

javascript学习笔记(十九) 节点的操作实现代码

2012/06/20 Javascript

js实现运动logo图片效果及运动元素对象sportBox使用方法

2012/12/25 Javascript

页面使用密码保护代码

2013/04/10 Javascript

JavaScript多线程详解

2015/08/12 Javascript

jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)

2016/06/07 Javascript

JS图片等比例缩放方法完整示例

2016/08/03 Javascript

jQuery插件版本冲突的处理方法分析

2017/01/16 Javascript

基于vue2.0+vuex+localStorage开发的本地记事本示例

2017/02/28 Javascript

微信小程序本地数据读取实例

2017/04/27 Javascript

使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能

2017/11/27 Javascript

vue中keep-alive的用法及问题描述

2018/05/15 Javascript

axios向后台传递数组作为参数的方法

2018/08/11 Javascript

从vue源码解析Vue.set()和this.$set()

2018/08/30 Javascript

React 组件渲染和更新的实现代码示例

2019/02/21 Javascript

vue实现吸顶、锚点和滚动高亮按钮效果

2019/10/21 Javascript

vue项目中常见问题及解决方案(推荐)

2019/10/21 Javascript

[01:50:49]DOTA2-DPC中国联赛正赛 PSG.LGD vs Aster BO3 第三场 1月24日

2021/03/11 DOTA

Python中列表和元组的相关语句和方法讲解

2015/08/20 Python

Python2.7+pytesser实现简单验证码的识别方法

2017/12/29 Python

解决Pycharm下面出现No R interpreter defined的问题

2018/10/29 Python

Python一句代码实现找出所有水仙花数的方法

2018/11/13 Python

PyCharm 设置SciView工具窗口的方法

2019/01/15 Python

解决Pandas的DataFrame输出截断和省略的问题

2019/02/08 Python

Python的log日志功能及设置方法

2019/07/11 Python

Python二维码生成识别实例详解

2019/07/16 Python

Spring实战之使用util:命名空间简化配置操作示例

2019/12/09 Python

Python pyautogui模块实现鼠标键盘自动化方法详解

2020/02/17 Python

竞选学习委员演讲稿

2014/09/01 职场文书

拾金不昧表扬信

2015/01/16 职场文书