Layui选项卡制作历史浏览记录的方法


Posted in Javascript onSeptember 28, 2019

在很多情况下我们需要使用到历史浏览记录这一个功能,自己制作起来有点麻烦,但是layui的element模块给我们带来了不少的功能,这个模块就是Tab选项卡,例如以下的样式。

Layui选项卡制作历史浏览记录的方法

这里是侧边导航样式的部分代码,id用于Tab的lay-id,Url_index是自定义属性,用来存放需要跳转到页面路径,span标签里的文本就是用于Tab的标题。

<ul class="sub">
  <li><span id="Organization" Url_index="/SystemManagement/SystemXX/ZZJG">组织结构</span></li>
  <li><span id="Department" Url_index="/SystemManagement/SystemXX/BuMenGuanLi">部门管理</span></li>
  <li><span id="Employee" Url_index="/SystemManagement/SystemXX/YuanGongGuanLi">员工管理</span></li>
  <li><span id="User" Url_index="/SystemManagement/SystemXX/YongHuiGuanLi">用户管理</span></li>
</ul>

这一段是Tab的代码,ul就是存放选项卡标题的,每一个li标签就代表着一个选项,这里面已经有一个li标签,是存放首页的,因为需求需要不能删除首页,i标签存放的是删除的图标,可设定为display:none;隐藏掉。也可以不写当前的这个li直接点击侧边再生成选项。

下面的div是存放内容的我们需要在每一个内容里添加一个子页面进行存放我们点击后跳转到页面。

<div class="layui-tab" lay-filter="Tab_LiShiJiLu" lay-allowClose="true" style="background:#fff;">
  <ul class="layui-tab-title" id="deleteSpan" style="margin:0px 40px 0px 40px;left:0px">
    <li class="layui-this" lay-id="HomePage" id="positionLeft">
     <img src="~/Content/img/3Dpng/png-0060.png" style="width:20px;height:20px;margin-bottom:5px;" />
     <i class="layui-icon layui-unselect layui-tab-close" style="display:none;" οnclick="delTab()">ဆ</i>
    </li>
  </ul>
  <div class="layui-tab-content" id="tab_Size" style="padding:0px;">
    <div class="layui-tab-item layui-show">
     <iframe id="content" scrolling="auto" style="height:630px;" src="/Main/HomePage"></iframe>
    </div>
  </div>
</div>

另外需要声明一个存放已经生成选项卡的id的数组,这个数组要为全局变量,因为后面删除时还需要使用到。

var LiShiLiuLanJiLus = new Array();//保存历史浏览记录

下面是为侧边导航添加点击样式以及添加选项卡的操作。该个方法就是点击侧边导航的内容触发的。

Layui选项卡制作历史浏览记录的方法

添加点样式这一个我就不说了,每一个人的样式不一样,我是通过给他们添加一个我已经写好了的类,判断是否有这个类,如果有就移除,然后给当前点击到的这个标签添加该类名。

然后就是获取点击的需要的内容了,就是上面说的三个值。跳过某个页面,也就是说点击时该页面不用添加到选项卡中。

Layui选项卡制作历史浏览记录的方法

接着就用要使用到刚刚的数组了,用数组判断当前点击的内容是否已经添加到选项卡中。

Layui选项卡制作历史浏览记录的方法

判断如果state状态值为true即为可添加,然后就执行添加选项卡的代码。最后再切换一下选项卡即可。

Layui选项卡制作历史浏览记录的方法

切换选项卡时同时也要切换侧边导航的样式。

Layui选项卡制作历史浏览记录的方法

下面是删除的代码,删除选项卡的同时也要把存放选项卡数据的数组的相应内容删除掉。

Layui选项卡制作历史浏览记录的方法

这样一个历史记录就是完成了。

最后就是全部的js代码

var LiShiLiuLanJiLus = new Array();//保存历史浏览记录
var element;
$(function () {
 //===注意:选项卡 依赖 element 模块,否则无法进行功能性操作
 layui.use(['element'], function () {
   element = layui.element;
 
   //监听选项卡的切换事件
   element.on('tab(Tab_LiShiJiLu)', function (data) {
    //获取lay-id
    var lay_id = $(this).attr("lay-id");
    //为侧边导航添加样式
    if ($("ul.sub li span").hasClass("clickStyle")) {
     $("ul.sub li span.clickStyle").removeClass("clickStyle");
     $("#" + lay_id).addClass("clickStyle");
    }
   });
 
 });
 
 //===为侧边导航添加点击样式&&添加选项卡
 $("ul.sub li span").click(function () {
   //选中侧边导航,为其添加样式
   if ($("ul.sub li span").hasClass("clickStyle")) {
    $("ul.sub li span.clickStyle").removeClass("clickStyle");//清除上一个的样式
   }
   $(this).addClass("clickStyle");//为当前的span加上样式
 
   //获取相应的内容
   var thisOnclickTxt = $(this).text();//获取标题(用于选项卡的标题)
   var thisOnclickId = $(this).prop("id");//获取标签id值(用于选项卡的lay-id值)
   var thisOnclickUrl = $(this).attr("Url_index");//获取跳转到路径
   //跳过该页面
   if (thisOnclickTxt == "锁屏休息") {
    return;
   }
   if (thisOnclickTxt == "注销登陆") {
    return;
   }
 
   //判断是否要添加选项卡
   var state = true;//声明一个状态
   //循环数组内容
   for (var i = 0; i < LiShiLiuLanJiLus.length; i++) {
    //判断判断该选中内容是否存在数组内
    if (thisOnclickId == LiShiLiuLanJiLus[i]) {
     //存在,把状态值改为false
     state = false;
    }
   }
 
   if (state == true) {
    LiShiLiuLanJiLus.push(thisOnclickId);//向数组后面插入内容
    //添加选项
    element.tabAdd('Tab_LiShiJiLu', {//Tab_LiShiJiLu为lay-filter=""相对应的值
      title: thisOnclickTxt + '<i class="layui-icon layui-unselect layui-tab-close" οnclick="delTab()">ဆ</i>',//标题
      content: '<iframe id="content" scrolling="auto" style="height:630px;" src="' + thisOnclickUrl + '"></iframe>', //传如子页面
      id: thisOnclickId,//lay-id
     });
 
    }
 
    //切换选项卡
    element.tabChange('Tab_LiShiJiLu', thisOnclickId);
 
 });
});
 
 //删除选项卡
 function delTab() {
   $(".layui-tab").on("click", function (e) {
    if ($(e.target).is(".layui-tab-close")) {
     var deltab = $(e.target).parent().attr("lay-id");//输出哪个tab被点击,没有值时返回undefined
     element.tabDelete('Tab_LiShiJiLu', deltab); //删除 lay-id="xxx" 的这一项
 
     //循环数组内容
     for (var i = 0; i < LiShiLiuLanJiLus.length; i++) {
      if (deltab == LiShiLiuLanJiLus[i]) {
       LiShiLiuLanJiLus.splice(i, 1);//删除数组的一个元素,i为当前元素在数组内的位置
      }
     }
    }
   });
 }

