iis 网站 红,wordpress rss feed,网络加速器哪个好,自己做的网站不能用手机访问框架功能是后台高亮不可缺少的功能#xff0c;基本上所有的后台都需要框架功能#xff0c;下面是我制作好的一个效果图 下面是我的框架里面功能的具体讲解#xff0c;还有完整的代码示例
1.声明的变量
// 声明一个用于判断个人信息显示变量
let myes 0;
// 声明一个用于切…框架功能是后台高亮不可缺少的功能基本上所有的后台都需要框架功能下面是我制作好的一个效果图 下面是我的框架里面功能的具体讲解还有完整的代码示例
1.声明的变量
// 声明一个用于判断个人信息显示变量
let myes 0;
// 声明一个用于切换树形菜单状态的变量
let picture 2;
// 声明一个用于判断信息显示变量
let info 0;// 声明一个树形菜单转换后的数据
let treearr [];
// 声明一个面包屑的数据
let breadcrumbarr [];
// 声明一个请求的数据
let res;
2.树形菜单功能
先通过接口请求获取数据我这里用的是json所以你们想写成接口请求的可以自己改一下
function requests() {$(document).ready(function() {//获取数据 $.ajax({//获取数据链接url: js/ifrom.json,//获取什么类型的数据dataType: json,//成功响应success: function(data) {//让data等于响应回来的数据// 先在面包屑数据push首页的数据breadcrumbarr.push(data[0]);// 使用变量获取数据方便在下面使用res data;//让数组等于转换完的数据treearr tree_menu(data, 0, []);//获取数组show_tree(treearr);// 创建一个新的p元素的jQuery对象var $newParagraph $(div classblock/p);// 获取目标div元素假设它的id是myDivvar $targetDiv $(.treemenu);// 将新的p元素添加到div元素的末尾$targetDiv.append($newParagraph);// 如果存储的这个数据的值为1执行下面的操作if (localStorage.getItem(lock) 1) {// 请求这个函数request();};// 如果存储的这个参数不是undefined执行下面的操作if (localStorage.getItem(i) ! undefined) {// 声明存储获取最后显示页面的数据let paneldata JSON.parse(localStorage.getItem(paneldata));// 获取存储最后的显示页面的下标let i localStorage.getItem(i);// 把之前存储的面包屑数据获取过了重新赋值给面包屑的数组breadcrumbarr JSON.parse(localStorage.getItem(breadcrumbarr));// 请求渲染面包屑显示树形菜单高亮的函数panel(paneldata, i);};},error: function(xhr, status, error) {// 当请求失败时执行的回调函数console.error(请求失败:, status, error);// 可以在这里处理请求失败的情况例如显示错误信息给用户}});});
}
这个函数是在请求接口这个函数里面调用的通过这个函数把接口返回的数据转换成多维的数组结构如果一开始接口返回的解锁多维的数据就不需要使用这个函数
//转换数据
function tree_menu(data, pid, treearr) {//遍历数据for (let i 0; i data.length; i) {//判断data下标的pid是否等于pidif (data[i].pid pid) {//用dtat下标的子节点继续调用函数data[i].children tree_menu(data, data[i].id, []);//把获取到的放入到数组里面treearr.push(data[i]);}}//返回arrreturn treearr;
}
然后通过转换好的数据结构把数据渲染到树形菜单这个div里面这个渲染函数也是在接口请求函数里面调用的但是它在上面这个函数的下面因为要先执行数据转换才能转换好的数据才能让渲染使用渲染出来的才是有子级的内容
//渲染
function show_tree(arrs) {//声明一个字符串先写一个大盒子包起来let str div classtree_wrap;// 获取存储的点击的页面名字let name localStorage.getItem(name);//遍历数组for (let i 0; i arrs.length; i) {//判断它的子级长度大于0if (arrs[i].children) {if (arrs[i].children.length 0) {//拼接它本身拼接子级通过递归继续判断它的子级str div classicon iconsdivimg classtreemenuleft src${arrs[i].icon} alt /${arrs[i].title}/divimg classico src./img/xia.png alt //divdiv styledisplay: none; classshow tree_wrap;str show_tree(arrs[i].children);str /div;} else {if (arrs[i].pid 0) {//拼接它本身 str div classicon onclickpanel(${JSON.stringify(arrs[i]).replace(/\/g,)},${i}) divimg classtreemenuleft src${arrs[i].icon} alt /${arrs[i].title}/div/div;} else {str div classicon onclickpanel(${JSON.stringify(arrs[i]).replace(/\/g,)},${i}) div classchildimg classtreemenuleft src${arrs[i].icon} alt /${arrs[i].title}/div/div;}}} else {//拼接它本身str div classicondivimg classtreemenuleft src${arrs[i].icon} alt /${arrs[i].title}/div/div;}}//拼接结束标签str /div;//渲染到页面上$(.treemenu).html(str);//显示首页的高亮$(.icon).eq(0).addClass(icon-click);//高亮点击事件$(document).ready(function() {$(.icon).on(click, function() {// 移除所有菜单项的 icon-click 类$(.icon).removeClass(icon-click);// 为当前点击的菜单项添加 icon-click 类$(this).addClass(icon-click);});});//返回字符串return str;
}
下面是点击父级显示子级的函数 //点击父级显示子级
$(document).on(click, .icons, function() {//获取子级框架let children $(this).next();//获取图片过渡1s$(this).find(.ico).css(transition, all 0.5s);//判断是否显示if (children.css(display) block) {//滑出children.hide(500);//图片初始化$(this).find(.ico).css(transform, rotate(0deg));} else {//滑入children.show(500);//图片旋转180$(this).find(.ico).css(transform, rotate(180deg));}
});
3.面包屑渲染
面包屑渲染是先通过树形菜单的点击事件获取的
下面是树形菜单的点击事件
//点击渲染面包屑
function panel(paneldata, i) {// 移除所有菜单项的 icon-click 类$(.icon).removeClass(icon-click);//高亮点击事件if (paneldata.id 4) {// 为当前点击的菜单项添加 icon-click 类$(.icon).eq(3).addClass(icon-click);} else if (paneldata.id 6) {// 为当前点击的菜单项添加 icon-click 类$(.icon).eq(5).addClass(icon-click);} else {// 为当前点击的菜单项添加 icon-click 类$(.icon).eq(i).addClass(icon-click);}// 存储一下菜单的名字方便下面使用sessionStorage.setItem(title, paneldata.title)// 如果面包屑数组了吗不存在这个id执行里面的操作if (JSON.stringify(breadcrumbarr).indexOf(JSON.stringify(paneldata.id)) -1) {// 存储过来的数据放入到面包屑的数组里面breadcrumbarr.push(paneldata);}// 获取存储的页面链接sessionStorage.setItem(redirect, paneldata.path);// 在标题页面显示当前所在页面的名字$(#font).html(paneldata.title);// iframe框架的链接改成树形菜单点击的页面链接$(#iframe).attr(src, ./${paneldata.path}.html);// 存储一下点击的整条数据方便在刷新和锁屏解锁之后使用localStorage.setItem(paneldata, JSON.stringify(paneldata));// 存储一下点击的数据下标方便在刷新和锁屏解锁之后使用localStorage.setItem(i, i);// 存储一下面包屑的所有数据方便在刷新和锁屏解锁之后使用localStorage.setItem(breadcrumbarr, JSON.stringify(breadcrumbarr));// 调用渲染面包屑函数apple(breadcrumbarr);
}
通过点击树形菜单把点击的树形菜单的这一条数据获取过来先判断面包屑数组里面是否有这条数据如果没有这条数据把这条数据添加到面包屑的数组里面通过调用面包屑渲染函数把面包屑渲染出来
//面包屑渲染
function apple(data) {// 获取存储的数据的名字let name sessionStorage.getItem(title);//获取存储的链接let redirect sessionStorage.getItem(redirect);// 声明一个字符串let str ;// 循环面包屑的数据for (let i 0; i data.length; i) {// 如果data的id不等于1执行下面的操作if (data[i].id ! 1) {// 字符串拼接面包屑的数据str div classpagees onclickusb(${JSON.stringify(data[i]).replace(/\/g,)}) stylebackground-color:${data[i].titlename?#ecf5ff:}; color:${data[i].titlename?#5ca9ff:}; div ${breadcrumbarr[i].title}/divimg onclickclears(${JSON.stringify(data[i]).replace(/\/g,)}) src./img/ba60394b-1e8c-449d-a439-33b2b9038aff.png alt / /div// iframe框架的链接改成树形菜单点击的页面链接$(iframe).attr(src, ./${redirect}.html);// 改变面包屑的高亮$(.pages).css({color: black,border-bottom: none,background-color: white});}}// 如果信息框显示就让调用函数隐藏if (info 1) {// 调用信息隐藏的函数information();}// 如果个人信息显示调用个人信息函数隐藏if (myes 1) {// 调用个人信息函数my();}// 判断如果存储的名字等于树形菜单数据的下标0的名字下,或者面包屑数组的长度等于0执行下面的代码if (name treearr[0].title || breadcrumbarr.length 0) {// 循环请求接口获取的数据for (let i 0; i res.length; i) {// 如果标签的下标等于存储的名字执行下面的代码if ($(.icon).eq(i).text() name) {// 移除所有菜单项的 icon-click 类 $(.icon).removeClass(icon-click);// 为当前点击的菜单项添加 icon-click 类$(.icon).eq(i).addClass(icon-click);// iframe框架的链接改成树形菜单点击的页面链接$(iframe).attr(src, ./${breadcrumbarr[i].path}.html);}}// 在标题页面显示当前所在页面的名字 $(#font).html(name);// 改变面包屑的高亮$(.pages).css({color: #5ca9ff, // 设置文本颜色background-color: #ecf5ff, // 设置背景颜色});}// 把字符串拼接的数据渲染到面包屑的div里document.getElementsByClassName(navigation)[0].innerHTML str;
}
面包屑点击事件点击面包屑让点击的面包屑显示高亮显示对应的树形菜单显示高亮
//点击面包屑显示高亮
function usb(data) {// 存储点击面包屑的名字localStorage.setItem(name, data.title);// 循环获取一开始请求数据的参数for (let i 0; i res.length; i) {//如果一开始存储数据的数组下标i的id点击数据的id执行下面的操作if (res[i].id data.id) {// 在标题页面显示当前所在页面的名字 $(#font).html(data.title);// 存储一下点击的整条数据方便在刷新和锁屏解锁之后使用localStorage.setItem(paneldata, JSON.stringify(res[i]));// 存储一下点击的数据下标方便在刷新和锁屏解锁之后使用localStorage.setItem(i, i);// iframe框架的链接改成面包屑点击的页面链接$(iframe).attr(src, ./${res[i].path}.html);}}// 判断如果信息显示让他隐藏if (info 1) {// 调用信息显示或者隐藏函数information();}// 如果个人信息显示让他隐藏if (myes 1) {// 调用个人信息显示或者隐藏函数my();}// 循环获取一开始请求数据的参数for (let i 0; i res.length; i) {// 如果icon的下标内容等于点击面包屑内容的名字执行下面的操作if ($(.icon).eq(i).text() data.title) {// 移除所有菜单项的 icon-click 类 $(.icon).removeClass(icon-click);// 为当前点击的菜单项添加 icon-click 类$(.icon).eq(i).addClass(icon-click);}}// 循环面包屑的数组for (let i 0; i breadcrumbarr.length; i) {// 判断面包屑数组的id点击面包屑数据的id执行下面的操作if (breadcrumbarr[i].id data.id) {// 清除面包屑高亮样式$(.pages).css({color: black,border-bottom: none,background-color: white});// 清除行内样式$(.pagees).removeAttr(style);// 清除css的类名$(.pagees).removeClass(crumbs);// 给点击的面包屑数据绑上css的高亮域名$(.pagees).eq(i - 1).addClass(crumbs);}}// 存储面包屑的数组localStorage.setItem(breadcrumbarr, JSON.stringify(breadcrumbarr));
}点击删除按钮删除面包屑事件先要阻止事件的冒泡在循环面包屑的数据判断点击的是哪一条数据使用splice方法删除点击的数据显示面包屑最后一个高亮显示树形菜单跟面包屑数组最后一条数据一样的显示高亮
//点击删除面包屑按钮
function clears(data) {// 阻止事件冒泡event.stopPropagation();// 循环面包屑数组for (let i 0; i breadcrumbarr.length; i) {// 如果面包屑的id等于删除事件的id执行下面的操作if (breadcrumbarr[i].id data.id) {// 使用splice方法删除数据breadcrumbarr.splice(i, 1);// 存储breadcrumbarr数组的最后一个数据的名字sessionStorage.setItem(title, breadcrumbarr[breadcrumbarr.length - 1].title);// 存储breadcrumbarr数组的最后一个数据的链接sessionStorage.setItem(redirect, breadcrumbarr[breadcrumbarr.length - 1].path);}}// 调用面包屑渲染函数页面上也清除这个数据apple(breadcrumbarr);// 声明一个获取面包屑数组的最后一个数据的名字let titleToFind breadcrumbarr[breadcrumbarr.length - 1].title;// 清除树形菜单所有的高亮类名$(.icon).removeClass(icon-click);// 遍历所有使用。icon类名的元素$(.icon).each(function() {// 判断内容是否数组的最后一个数据的名字if ($(this).text() titleToFind) {// 为当前的菜单项添加 icon-click 类$(this).addClass(icon-click);}});// 修改导航栏文字if (breadcrumbarr.length 0) {$(#font).html(breadcrumbarr[breadcrumbarr.length - 1].title);} else {$(#font).html(breadcrumbarr[0].title);}
}
首页的点击事件
// 首页点击事件
function sy() {// 清除树形菜单首页的高量$(.icon).removeClass(icon-click);// 给首页的树形菜单显示高亮$(.icon).eq(0).addClass(icon-click);// 清除面包屑的高亮$(.pagees).removeAttr(style);$(.pagees).removeClass(crumbs);// 设置首页面包屑高亮$(.pages).css({color: #5ca9ff, // 设置文本颜色background-color: #ecf5ff, // 设置背景颜色});// 渲染标题$(#font).html(treearr[0].title);// 把iframe的src路径改成首页路径$(iframe).attr(src, ./home.html);
}4.全屏功能
在当今数字化的网页浏览体验中全屏功能已经成为许多网站和应用提升用户沉浸感与交互性的重要手段。今天让我们深入探讨一个简单而实用的用于实现全屏切换的 JavaScript 函数 ——toggleFullScreen剖析其背后的逻辑与应用场景。
下面是全屏的代码实例
//放大功能
function toggleFullScreen() {if (!document.fullscreenElement) {// 进入全屏document.documentElement.requestFullscreen();} else {// 退出全屏if (document.exitFullscreen) {document.exitFullscreen();}}
}// 绑定一个按钮点击事件来触发全屏功能
document.getElementById(blowup).addEventListener(click, toggleFullScreen);
这个函数是用来实现网页在全屏与非全屏状态之间的转换。首先通过document.fullscreenElement判断当前页面是否处于全屏的状态。如果属性为null代表页面为处于全屏的状态那就调用进入全屏的方法请求将整个页面切换到全屏的模式通过html文档的根元素html,通过它来发起全屏请求可以使整个页面进入全屏展示。
而当document.fullscreenElement不为null时说明页面已经处于全屏的状态判断document.exitFullscreen();这个方法是否存在如果存在就调用该方法来实现退出全屏的操作使页面恢复到正常的非全屏显示状态
5.框架刷新功能
在网页开发与用户交互体验的领域中页面刷新功能是一项常见但又颇具深度的技术点。今天我们将聚焦于一个特定的用于刷新页面且不使用缓存的 JavaScript 函数 ——refreshPage剖析其工作原理、应用场景以及在优化网页体验方面的意义。
让我们先来研究一下刷新功能代码
//刷新页面
// 不使用缓存刷新页面
function refreshPage() {// 刷新iframe的链接$(iframe).attr(src, $(iframe).attr(src));// 不刷新整个页面event.preventDefault();event.stopPropagation();
} 这个函数首先针对页面的iframe元素进行了处理。通过jqurey选择器选中了所有的iframe元素然后利用jqurey里面的attr方法改变它的路径。这一操作看似简单实则巧妙地实现了对 iframe 内容的刷新。由于重新设置了相同的源链接浏览器会重新向服务器请求该 iframe 页面的资源而不是直接使用缓存中的内容从而达到了刷新 iframe 且不依赖缓存的目的。
其次函数中使用了 event.preventDefault(); 和 event.stopPropagation(); 这两个方法。这两个方法通常用于处理事件流在这里它们的作用是阻止默认的页面刷新行为以及阻止事件的冒泡传播。这一步骤非常关键因为如果没有这两个操作函数的执行可能会导致整个页面的常规刷新而不是仅仅刷新 iframe 内容这就违背了函数设计的初衷即实现无缓存的局部页面iframe刷新。
6.监听页面刷新功能
在现代网页开发的复杂世界中有效地处理页面刷新事件对于提供流畅且数据一致的用户体验至关重要。今天我们将深入探讨一段用于监听页面刷新事件并根据情况执行特定操作的 JavaScript 代码揭示其背后的原理、应用场景以及对网页性能和用户体验的影响。
以下是我们要深入研究的刷新代码片段
// 监听页面刷新事件
window.addEventListener(load, function(event) {// 如果点击刷新按钮执行下面if (performance.navigation.type performance.navigation.TYPE_RELOAD) {// 调用树形菜单接口请求的数据requests()} else {}
});
首先window.addEventListener(load,callback) 这行代码用于在页面加载完成后添加一个事件监听器。load事件在整个页面包括所有依赖资源如样式表、脚本、图像等都已加载完成时触发。这确保了我们在处理页面刷新相关逻辑时页面已经处于一个相对稳定且完整的状态避免了因资源未加载完全而导致的错误或不一致性。 在事件监听器的回调函数内部通过performance.navigation.type 属性来判断页面导航的类型。performance.navigation 对象提供了有关页面导航的信息其中 type 属性可以取不同的值来表示页面是如何被导航到当前状态的。当 performance.navigation.type performance.navigation.TYPE_RELOAD时这意味着页面是通过点击浏览器的刷新按钮或者在 JavaScript 中使用 location.reload()方法进行重新加载的。在这种情况下代码会执行 requests()函数这个函数可能是用于向服务器请求树形菜单接口的数据以确保在页面刷新后树形菜单能够显示最新的数据内容与服务器端的数据保持同步。
7.下面是完整的代码示例
// 框架js// 获取提示弹出窗
let tooltip $(.Tooltip)[0]; // 获取提示信息的 DOM 元素
// 获取本地存储登录的数据
let tokens localStorage.getItem(data);// 判断数据如果为null返回登录页
function disconnected() {tokens localStorage.getItem(data);if (tokens null) {// 弹出窗提示tooltip.innerHTML 您已掉线两秒将返回登录页面; // 设置提示信息// 显示弹出窗tooltip.style display:block;// 定时器跳转到登录页setTimeout(function() {console.log(1);// 清除临时存储的数据sessionStorage.clear();// 清除本地存储的数据localStorage.clear();// 跳转到登录页window.location.replace(login.html);}, 2000);}
}// 每五秒执行定时器
setInterval(function() {//判断数据是否丢失如果丢失弹出窗提示跳转到登录页disconnected();// 请求首页接口判断token是否失效showdata();
}, 1000);
// 数据转换
let personal JSON.parse(tokens);
// 获取存储登录页数据里面的id
let uid personal.data.id;
// 获取登录页数据的token
let token personal.data.token;
// 获取本地存储的接口
let dns localStorage.getItem(dns);
// 请求首页接口
function showdata() {$.ajax({type: post,url: dns /spigall/Statis,data: {},headers: {token: token,id: uid},success: function(data) {// 判断token是否过期if (data.code 0) {// 弹出窗显示tooltip.style display:block;// 弹出窗渲染tooltip.innerHTML 您已掉线两秒将返回登录页面; // 设置提示信息、// 定时器跳转到登录页setTimeout(function() {// 清除临时存储的数据sessionStorage.clear();// 清除本地存储的数据localStorage.clear();// 跳转到登录页window.location.replace(login.html);}, 2000);}},error: function(e) { // 请求失败的回调函数console.error(请求失败, e);}})
}
// 如果获取的存储为1跳转到锁屏页面
if (localStorage.getItem(locks) 1) {window.location.replace(lock.html);
}
// 声明一个用于判断个人信息显示变量
let myes 0;
// 声明一个用于切换树形菜单状态的变量
let picture 2;
// 声明一个用于判断信息显示变量
let info 0;// 声明一个树形菜单转换后的数据
let treearr [];
// 声明一个面包屑的数据
let breadcrumbarr [];
// 声明一个请求的数据
let res;
// 调用树形菜单接口请求的数据
requests();function requests() {$(document).ready(function() {//获取数据 $.ajax({//获取数据链接url: js/ifrom.json,//获取什么类型的数据dataType: json,//成功响应success: function(data) {//让data等于响应回来的数据// 先在面包屑数据push首页的数据breadcrumbarr.push(data[0]);// 使用变量获取数据方便在下面使用res data;//让数组等于转换完的数据treearr tree_menu(data, 0, []);//获取数组show_tree(treearr);// 创建一个新的p元素的jQuery对象var $newParagraph $(div classblock/p);// 获取目标div元素假设它的id是myDivvar $targetDiv $(.treemenu);// 将新的p元素添加到div元素的末尾$targetDiv.append($newParagraph);// 如果存储的这个数据的值为1执行下面的操作if (localStorage.getItem(lock) 1) {// 请求这个函数request();};// 如果存储的这个参数不是undefined执行下面的操作if (localStorage.getItem(i) ! undefined) {// 声明存储获取最后显示页面的数据let paneldata JSON.parse(localStorage.getItem(paneldata));// 获取存储最后的显示页面的下标let i localStorage.getItem(i);// 把之前存储的面包屑数据获取过了重新赋值给面包屑的数组breadcrumbarr JSON.parse(localStorage.getItem(breadcrumbarr));// 请求渲染面包屑显示树形菜单高亮的函数panel(paneldata, i);};},error: function(xhr, status, error) {// 当请求失败时执行的回调函数console.error(请求失败:, status, error);// 可以在这里处理请求失败的情况例如显示错误信息给用户}});});
}
// 解开锁屏这个页面的事件
function request() {// 如果存储的面包屑数据不是undefined执行下面的操作if (localStorage.getItem(breadcrumbarr) ! undefined) {// 设置个人信息的显示方式为0 myes 0;// 设置信息的显示方式为0 info 0;// 声明存储获取最后显示页面的数据 let paneldata JSON.parse(localStorage.getItem(paneldata));// 获取存储最后的显示页面的下标let i localStorage.getItem(i);// 把之前存储的面包屑数据获取过来重新赋值给面包屑的数组breadcrumbarr JSON.parse(localStorage.getItem(breadcrumbarr));// 请求渲染面包屑显示树形菜单高亮的函数panel(paneldata, i);// 删除存储的这个值localStorage.removeItem(lock);}
}
//转换数据
function tree_menu(data, pid, treearr) {//遍历数据for (let i 0; i data.length; i) {//判断data下标的pid是否等于pidif (data[i].pid pid) {//用dtat下标的子节点继续调用函数data[i].children tree_menu(data, data[i].id, []);//把获取到的放入到数组里面treearr.push(data[i]);}}//返回arrreturn treearr;
}
//渲染
function show_tree(arrs) {//声明一个字符串先写一个大盒子包起来let str div classtree_wrap;// 获取存储的点击的页面名字let name localStorage.getItem(name);//遍历数组for (let i 0; i arrs.length; i) {//判断它的子级长度大于0if (arrs[i].children) {if (arrs[i].children.length 0) {//拼接它本身拼接子级通过递归继续判断它的子级str div classicon iconsdivimg classtreemenuleft src${arrs[i].icon} alt /${arrs[i].title}/divimg classico src./img/xia.png alt //divdiv styledisplay: none; classshow tree_wrap;str show_tree(arrs[i].children);str /div;} else {if (arrs[i].pid 0) {//拼接它本身 str div classicon onclickpanel(${JSON.stringify(arrs[i]).replace(/\/g,)},${i}) divimg classtreemenuleft src${arrs[i].icon} alt /${arrs[i].title}/div/div;} else {str div classicon onclickpanel(${JSON.stringify(arrs[i]).replace(/\/g,)},${i}) div classchildimg classtreemenuleft src${arrs[i].icon} alt /${arrs[i].title}/div/div;}}} else {//拼接它本身str div classicondivimg classtreemenuleft src${arrs[i].icon} alt /${arrs[i].title}/div/div;}}//拼接结束标签str /div;//渲染到页面上$(.treemenu).html(str);//显示首页的高亮$(.icon).eq(0).addClass(icon-click);//高亮点击事件$(document).ready(function() {$(.icon).on(click, function() {// 移除所有菜单项的 icon-click 类$(.icon).removeClass(icon-click);// 为当前点击的菜单项添加 icon-click 类$(this).addClass(icon-click);});});//返回字符串return str;
}//下拉框的点击事件
$(document).on(click, .icons, function() {//获取子级框架let children $(this).next();//获取图片过渡1s$(this).find(.ico).css(transition, all 0.5s);//判断是否显示if (children.css(display) block) {//滑出children.hide(500);//图片初始化$(this).find(.ico).css(transform, rotate(0deg));} else {//滑入children.show(500);//图片旋转180$(this).find(.ico).css(transform, rotate(180deg));}
});//点击渲染面包屑
function panel(paneldata, i) {// 移除所有菜单项的 icon-click 类$(.icon).removeClass(icon-click);//高亮点击事件if (paneldata.id 4) {// 为当前点击的菜单项添加 icon-click 类$(.icon).eq(3).addClass(icon-click);} else if (paneldata.id 6) {// 为当前点击的菜单项添加 icon-click 类$(.icon).eq(5).addClass(icon-click);} else {// 为当前点击的菜单项添加 icon-click 类$(.icon).eq(i).addClass(icon-click);}// 存储一下菜单的名字方便下面使用sessionStorage.setItem(title, paneldata.title)// 如果面包屑数组了吗不存在这个id执行里面的操作if (JSON.stringify(breadcrumbarr).indexOf(JSON.stringify(paneldata.id)) -1) {// 存储过来的数据放入到面包屑的数组里面breadcrumbarr.push(paneldata);}// 获取存储的页面链接sessionStorage.setItem(redirect, paneldata.path);// 在标题页面显示当前所在页面的名字$(#font).html(paneldata.title);// iframe框架的链接改成树形菜单点击的页面链接$(#iframe).attr(src, ./${paneldata.path}.html);// 存储一下点击的整条数据方便在刷新和锁屏解锁之后使用localStorage.setItem(paneldata, JSON.stringify(paneldata));// 存储一下点击的数据下标方便在刷新和锁屏解锁之后使用localStorage.setItem(i, i);// 存储一下面包屑的所有数据方便在刷新和锁屏解锁之后使用localStorage.setItem(breadcrumbarr, JSON.stringify(breadcrumbarr));// 调用渲染面包屑函数apple(breadcrumbarr);
}//面包屑渲染
function apple(data) {// 获取存储的数据的名字let name sessionStorage.getItem(title);//获取存储的链接let redirect sessionStorage.getItem(redirect);// 声明一个字符串let str ;// 循环面包屑的数据for (let i 0; i data.length; i) {// 如果data的id不等于1执行下面的操作if (data[i].id ! 1) {// 字符串拼接面包屑的数据str div classpagees onclickusb(${JSON.stringify(data[i]).replace(/\/g,)}) stylebackground-color:${data[i].titlename?#ecf5ff:}; color:${data[i].titlename?#5ca9ff:}; div ${breadcrumbarr[i].title}/divimg onclickclears(${JSON.stringify(data[i]).replace(/\/g,)}) src./img/ba60394b-1e8c-449d-a439-33b2b9038aff.png alt / /div// iframe框架的链接改成树形菜单点击的页面链接$(iframe).attr(src, ./${redirect}.html);// 改变面包屑的高亮$(.pages).css({color: black,border-bottom: none,background-color: white});}}// 如果信息框显示就让调用函数隐藏if (info 1) {// 调用信息隐藏的函数information();}// 如果个人信息显示调用个人信息函数隐藏if (myes 1) {// 调用个人信息函数my();}// 判断如果存储的名字等于树形菜单数据的下标0的名字下,或者面包屑数组的长度等于0执行下面的代码if (name treearr[0].title || breadcrumbarr.length 0) {// 循环请求接口获取的数据for (let i 0; i res.length; i) {// 如果标签的下标等于存储的名字执行下面的代码if ($(.icon).eq(i).text() name) {// 移除所有菜单项的 icon-click 类 $(.icon).removeClass(icon-click);// 为当前点击的菜单项添加 icon-click 类$(.icon).eq(i).addClass(icon-click);// iframe框架的链接改成树形菜单点击的页面链接$(iframe).attr(src, ./${breadcrumbarr[i].path}.html);}}// 在标题页面显示当前所在页面的名字 $(#font).html(name);// 改变面包屑的高亮$(.pages).css({color: #5ca9ff, // 设置文本颜色background-color: #ecf5ff, // 设置背景颜色});}// 把字符串拼接的数据渲染到面包屑的div里document.getElementsByClassName(navigation)[0].innerHTML str;
}//点击面包屑显示高亮
function usb(data) {// 存储点击面包屑的名字localStorage.setItem(name, data.title);// 循环获取一开始请求数据的参数for (let i 0; i res.length; i) {//如果一开始存储数据的数组下标i的id点击数据的id执行下面的操作if (res[i].id data.id) {// 在标题页面显示当前所在页面的名字 $(#font).html(data.title);// 存储一下点击的整条数据方便在刷新和锁屏解锁之后使用localStorage.setItem(paneldata, JSON.stringify(res[i]));// 存储一下点击的数据下标方便在刷新和锁屏解锁之后使用localStorage.setItem(i, i);// iframe框架的链接改成面包屑点击的页面链接$(iframe).attr(src, ./${res[i].path}.html);}}// 判断如果信息显示让他隐藏if (info 1) {// 调用信息显示或者隐藏函数information();}// 如果个人信息显示让他隐藏if (myes 1) {// 调用个人信息显示或者隐藏函数my();}// 循环获取一开始请求数据的参数for (let i 0; i res.length; i) {// 如果icon的下标内容等于点击面包屑内容的名字执行下面的操作if ($(.icon).eq(i).text() data.title) {// 移除所有菜单项的 icon-click 类 $(.icon).removeClass(icon-click);// 为当前点击的菜单项添加 icon-click 类$(.icon).eq(i).addClass(icon-click);}}// 循环面包屑的数组for (let i 0; i breadcrumbarr.length; i) {// 判断面包屑数组的id点击面包屑数据的id执行下面的操作if (breadcrumbarr[i].id data.id) {// 清除面包屑高亮样式$(.pages).css({color: black,border-bottom: none,background-color: white});// 清除行内样式$(.pagees).removeAttr(style);// 清除css的类名$(.pagees).removeClass(crumbs);// 给点击的面包屑数据绑上css的高亮域名$(.pagees).eq(i - 1).addClass(crumbs);}}// 存储面包屑的数组localStorage.setItem(breadcrumbarr, JSON.stringify(breadcrumbarr));
}//点击删除面包屑按钮
function clears(data) {// 阻止事件冒泡event.stopPropagation();// 循环面包屑数组for (let i 0; i breadcrumbarr.length; i) {// 如果面包屑的id等于删除事件的id执行下面的操作if (breadcrumbarr[i].id data.id) {// 使用splice方法删除数据breadcrumbarr.splice(i, 1);// 存储breadcrumbarr数组的最后一个数据的名字sessionStorage.setItem(title, breadcrumbarr[breadcrumbarr.length - 1].title);// 存储breadcrumbarr数组的最后一个数据的链接sessionStorage.setItem(redirect, breadcrumbarr[breadcrumbarr.length - 1].path);}}// 调用面包屑渲染函数页面上也清除这个数据apple(breadcrumbarr);// 声明一个获取面包屑数组的最后一个数据的名字let titleToFind breadcrumbarr[breadcrumbarr.length - 1].title;// 清除树形菜单所有的高亮类名$(.icon).removeClass(icon-click);// 遍历所有使用。icon类名的元素$(.icon).each(function() {// 判断内容是否数组的最后一个数据的名字if ($(this).text() titleToFind) {// 为当前的菜单项添加 icon-click 类$(this).addClass(icon-click);}});// 修改导航栏文字if (breadcrumbarr.length 0) {$(#font).html(breadcrumbarr[breadcrumbarr.length - 1].title);} else {$(#font).html(breadcrumbarr[0].title);}
}
// 首页点击事件
function sy() {// 清除树形菜单首页的高量$(.icon).removeClass(icon-click);// 给首页的树形菜单显示高亮$(.icon).eq(0).addClass(icon-click);// 清除面包屑的高亮$(.pagees).removeAttr(style);$(.pagees).removeClass(crumbs);// 设置首页面包屑高亮$(.pages).css({color: #5ca9ff, // 设置文本颜色background-color: #ecf5ff, // 设置背景颜色});// 渲染标题$(#font).html(treearr[0].title);// 把iframe的src路径改成首页路径$(iframe).attr(src, ./home.html);
}//放大功能
function toggleFullScreen() {if (!document.fullscreenElement) {// 进入全屏document.documentElement.requestFullscreen();} else {// 退出全屏if (document.exitFullscreen) {document.exitFullscreen();}}
}// 绑定一个按钮点击事件来触发全屏功能
document.getElementById(blowup).addEventListener(click, toggleFullScreen);//刷新页面
// 不使用缓存刷新页面
function refreshPage() {// 刷新iframe的链接$(iframe).attr(src, $(iframe).attr(src));// 不刷新整个页面event.preventDefault();event.stopPropagation();
}// 退出登录函数
function quit() {// 清除所有的本地存储localStorage.clear();// 清除所有的临时存储sessionStorage.clear();// 返回登录页window.location.replace(login.html);
}
// 获取存储的个人信息
let data JSON.parse(localStorage.getItem(data));
//树形菜单只显示图表的函数
function tree_hover(arrs) {//声明一个字符串先写一个大盒子包起来let str div classtree_wrap;// 使用变量获取存储的数据名字let name localStorage.getItem(name);//遍历数组for (let i 0; i arrs.length; i) {//判断它的子级长度大于0if (arrs[i].children) {// 如果数据有子级执行下面的操作if (arrs[i].children.length 0) {//拼接它本身拼接子级通过递归继续判断它的子级str div classicon icons${arrs[i].title}img classico src./img/jiantou.png alt //divdiv styledisplay: none; classshow;str tree_hover(arrs[i].children);str /div;} else {if (arrs[i].pid 0) {//拼接它本身 str div classicon onclickpanel(${JSON.stringify(arrs[i]).replace(/\/g,)}) img classtreemenulefts src${arrs[i].icon} alt /${arrs[i].title}/div;} else {str div classicon onclickpanel(${JSON.stringify(arrs[i]).replace(/\/g,)}) ${arrs[i].title}/div;}}} else {//拼接它本身str div classiconimg classtreemenulefts src${arrs[i].icon} alt /${arrs[i].title}/div;}}//拼接结束标签str /div;//渲染到页面上$(.treeicon).html(str);//返回字符串return str;
}function tree() {// 点击管理图片切换只显示图片状态if (picture 1) {// 显示第一个框架$(.background).css(display, block);// 隐藏第二个框架$(.backgrounds).css(display, none);// 调整左边的或者宽度$(.framework).css(width, 87.5%);show_tree(treearr);// 改变它的状态picture 2;} else {//隐藏第一个框架$(.background).css(display, none);// 显示第二个框架$(.backgrounds).css(display, block);// 调整左边的或者宽度$(.framework).css(width, 96%);// 声明一个数组let arrs [];// 让数组调用树形菜单的数组arrs treearr;// 字符串拼接let str div classtree_wraps;let name localStorage.getItem(name);// 循环拼接数据for (let i 0; i arrs.length; i) {if (arrs[i].children arrs[i].children.length 0) {str div classicones icos iconsdiv img classtreemenulefts title${arrs[i].title} src${arrs[i].icon} alt //divdiv class icon-text ;str show_treeto(arrs[i].children);str /div/div;} else {str div classicones onclickpanel(${JSON.stringify(arrs[i]).replace(/\/g,)})img classtreemenulefts title${arrs[i].title} src${arrs[i].icon} alt /div classicon-text${arrs[i].title}/div/div;}}str /div;// 渲染到这个div里面$(.treemenus).html(str);// 改变它的状态picture 1;}
};//渲染
function show_treeto(arrs) {//声明一个字符串先写一个大盒子包起来let str div classtree_wraps;let name localStorage.getItem(name);//遍历数组for (let i 0; i arrs.length; i) {//判断它的子级长度大于0if (arrs[i].children) {if (arrs[i].children.length 0) {//拼接它本身拼接子级通过递归继续判断它的子级str div class iconsimg classtreemenulefts src./img/${arrs[i].icon}.png alt /${arrs[i].title}img classico src./img/jiantou.png alt //divdiv styledisplay: none; classshow;str show_treeto(arrs[i].children);str /div;} else {if (arrs[i].pid 0) {//拼接它本身 str div onclickpanel(${JSON.stringify(arrs[i]).replace(/\/g,)}) img src./img/${arrs[i].icon}.png alt /${arrs[i].title}/div;} else {str div classicos onclickpanel(${JSON.stringify(arrs[i]).replace(/\/g,)}) ${arrs[i].title}/div;}}}}//拼接结束标签str /div;//渲染到页面上$(.treemenu).html(str);//返回字符串return str;
}// 点击锁屏函数
function lock() {// 存储一个数据为1localStorage.setItem(locks, 1);// 创建一个新的状态对象newState它包含了两个属性// pageTitle属性用于表示页面标题这里设置为lock.html// pageContent属性用于描述页面的内容这里设置了相关的描述字符串var newState {pageTitle: lock.html,pageContent: 这是新的页面内容相关描述};// 使用history.replaceState方法来更新浏览器历史记录中的当前状态// 第一个参数newState就是上面定义的新状态对象它包含了页面相关的一些状态信息// 第二个参数新页面标题是一个可选的标题参数用于在某些浏览器的历史记录中展示相关标题不过实际支持情况因浏览器而异// 第三个参数lock.html指定了与该历史记录状态关联的URL路径当用户点击浏览器的前进/后退按钮时可能会用到这个路径信息history.replaceState(newState, 新页面标题, lock.html);// 使用location.reload方法来重新加载当前页面这会导致页面重新从服务器获取资源如果是无缓存情况// 或者从缓存中重新加载页面内容如果有可用缓存常用于需要更新页面显示状态的场景location.reload();
}// 请求个人接口
individual();
function individual() {$.ajax({url: dns spigall/amend,method: POST,dataType: json,headers: {token: personal.data.token,id: personal.data.id},data: {id: personal.data.id},success: function(data) {// 渲染个人信息$(#myico).attr(src, ${dns}${data.data.img});$(#myicos).attr(src, ${dns}${data.data.img});$(#myicoss).attr(src, ${dns}${data.data.img});$(#myicoes).attr(src, ${dns}${data.data.img});$(#myname).html(data.data.name);$(#mynames).html(data.data.name);$(#my).html(data.data.name);$(#sex).html(data.data.sex 1 ? 男 : 女);$(#sexs).html(data.data.sex 1 ? 男 : 女);$(#tel).html(data.data.tel);$(#tels).html(data.data.tel);$(#account).html(data.data.tel);$(#accounts).html(data.data.tel);$(#pass).html(data.data.password);$(#passes).html(data.data.password);},error: function(xhr, status, error) {// 当请求失败时执行的回调函数console.error(请求失败:, status, error);// 可以在这里处理请求失败的情况例如显示错误信息给用户}});
}
// 消息
function information() {// 如果参数为0显示信息隐藏个人信息if (info 0) {$(.information-box).show();$(.my-information-box).hide();$(#info).css({color: white,background-color: rgb(97, 161, 201)});$(#infos).css({color: ,background-color: });info 1;myes 0;// 如果参数为1隐藏信息} else if (info 1) {$(.information-box).hide();$(#info).css({color: ,background-color: });info 0;}
}// 我的信息function my() {// 如果参数为0显示个人信息隐藏信息if (myes 0) {$(.information-box).hide();$(.my-information-box).show();$(#infos).css({color: white,background-color: rgb(97, 161, 201)});$(#info).css({color: ,background-color: });myes 1;info 0;// 如果参数为1隐藏个人信息} else if (myes 1) {$(#infos).css({color: ,background-color: });$(#infos).css({color: ,background-color: });$(.my-information-box).hide();myes 0;}
}// 个人页面的点击事件
function mys() {// iframe框架的链接改成我的的页面链接$(#iframe).attr(src, ./my.html);
}
// 用点击其他地方关闭信息和个人信息弹出窗
function hides() {$(.my-information-box).hide();$(.information-box).hide();$(#infos).css({color: ,background-color: });$(#info).css({color: ,background-color: });myes 0;info 0;
}// 监听页面刷新事件
window.addEventListener(load, function(event) {// 如果点击刷新按钮执行下面if (performance.navigation.type performance.navigation.TYPE_RELOAD) {// 调用树形菜单接口请求的数据requests()} else {}
});
