layui选项卡效果实现代码

本文实例为大家分享了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>

效果图:

官网Tab

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

(0)

相关推荐

  • 深入理解jQuery layui分页控件的使用

    $.getJSON( )的使用方法简介 $.getJSON( url [, data ] [, success(data, textStatus, jqXHR) ] ) url是必选参数,表示json数据的地址: data是可选参数,用于请求数据时发送数据参数: success是可参数,这是一个回调函数,用于处理请求到的数据. //内容页面 <br> <div id="notice_div"></div><br> //分页控件 <d

  • jQuery、layer实现弹出层的打开、关闭功能

    打开弹出层: 在list页面带入layer.js 在list页面点击时,弹出form弹出层,list.js: $(".add_category,.update").click(function(){ //弹出框 var doMain = $('.domain_name').val(); layer.open({ shade: [0.5, '#000', false], type: 2, area: ['900px', '530px'], fix: false, //不固定 maxmin

  • layui导航栏实现代码

    本文实例为大家分享了layui水平导航菜单的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>导航与面包屑</title> <link rel="stylesheet" href="layui/css/layui.css"> </head> <

  • 基于LayUI分页和LayUI laypage分页的使用示例

    本文介绍了LayUI分页,LayUI动态分页,LayUI laypage分页,LayUI laypage刷新当前页,分享给大家,具体如下: 效果图:  一.引用js依赖 主要是jquery-1.11.3.min.js 和 layui.all.js , json2.js用来做json对象转换的 <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.11.3.m

  • layui文件上传实现代码

    本文实例为大家分享了layui文件上传的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文件上传</title> <link rel="stylesheet" href="layui/css/layui.css"> <link rel="st

  • layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例

    父层: jsp中: //页面上添加一个隐藏的输入框待用于被子层设置value,从而将子层的数据传递到此页面 <input type="hidden" id="getValue" name="getValue" value="" /> js代码: //设置function,当执行时,弹出子窗口并传递当前窗口名称 //弹出子窗口(选择商家) function choseMerchant() { //获取当前窗口名称 v

  • layui中layer前端组件实现图片显示功能的方法分析

    本文实例讲述了layer前端组件实现图片显示功能的方法.分享给大家供大家参考,具体如下: 实现图片显示功能:layer 1.在这里介绍一种layer前端组件 layer是一款口碑极佳的web弹层组件,她具备全方位的解决方案, 致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富而友好的操作体验. 官网下载地址:http://layer.layui.com/ 或者点击此处本站下载. 里面有具体的使用方法 这里注意几点:在使用layer前端组件之前,我们要引入layer的js文件 <script

  • layui表格实现代码

    本文实例为大家分享了layui基本表格的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>基本表格</title> <link rel="stylesheet" href="layui/css/layui.css"> </head> <bod

  • layui前段框架日期控件使用方法详解

    本文实例为大家分享了layui-日期控件的实现代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>日期</title> <link rel="stylesheet" href="layui/css/layui.css"> </head> <body

  • layui弹出层效果实现代码

    本文实例为大家分享了layui弹出层的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>弹出层</title> <link rel="stylesheet" href="layui/css/layui.css" media="all"> &

随机推荐