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


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 相关文章推荐
取得传值的函数
Oct 27 Javascript
js 获取屏幕各种宽高的方法(浏览器兼容)
May 15 Javascript
javascript移出节点removeChild()使用介绍
Apr 03 Javascript
jquery form 隐藏的input 选择
Apr 29 Javascript
javascript实现一个数值加法函数
Jun 26 Javascript
JavaScript取得键盘按下方向键是哪个的方法
Aug 04 Javascript
JavaScript中Boolean对象的属性解析
Oct 21 Javascript
JavaScript简单实现合并两个Json对象的方法示例
Oct 16 Javascript
使用JS中的Replace()方法遇到的问题小结
Oct 20 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
vue.js给动态绑定的radio列表做批量编辑的方法
Feb 28 Javascript
vue实现搜索过滤效果
May 28 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数组函数序列 之shuffle()和array_rand() 随机函数使用介绍
2011/10/29 PHP
关于svn冲突的解决方法
2013/06/21 PHP
php强制更新图片缓存的方法
2015/02/11 PHP
Yii2框架BootStrap样式的深入理解
2016/11/07 PHP
解决AJAX中跨域访问出现'没有权限'的错误
2008/08/20 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
2013/08/05 Javascript
JS实现Enter键跳转及控件获得焦点
2013/08/12 Javascript
jQuery图片轮播的具体实现
2013/09/11 Javascript
js动态设置鼠标事件示例代码
2013/10/30 Javascript
轻松创建nodejs服务器(2):nodejs服务器的构成分析
2014/12/18 NodeJs
轻松创建nodejs服务器(9):实现非阻塞操作
2014/12/18 NodeJs
AngularJs  unit-testing(单元测试)详解
2016/09/02 Javascript
微信小程序实现图片预加载组件
2017/01/18 Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
2018/08/08 jQuery
JS中的两种数据类型及实现引用类型的深拷贝的方法
2018/08/12 Javascript
解决JavaScript layui 下拉框不显示的问题
2018/08/14 Javascript
Vue插件从封装到发布的完整步骤记录
2019/02/28 Javascript
elementUI select组件使用及注意事项详解
2019/05/29 Javascript
JS实现从对象获取对象中单个键值的方法示例
2019/06/05 Javascript
基于Electron实现桌面应用开发代码实例
2020/07/07 Javascript
[15:09]DOTA2国际邀请赛采访专栏:Loda
2013/08/06 DOTA
python学习笔记:字典的使用示例详解
2014/06/13 Python
python中使用xlrd、xlwt操作excel表格详解
2015/01/29 Python
python实现根据窗口标题调用窗口的方法
2015/03/13 Python
python基于Tkinter库实现简单文本编辑器实例
2015/05/05 Python
python实现发送邮件及附件功能
2021/03/02 Python
pandas 转换成行列表进行读取与Nan处理的方法
2018/10/30 Python
jupyter notebook 多环境conda kernel配置方式
2020/04/10 Python
基于Tensorflow的MNIST手写数字识别分类
2020/06/17 Python
CSS3旋转——彩色扇子兼容firefox浏览器
2013/06/04 HTML / CSS
世界排名第一的万圣节服装店:Spirit Halloween
2018/10/16 全球购物
医学生自荐信
2013/12/03 职场文书
社区娱乐活动方案
2014/08/21 职场文书
会员卡清退活动总结
2014/08/27 职场文书
2014年高数考试作弊检讨书
2014/12/14 职场文书
Java实现斗地主之洗牌发牌
2021/06/14 Java/Android