精华内容
下载资源
问答
  • 本文实例为大家分享了layui选项卡的具体代码,供大家参考,具体内容如下选项卡默认风格的Tab网站设置用户管理权限分配商品管理订单管理1. 高度默认自适应,也可以随意固宽。2. Tab进行了响应式处理,所以无需担心...

    本文主要为大家详细介绍了layui弹出层效果的实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。

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

    选项卡

    默认风格的Tab

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

    1. 高度默认自适应,也可以随意固宽。


    2. Tab进行了响应式处理,所以无需担心数量多少。

    内容2

    内容3

    内容4

    内容5

    动态操作Tab

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

    内容1

    内容2

    内容3

    内容4

    内容5

    新增Tab项

    删除:商品管理

    切换到:用户管理

    Hash地址定位

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

    点击该Tab的任一标题,观察地址栏变化,再刷新页面。选项卡将会自动定位到上一次切换的项

    内容2

    内容3

    内容4

    内容5

    简洁风格的Tab

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

    内容不一样是要有,因为你可以监听tab事件(阅读下文档就是了)

    内容2

    内容3

    内容4

    内容5

    卡片风格的Tab

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

    默认宽度是相对于父元素100%适应的,你也可以固定宽度。

    2

    3

    4

    5

    6

    当Tab数超过一定宽度

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

    1. 宽度足够,就不会出现右上图标;宽度不够,就会开启展开功能。


    2. 如果你的宽度是自适应的,Tab会自动判断是否需要展开,并适用于所有风格。

    2

    3

    4

    5

    6

    带删除功能的Tab

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

    1. 我个人比较喜欢卡片风格的,所以你发现又是以卡片的风格举例

    2. 删除功能适用于所有风格

    2

    3

    4

    5

    6

    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');

    });

    });

    效果图:

    59c5a894c79b34fad2cb75c250eea32e.png

    相关推荐:

    展开全文
  • layui tab选项卡

    千次阅读 2019-09-27 07:55:38
    layui tab选项卡 我们在做项目的时候会遇到大小模块的划分 在一个页面中布置一个大模块的多个小模块的时候通常就会用到tab选项卡进行小模块间的切换处理 在这里我就给大家介绍layui插件里的tab选项卡的风格设置与...

    layui tab选项卡

    我们在做项目的时候会遇到大小模块的划分
    在一个页面中布置一个大模块的多个小模块的时候通常就会用到tab选项卡进行小模块间的切换处理
    在这里我就给大家介绍layui插件里的tab选项卡的风格设置与使用
    首先我们得引入layui的css与js插件
    如下两图
    在这里插入图片描述
    在这里插入图片描述
    layui tab选项卡的使用是直接给标签赋予相应的类名
    然而赋予相应的类名形成选项卡必需先在脚本中加载layui的element模块才能有效果
    如下图是加载element模块的代码
    在这里插入图片描述
    再如下图制作选项卡代码在这里插入图片描述
    图中layui-tab这个类名代表的意思是选项卡,所以设置选项卡layui-tab类是必需的
    然后layui-tab-title代表的是选项卡的选项名称,
    layui-tab-content代表的是选项卡的选项内容,
    这两个类是配合起来使用的,实现整个选项卡之间的切换
    layui-tab-item类指定了选项卡的内容,你要想显示什么内容就必需设置该类
    选项卡名称与选项卡内容联系也是通过layui-tab-item这个类来实现的
    有了layui-tab-item这个类他就可以通过for循环的方式进行名称与内容的一一对应
    layui-this与layui-show这两个类实现的功能是选项卡的首显示名称与内容
    如下图是完成的选项卡默认风格效果图
    在这里插入图片描述
    当然layui的选项卡还有两种风格的效果图
    首先是简约风格效果图
    在这里插入图片描述
    效果图实现的代码图
    在这里插入图片描述
    从图中可以看出是在默认风格的基础上加了简约风格类layui-tab-brief
    然后是卡片风格的效果图
    在这里插入图片描述
    效果图实现的代码图
    在这里插入图片描述
    从图中可以看出是在默认风格的基础上加了卡片风格类layui-tab-card
    最后layui tab选项卡就讲那么多了
    需要使用或感兴趣的快来试试吧!

    展开全文
  • Layui制作选项卡

    2019-06-17 19:46:09
    1.在做网页的时候,有时候需要做一个选项卡,有些人会觉得很难,可是会用layui插件的伙伴们就会觉得非常简单的了,就如下面的这个选项卡,点击上面的标题时,下面的内容也会跟着标题有相对应的变化。那么该如何去是...
    开发工具与关键技术:MVC、layui
    作者:LJR
    撰写时间:2019年 6 月 12 日
    

    1.在做网页的时候,有时候需要做一个选项卡,有些人会觉得很难,可是会用layui插件的伙伴们就会觉得非常简单的了,就如下面的这个选项卡,点击上面的标题时,下面的内容也会跟着标题有相对应的变化。那么该如何去是实现它呢?
    在这里插入图片描述
    2. 这个选项卡使用layui插件中的element 模块,我们在引用layui中的element插件后,功能才能过显示的。
    (element:页面中有许多元素需要自动去完成一些处理,比如导航菜单的小滑块、Tab的切换等操作,我们往往不需要去单独调用一个方法来开启一项功能,而页面上恰恰有太多这样的小交互,所以我们就可以引用element插件。)
    (1) 整体的框架用一个div包含着它们,这里引用element的layui-tab的类,里面的内容又分为两个部分,一个是上面的标题的内容,另一个是下面的内容区。
    (2)标题部分用ul和li标签实现的,如果想增加选项,直接在后面添加li标签即可。
    (3)内容区的内容,它是一个一个分开的,不过它是有顺序的,它的顺序是跟标题中的li标签相对应的,在内容区里面,我们可以在相对应的div里面设置相对应的内容。

    1.	<div class="layui-tab">
    2.	<ul class="layui-tab-title">
    3.	<li class="layui-this">系统管理</li>
    4.	<li>用户管理</li>
    5.	<li>权限分配</li>
    6.	<li>出账管理</li>
    7.	<li>调度管理</li>
    8.	</ul>
    9.	<div class="layui-tab-content">
    10.	<div class="layui-tab-item layui-show">系统管理内容</div>
    11.	<div class="layui-tab-item">用户管理内容</div>
    12.	<div class="layui-tab-item">权限分配内容</div>
    13.	<div class="layui-tab-item">出账管理内容</div>
    14.	<div class="layui-tab-item">调度管理内容</div>
    15.	</div>
    16.	</div>
    17.	
    18.	<script>
    19.	layui.use('element', function(){
    20.	var element = layui.element;
    21.	
    22.	});
    23.	</script>
    

    这样一个简单的选项卡就完成了。当然如果有必要做选项卡内容的渲染的时候,我们也可以写JavaScript去对它们进行渲染。

    展开全文
  • HTML代码 layui弹出层特效 下拉菜单 垂直菜单 导航条 Tab 选项卡切换跟随
  • 本文实例为大家分享了layui选项卡的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset=UTF-8> <title>选项卡</title> <link rel=...
  • tab选项卡结构:https://www.layui.com/doc/element/tab.html tab页面绑定与切换:https://www.layui.com/doc/modules/element.html 1.新建导航选项 <div class="layui-side layui-bg-black"> <div class...

    此文用于记录layui tab使用
    官方文档:
    tab选项卡结构:https://www.layui.com/doc/element/tab.html
    tab页面绑定与切换:https://www.layui.com/doc/modules/element.html
    1.新建导航选项

            <div class="layui-side layui-bg-black">
                <div class="layui-side-scroll">
                    @*左侧导航区域 *@
                    <ul class="layui-nav layui-nav-tree" lay-filter="LeftItem">
                        <li class="layui-nav-item layui-nav-itemed">
                            <a href="javascript:;" class="link-active" lay-href="/Home/LayoutUi" data-id="1" data-title="模具主数据"><i class="layui-icon layui-icon-home"></i>  模具主数据</a>
                        </li>
                        <li class="layui-nav-item layui-nav-itemed">
                            <a href="javascript:;" class="link-active" lay-href="/Home/MoldRepair" data-id="2" data-title="模具保养查询"><i class="layui-icon layui-icon-auz"></i>   模具保养查询</a>
                        </li>
                    </ul>
                </div>
            </div>
    

    2.页面主体区域创建tab选项卡:tab容器,title标题,content内容

            <div class="layui-body">
                <div class="layui-tab" lay-filter="tables" lay-allowclose="true">
                    <ul class="layui-tab-title"></ul>
                    <div class="layui-tab-content"></div>
                </div>
            </div>
    

    3.js代码切换tab页面

        <script>//JavaScript代码区域
            layui.use(['element','layer','jquery'], function(){
                var element = layui.element;
                var $ = layui.jquery;
                //左侧菜单点击事件
                $('.link-active').on('click', function () {
                    var dataid = $(this);
                    //判断右侧是否有tab
                    if ($('.layui-tab-title li[lay-id]').length <= 0) {
                        tabFunction.tabAdd(dataid.attr('lay-href'), dataid.attr('data-id'), dataid.attr('data-title'));
                    } else {
                        //判断tab是否已经存在
                        var isExist = false;
                        $.each($('.layui-tab-title li[lay-id]'), function () {
                            //筛选id是否存在
                            if ($(this).attr('lay-id') == dataid.attr("data-id")) {
                                isExist = true;
                            }
                        });
                        //不存在,增加tab
                        if (isExist == false) {
                            tabFunction.tabAdd(dataid.attr('lay-href'), dataid.attr('data-id'), dataid.attr('data-title'));
                        }
                    }
                    //转到要打开的tab
                    tabFunction.tabChange(dataid.attr('data-id'));
    
                });
    
    
                //定义函数 绑定增加tab,删除tab,切换tab几项事件
                var tabFunction = {
                    //新增tab url 页面地址 id 对应data-id name标题
                    tabAdd: function (url, id, name) {
                        element.tabAdd('tables', {
                            title: name,
                            content: '<iframe data-frameid="' + id + '" scrolling="auto" frameborder="0" src="' + url + '" style="width:100%;height:800px"></iframe>',
                            id:id
                        });
                    },
                    //根据id切换tab
                    tabChange: function (id) {
                      element.tabChange('tables',id)  
                    },
                    //关闭指定的tab
                    tabDelete: function (id) {
                        element.tabDelete('tables',id)
                    }
                }
            });
        </script>
    

    4.多页面显示:
    在这里插入图片描述

    展开全文
  • 首先需要先导入layui的css样式,这里就不介绍了 <div class="layui-tab layui-tab-card" style="margin:0px 10px;border: none" > <ul id="tabNav" class="layui-tab-title" style="background-color: ...
  • 这篇文章主要为大家详细介绍了layui弹出层效果的实现代码,具有一定的参考和学习layui的价值,对layui感兴趣的小伙伴们可以参考一下本篇文章本文实例为大家分享了layui选项卡的具体代码,供大家参考,具体内容如下...
  • layui控制选项卡切换 tab切换

    千次阅读 2019-11-27 09:42:43
    实现上一步下一步功能。 <ul class="layui-tab-title"> <li class="layui-this" lay-id="1">1.基本信息</li> <li lay-id="2">2.Schema信息</li> <li lay-id="3">3.字段...
  • 原文地址: https://gitee.com/gksyun/codes/qpyv549d6z3bxgma2fn7154 iframe 高度自适应 <... <head> ...link rel="stylesheet" href="./plugins/layui/css/layui.css" media="all">...
  • Hash地址的定位,页面改变某一选项区中的内容后,其他内容同步刷新,内容选项定位在指定的区域; html: <div class="layui-tab layui-flex" lay-filter="test"> <ul class="layui-tab-title"> <...
  • 9_24 Layui选项卡实现 addTab()方法 <script async="" src="/back/layui/layui.js"></script> <script async="" src="/back/layui/layui.all.js"></script> <script> //添加...
  • 想问一下,我现在的tab选项卡在父页面,里面嵌套了一个iframe子页面,我现在希望在子页面点击事件后父页面的选项卡增加一个,要怎么实现layui.use(‘element’, function () { var element = layui.element; $(’...
  • LayUI的Tab选项卡切换显示对应数据

    千次阅读 2019-10-02 15:48:53
    LayUI tab选项卡 + 分页展示 实现 Tab选项卡切换显示对应数据 要求:实现tab选项卡改变的同时展示数据也跟着改变 实现条件: 1、选项卡【官网 – 文档/示例 – 页面元素 – 选项卡】 2、数据表格【官网 – 文档/...
  • layui的tab选项卡

    千次阅读 2019-05-27 08:31:57
    Layui的tab切换,里面居然隐藏着一个关键模块,可以说如果没有这个声明的模块,那切换的功就不能实现。 下面就说说在body里的代码结构:最外层先给一个 class=“layui-tab” 里面有两层,一个是用ul标签装切换的...
  • 事实上,templet 也可以直接是一段 html 内容,如:三、第四种方法(解决Layui选项卡Tab和Layui模板laytpl冲突问题) 一、介绍 在默认情况下,单元格的内容是完全按照数据接口返回的content原样输出的,如果你想对...
  • 描述:左侧菜单menu与右边选项卡tab绑定,点击menu,右边的tab就在iframe展示,反过来,当切换相应的tab时,左边的menu就对应的展开,接下来,我们来实现这个效果。 左边菜单 菜单与选项卡选项互相绑定 $...
  • 实现选项卡新增以及切换、选项卡刷新、选项卡删除(删除其他、删除右侧所有、删除所有)。如有需要可留下邮箱,我给你私发。 参考博文:https://blog.csdn.net/hon_vin/article/details/101676162
  • 选项卡的新增以及切换 选项卡刷新 选项卡各种删除:删除其他、删除右侧所有、删除所有 OK,直接上代码,一些引入文件就不写了,这里只列出主要的代码,有需要的话可以去下载完整源码。 布局: <body class=...
  • 主要为大家详细介绍了layui添加动态菜单与选项卡,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 在很多情况下我们需要使用到历史浏览记录这一个功能,自己制作起来有点麻烦,但是layui的element模块给我们带来了不少的功能,这个模块就是Tab选项卡,例如以下的样式。 这里是侧边导航样式的部分代码,id用于Tab...
  • ​ |- layui-bg-cyan 藏青 ​ |- layui-bg-blue 蓝色 ​ |- layui-bg-cyan 藏青 ​ |- layui-bg-black 雅黑 如何实现自定义背景颜色??? ​ a)新建一个css文件,在文本中定义好一个class选择器,然后设置好背景...
  • layui的tabs选项卡切换刷新页面

    千次阅读 2020-12-28 17:31:37
    默认不会刷新,使用以下方法即可 element.on('tab(tabcard)', ... var src = $(".layui-tab-item.layui-show").find("iframe").attr("src"); $(".layui-tab-item.layui-show").find("iframe").attr("src", src); });
  • 如下图,包含有A和B两个 选项卡,其中A选项卡是一个表格,B选项卡是一个echarts图,选项卡A如下图: 选项卡B如下图: 当点击选项卡B时,改变浏览器窗口大小,再点回选项卡A,会发现A中的数据表格下面的分页栏不见了...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 474
精华内容 189
关键字:

layui实现选项卡