首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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 相关文章推荐
jquery checkbox全选、取消全选实现代码
Mar 05 Javascript
js点击事件链接的问题解决
Apr 25 Javascript
js读取json的两种常用方法示例介绍
Oct 19 Javascript
运用jQuery定时器的原理实现banner图片切换
Oct 22 Javascript
jquery实现简单的轮换出现效果实例
Jul 23 Javascript
jQuery实现的导航动画效果(附demo源码)
Apr 01 Javascript
jQuery Easyui datagrid editor为combobox时指定数据源实例
Dec 19 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
Feb 03 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
Jul 10 Javascript
JavaScript中如何对多维数组(矩阵)去重的实现
Dec 04 Javascript
基于vue+element实现全局loading过程详解
Jul 10 Javascript
JS中队列和双端队列实现及应用详解
Sep 29 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
调频(4) FM(4) 电磁辐射(1) LW(1) 调幅(1) ad hoc(1) SWL(1) 发报机(1) SW(1) GWEN(1)
You might like
php数组应用之比较两个时间的相减排序
2008/08/18 PHP
PHP 枚举类型的管理与设计知识点总结
2020/02/13 PHP
用JavaScript实现动画效果的方法
2013/07/20 Javascript
js使用for循环查询数组中是否存在某个值
2014/08/12 Javascript
超棒的响应式布局jQuery插件Freetile.js
2014/11/17 Javascript
JQuery复制DOM节点的方法
2015/06/11 Javascript
location.hash保存页面状态的技巧
2016/04/28 Javascript
模拟javascript中的sort排序(简单实例)
2016/08/17 Javascript
详解angular2实现ng2-router 路由和嵌套路由
2017/03/24 Javascript
深入理解Angularjs中$http.post与$.post
2017/05/19 Javascript
深究AngularJS如何获取input的焦点（自定义指令）
2017/06/12 Javascript
通过button将form表单的数据提交到action层的实例
2017/09/08 Javascript
图片懒加载imgLazyLoading.js使用详解
2020/09/15 Javascript
vue-cli常用设置总结
2018/02/24 Javascript
webpack vue项目开发环境局域网访问方法
2018/03/20 Javascript
Vue-Cli 3.0 中配置高德地图的两种方式
2019/06/19 Javascript
js get和post请求实现代码解析
2020/02/06 Javascript
[03:05]DOTA2英雄基础教程 嗜血狂魔
2013/12/10 DOTA
python-opencv在有噪音的情况下提取图像的轮廓实例
2017/08/30 Python
python使用magic模块进行文件类型识别方法
2018/12/08 Python
Python中函数参数匹配模型详解
2019/06/09 Python
python 回溯法模板详解
2020/02/26 Python
Django+Celery实现动态配置定时任务的方法示例
2020/05/26 Python
Noon埃及：埃及在线购物
2019/11/26 全球购物
教师岗位聘任书范文
2014/03/29 职场文书
小学生国旗下演讲稿
2014/04/25 职场文书
安全生产月演讲稿
2014/05/09 职场文书
公务员党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
2014年环保工作总结
2014/11/26 职场文书
员工评语范文
2014/12/31 职场文书
三八红旗手主要事迹材料
2015/11/04 职场文书
教师个人教学反思
2016/02/23 职场文书
教你用Python matplotlib库制作简单的动画
2021/06/11 Python
Python中glob库实现文件名的匹配
2021/06/18 Python
MYSQL 运算符总结
2021/11/11 MySQL
Python Django项目和应用的创建详解
2021/11/27 Python