网站全集网页页面翻转导航栏莱单追随转换

2021-04-06 16:03 jianzhan
青岛市门户网网站:青岛市政务服务网、人力资源資源和社会发展确保局、青岛市新闻报道网、半岛花园网、青岛市之窗
青岛市游戏娱乐网站:半岛花园游戏娱乐频道栏目、新闻报道网游戏娱乐频道栏目、中华游戏娱乐
青岛市体育文化网站:青岛市体育文化信息内容网、青岛市高校体育文化学校、体育文化局、青岛市互联网广播节目广播电台体育文化频道栏目
先详细介绍一下造车轮子的情况:前几日给顾客设计方案原形,是有关一个流程数据信息展现及评分的网页页面,顾客能够在此网页页面上见到APP端配备的工作中流程及其收集到的数据信息,能够各自给每一个流程评分,在设计方案的时考虑到到一般状况下APP端配备的工作中流程较为多,Web后台管理开展展现的情况下网页页面会十分长,客户在查询数据信息及得分的全过程中将会会不清晰自身评了好多个流程,还剩余好多个流程未评分,因此想在网页页面中设计方案一个相近于导航栏的物品,根据这一导航栏能够很清楚形象化的见到当今已经访问的是哪一个流程,同时还可以点一下自身很感兴趣的流程立即翻转到该流程的內容地区。那时候灵光一闪,想起了百度搜索百度百科右边的文件目录导航栏树,比不上就用这一实际效果吧,基本考虑自身所感的实际效果,因此就依照这一实际效果画了一个原形网页页面跟顾客确定,顾客也挺令人满意的,原形明确以后,每日任务也就刚开始了。就先从这一导航栏树刚开始吧,从可维护保养性和重复使用视角考虑到,那时候就想立即封裝一个软件吧,在作用网页页面,立即根据JQ的方法启用,那样作用网页页面的编码量会少一些,因此就会有了下边这一小玩意,首先看一下实际效果图:

一、控制主要参数详细介绍

1,data:为控制转化成出示数据信息源,实际效果图上的题目1,题目2,题目3等导航栏名字便是根据该特性的NodeName获得的。

2,css:为导航栏树器皿出示css款式,这一能够依据本人的要求开展调节,如操纵导航栏树的间距访问器的顶端,右边的部位。

3,className:该主要参数关键用以访问器翻转条翻转到相匹配內容时,导航栏树鼠标光标精准定位到相匹配的连接点,默认设置的数值 .item 。

现阶段仅有这一三个主要参数,大伙儿能够在应用时依据自身的要求拓展自身要想的主要参数。

二、控制的启用

1,js一部分

 script type= text/javascript src= js/jquery/1.9.1/jquery-1.9.1.min.js /script 
 script src= NavigationTree.js /script 
 script 
 $(function () {
 //建立控制
 var tree = $( #demo ).navigationTree({
 data: [
 { ID: 1 , NodeName: 题目1 },
 { ID: 2 , NodeName: 题目2 },
 ID: 3 ,
 NodeName: 题目3 ,
 Children: [{ ID: 3.1 , NodeName: 题目3.1 }, { ID: 3.2 , NodeName: 题目3.2 }]
 { ID: 4 , NodeName: 题目4 },
 { ID: 5 , NodeName: 题目5 }
 /script 
2,控制html一部分

1 !--控制器皿刚开始-- 
2 div id= demo /div 
3 !--控制器皿完毕-- 
如何样,启用不是是较为简易?

三、完成难题表明

实际上全部作用将会较难的地区就取决于文件目录导航栏树怎样准确显示信息当今客户已经访问的地区,这一关键的是根据监视翻转条翻转的恶性事件,随后在恶性事件中动态性的测算当今哪一个原素处在访问器可视性地区的,随后取到该原素的唯一标识(ID),随后依据ID在文件目录导航栏树中寻找相匹配的连接点,测算该连接点间距父原素顶端的间距,根据操纵鼠标光标原素的top值,我明白,当我们这句话话讲完的情况下,你可以能依然不太搞清楚,那麼可以看编码,编码有时候候比他人口头上表述的要形象化清楚的多:

//#region翻转条恶性事件
 var $win = $(window);
 var winHeight = $win.height();
 $win.scroll(function () {
 var winScrollTop = $win.scrollTop();
 for (var i = _allElements.length - 1; i = 0; i--) {
 var elmObj = $(_allElements[i]);
 //!(翻转条离顶端的间距 原素在当今主视图的顶端相对性偏位+原素外界高宽比) !(翻转条离顶端的间距 原素在当今主视图的顶端相对性偏位-window目标高宽比/2)
 if (!(winScrollTop elmObj.offset().top + elmObj.outerHeight()) !(winScrollTop elmObj.offset().top - winHeight/2)) {
 $( .arrow ).css({ top: $( [data-id= + elmObj.attr( id ) + ] ).position().top + 3 });
 return false;
 //#endregion
在其中_allElements这一自变量储存的便是根据className主要参数获得的目标数字能量数组,在scroll恶性事件中持续的循环系统该数字能量数组,比照哪一个原素的处在当今可视性的地区内,随后取得该原素的ID,去文件目录树中寻找相匹配的连接点,取得该连接点原素间距其父原素的间距,把该间距根据css给到$( .arrow )目标,该$( .arrow )目标便是右边深蓝色的鼠标光标目标,根据操纵它的top值来调节它显示信息到相匹配连接点的部位。

四、附加小作用

由于我的应用情景中必须可以标识出哪个流程早已评完后分,因此在封裝这一控制的情况下,附加的加了这一小作用,但是默认设置状况下 完成 小标志不是会显示信息的,当根据下列js编码启用时,标志便会显示信息在相匹配的连接点的后边:

1 //操纵第二个连接点显示信息完成
2 tree.showOkIcon(2);
在其中tree目标是建立控制后回到的目标,根据该目标的showOkIcon方式,显示信息小标志,主要参数为相匹配连接点的ID,实际效果图以下:

之上便是全部的內容了,因自己第一次写文章赚钱,同时水准比较有限,编码完成的也将会都不够雅致、简约。还请诸位看官且看且轻拍。期待可以给您产生一丢丢的协助。