以上这篇Layui选项卡制作历史浏览记录的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
Mar 21 Javascript
谈谈JavaScript中function多重理解
Aug 28 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
Jan 04 Javascript
JavaScript 数组- Array的方法总结(推荐)
Jul 21 Javascript
关于js二维数组和多维数组的定义声明(详解)
Oct 02 Javascript
微信小程序模板之分页滑动栏
Feb 10 Javascript
详解Vue中添加过渡效果
Mar 20 Javascript
vue 运用mock数据的示例代码
Nov 07 Javascript
jquery实现企业定位式导航效果
Jan 01 jQuery
Vuex的基本概念、项目搭建以及入坑点
Nov 04 Javascript
vue的滚动条插件实现代码
Sep 07 Javascript
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
Nov 24 Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
Sep 28 #Javascript
layui的select联动实现代码
Sep 28 #Javascript
关于layui的下拉搜索框异步加载数据的解决方法
Sep 28 #Javascript
layui的数据表格+springmvc实现搜索功能的例子
Sep 28 #Javascript
layui下拉列表select实现可输入查找的方法
Sep 28 #Javascript
解决layui下拉框监听问题(监听不到值的变化)
Sep 28 #Javascript
使用layui监听器监听select下拉框,事件绑定不成功的解决方法
Sep 28 #Javascript
You might like
B2K与车机的中波PK
2021/03/02 无线电
php session处理的定制
2009/03/16 PHP
图文详解phpstorm配置Xdebug进行调试PHP教程
2016/06/13 PHP
PHP中的浅复制与深复制的实例详解
2017/10/26 PHP
laravel + vue实现的数据统计绘图(今天、7天、30天数据)
2018/07/31 PHP
WEB 浏览器兼容 推荐收藏
2010/05/14 Javascript
editable.js 基于jquery的表格的编辑插件
2011/10/24 Javascript
jQuery页面加载初始化常用的三种方法
2014/06/04 Javascript
js从Cookies里面取值的简单实现
2014/06/30 Javascript
jquery对象和javascript对象即DOM对象相互转换
2014/08/07 Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
2015/07/02 Javascript
js中不同的height, top的区别对比
2015/09/24 Javascript
jQuery文字轮播特效
2017/02/12 Javascript
利用 spin.js 生成等待效果(js 等待效果)
2017/06/25 Javascript
JS实现自定义弹窗功能
2018/08/08 Javascript
[01:46]DOTA2上海特锦赛小组赛英文解说KotlGuy采访
2016/02/27 DOTA
python 中文乱码问题深入分析
2011/03/13 Python
Python中bisect的用法
2014/09/23 Python
Django实现的自定义访问日志模块示例
2017/06/23 Python
DataFrame 将某列数据转为数组的方法
2018/04/13 Python
Python Matplotlib实现三维数据的散点图绘制
2019/03/19 Python
Django 权限认证(根据不同的用户,设置不同的显示和访问权限)
2019/07/24 Python
python @propert装饰器使用方法原理解析
2019/12/25 Python
在win64上使用bypy进行百度网盘文件上传功能
2020/01/02 Python
Windows上安装tensorflow  详细教程(图文详解)
2020/02/04 Python
基于Python把网站域名解析成ip地址
2020/05/25 Python
python的flask框架难学吗
2020/07/31 Python
Python requests HTTP验证登录实现流程
2020/11/05 Python
Lookfantastic香港官网:英国知名美妆购物网站
2018/06/19 全球购物
德国净水壶和滤芯品牌:波尔德PearlCo(家用净水器)
2020/04/29 全球购物
经销商培训邀请函
2014/01/21 职场文书
理发店策划方案
2014/06/05 职场文书
2015初中政教处工作总结
2015/07/21 职场文书
Python中Cookies导出某站用户数据的方法
2021/05/17 Python
Redis Stream类型的使用详解
2021/11/11 Redis
mysql timestamp比较查询遇到的坑及解决
2021/11/27 MySQL