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 相关文章推荐
JavaScript Cookie显示用户上次访问的时间和次数
Dec 08 Javascript
jValidate 基于jQuery的表单验证插件
Dec 12 Javascript
CSS+jQuery实现的一个放大缩小动画效果
Sep 24 Javascript
js中小数转换整数的方法
Jan 26 Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
Mar 18 Javascript
JavaScript保留关键字汇总
Dec 01 Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
Mar 18 Javascript
js 去掉字符串前后空格实现代码集合
Mar 25 Javascript
jQuery中元素选择器(element)简单用法示例
May 14 jQuery
vue中element-ui表格缩略图悬浮放大功能的实例代码
Jun 26 Javascript
浅析vue.js数组的变异方法
Jun 30 Javascript
vue.js路由mode配置之去掉url上默认的#方法
Nov 01 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
采用PHP函数memory_get_usage获取PHP内存清耗量的方法
2011/12/06 PHP
php向js函数传参的几种方法
2014/08/10 PHP
php基于mcrypt的加密解密实例
2014/10/27 PHP
ThinkPHP中关联查询实例
2014/12/02 PHP
php+mysql删除指定编号员工信息的方法
2015/01/14 PHP
2017年最好用的9个php开发工具推荐(超好用)
2017/10/23 PHP
window.name代替cookie的实现代码
2010/11/28 Javascript
FF IE浏览器修改标签透明度的方法
2014/01/27 Javascript
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
2014/06/23 Javascript
JS实现图片无间断滚动代码汇总
2014/07/30 Javascript
JavaScript实现的一个日期格式化函数分享
2014/12/06 Javascript
jQuery对象与DOM对象之间的相互转换
2015/03/03 Javascript
微信小程序 location API接口详解及实例代码
2016/10/12 Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
2016/12/15 Javascript
基于AngularJS的简单使用详解
2017/09/10 Javascript
Three.js如何实现雾化效果示例代码
2017/09/27 Javascript
Vue shopCart 组件开发详解
2018/01/26 Javascript
微信小程序如何实现五星评价功能
2019/10/15 Javascript
JavaScript图片旋转效果实现方法详解
2020/06/28 Javascript
javascript实现简易计算器功能
2020/09/23 Javascript
Javascript Symbol原理及使用方法解析
2020/10/22 Javascript
[13:18]《一刀刀一天》之DOTA全时刻21:详解TI新赛制 A队再露獠牙
2014/06/24 DOTA
[48:05]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 VGJ.T vs VP
2018/03/31 DOTA
[53:15]Mineski vs iG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python使用smtplib模块发送电子邮件的流程详解
2016/06/27 Python
Python+matplotlib+numpy绘制精美的条形统计图
2018/01/02 Python
Python除法之传统除法、Floor除法及真除法实例详解
2019/05/23 Python
pytorch实现mnist分类的示例讲解
2020/01/10 Python
Python实现冒泡排序算法的完整实例
2020/11/04 Python
html5 figure和figcaption的使用方法
2018/09/10 HTML / CSS
Book Depository澳大利亚:世界领先的专业在线书店之一
2018/12/27 全球购物
IdealFit官方网站:女性蛋白质、补充剂和运动服装
2019/03/24 全球购物
工伤赔偿协议书范本
2014/04/15 职场文书
少先队工作总结2015
2015/05/13 职场文书
2016年国庆节宣传标语
2015/11/25 职场文书
Redis高级数据类型Hyperloglog、Bitmap的使用
2021/05/24 Redis