详解百度百科目录导航树小插件


Posted in Javascript onJanuary 08, 2017

说起来比较惭愧,在园子里混了4年,注册账号也有3年多了,一篇博客都没有写过,之前不写博客的原因是:1,觉得自己的水平弱爆了,不敢出来误人子弟,也怕大牛们笑话 2,太懒了,有时候自己搞一点小东西,搞的过程中兴趣盎然,等搞出来以后就觉得索然无味了,懒得花时间再去整理。新的一年不想再抱着这种想法继续下去了,改变就从今天开始。

先介绍一下造轮子的背景:前几天给客户设计原型,是关于一个步骤数据展示及打分的页面,客户可以在此页面上看到APP端配置的工作步骤以及采集到的数据,可以分别给每个步骤打分,在设计的时考虑到一般情况下APP端配置的工作步骤比较多,Web后台进行展示的时候页面会非常长,用户在查看数据及评分的过程中可能会不清楚自己评了几个步骤,还剩下几个步骤未打分,所以想在页面中设计一个类似于导航的东西,通过这个导航可以很清晰直观的看到当前正在浏览的是哪个步骤,同时也可以点击自己感兴趣的步骤直接滚动到该步骤的内容区域。当时灵光一闪,想到了百度百科右侧的目录导航树,不如就用这个效果吧,基本满足自己所想的效果,所以就按照这个效果画了一个原型页面跟客户确认,客户也挺满意的,原型确定之后,任务也就开始了。就先从这个导航树开始吧,从可维护性和复用角度考虑,当时就想直接封装一个插件吧,在功能页面,直接通过JQ的方式调用,这样功能页面的代码量会少一些,所以就有了下面这个小东西,先看一下效果图:

详解百度百科目录导航树小插件

一、控件参数介绍

1,data:为控件生成提供数据源,效果图中的标题1,标题2,标题3等导航名称就是通过该属性的NodeName获取的。

2,css:为导航树容器提供css样式,这个可以根据个人的需求进行调整,如控制导航树的距离浏览器的顶部,右侧的位置。

3,className:该参数主要用于浏览器滚动条滚动到对应内容时,导航树光标定位到对应的节点,默认的值为'.item'。

目前只有这个三个参数,大家可以在使用时根据自己的需求扩展自己想要的参数。

二、控件的调用

1,js部分

<script type="text/javascript" src="http://lib.sinaapp.com/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部分

<!--控件容器开始-->
<div id="demo"></div>
<!--控件容器结束-->

怎么样,调用是不是比较简单?

三、实现难点说明

其实整个功能可能最难的地方就在于目录导航树如何准确显示当前用户正在浏览的区域,这个主要的是通过监听滚动条滚动的事件,然后在事件中动态的计算当前哪个元素处于浏览器可视区域的,然后取到该元素的唯一标示(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代码调用时,图标就会显示在对应的节点的后面:

//控制第二个节点显示已完成
tree.showOkIcon(2);

其中tree对象是创建控件后返回的对象,通过该对象的showOkIcon方法,显示小图标,参数为对应节点的ID,效果图如下:

详解百度百科目录导航树小插件

以上就是所有的内容了,因本人第一次写博客,同时水平有限,代码实现的也可能也不够优雅、简洁。还请各位看官且看且轻拍。希望能够给您带来一丢丢的帮助。、

附下载链接:http://pan.baidu.com/s/1kVFf8I7

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript实现上传图片并预览的效果实现代码
Apr 11 Javascript
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
Jun 21 Javascript
JS操作HTML自定义属性的方法
Feb 10 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
Mar 21 Javascript
jQuery实现获取table表格第一列值的方法
Mar 01 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
May 12 Javascript
sencha ext js 6 快速入门(必看)
Jun 01 Javascript
jquery中用函数来设置css样式
Dec 22 Javascript
基于mpvue的小程序项目搭建的步骤
May 22 Javascript
详解微信小程序实现跑马灯效果(附完整代码)
Apr 29 Javascript
微信小程序去除左上角返回键的实现方法
Mar 06 Javascript
关于vue 项目中浏览器跨域的配置问题
Nov 10 Javascript
Three.js基础部分学习
Jan 08 #Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
Jan 08 #Javascript
jQuery实现页面滚动时智能浮动定位
Jan 08 #Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
Jan 08 #Javascript
jquery实现文字单行横移或翻转(上下、左右跳转)
Jan 08 #Javascript
jQuery实现文字自动横移
Jan 08 #Javascript
div实现自适应高度的textarea实现angular双向绑定
Jan 08 #Javascript
You might like
如何使用PHP获取指定日期所在月的开始日期与结束日期
2013/08/01 PHP
php array_values 返回数组的所有值详解及实例
2016/11/12 PHP
php中的钩子理解及应用实例分析
2019/08/30 PHP
Laravel5.1 框架控制器基础用法实例分析
2020/01/04 PHP
根据分辨率不同,调用不同的css文件
2006/08/25 Javascript
flexigrid 类似ext grid的JS表格代码
2010/07/17 Javascript
jQuery的实现原理的模拟代码 -3 事件处理
2010/08/03 Javascript
jquery查找tr td 示例模拟
2014/05/08 Javascript
JavaScript实现Java中StringBuffer的方法
2015/02/09 Javascript
javascript中使用正则表达式清理table样式的代码
2020/04/01 Javascript
浅谈jQuery的offset()方法及示例分享
2015/07/17 Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
2015/12/25 Javascript
js实现延迟加载的几种方法
2017/04/24 Javascript
JS实现的数组去除重复数据算法小结
2017/11/17 Javascript
浅析vue深复制
2018/01/29 Javascript
vue 使用自定义指令实现表单校验的方法
2018/08/28 Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
2019/04/14 Javascript
jQuery实现鼠标移入显示蒙版效果
2020/01/11 jQuery
[49:13]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第一局
2016/02/27 DOTA
[02:05:03]完美世界DOTA2联赛循环赛 LBZS VS Matador BO2 10.28
2020/10/28 DOTA
使用Python发送各种形式的邮件的方法汇总
2015/11/09 Python
Python实现找出数组中第2大数字的方法示例
2018/03/26 Python
python使用turtle库绘制树
2018/06/25 Python
Python数据报表之Excel操作模块用法分析
2019/03/11 Python
python简单实现矩阵的乘,加,转置和逆运算示例
2019/07/10 Python
face++与python实现人脸识别签到(考勤)功能
2019/08/28 Python
python实现七段数码管和倒计时效果
2019/11/23 Python
python正则表达式的懒惰匹配和贪婪匹配说明
2020/07/13 Python
让IE可以变相支持CSS3选择器
2010/01/21 HTML / CSS
美国背景检查、公共记录和人物搜索网站:BeenVerified
2018/02/25 全球购物
勤俭节约倡议书
2014/04/14 职场文书
员工工作表现评语
2014/04/26 职场文书
环保志愿者活动总结
2014/06/27 职场文书
师德承诺书
2015/01/20 职场文书
2016银行求职自荐信
2016/01/28 职场文书
python lambda 表达式形式分析
2022/04/03 Python