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


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 相关文章推荐
jquery下组织javascript代码(js函数化)
Aug 25 Javascript
JavaScript返回0-1之间随机数的方法
Apr 06 Javascript
VUEJS实战之构建基础并渲染出列表(1)
Jun 13 Javascript
easyui messager alert 三秒后自动关闭提示的实例
Nov 07 Javascript
jQuery实现拖动效果的实例代码
Jun 25 jQuery
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
Aug 29 Javascript
JavaScript 数组去重并统计重复元素出现的次数实例
Dec 14 Javascript
详解Vue中watch的高级用法
May 02 Javascript
vue异步加载高德地图的实现
Jun 19 Javascript
15个顶级开源JavaScript框架和库
Oct 10 Javascript
vue动态子组件的两种实现方式
Sep 01 Javascript
ES6新增的数组知识实例小结
May 23 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实现邮件发送并带有附件
2014/01/24 PHP
PHP中is_file不能替代file_exists的理由
2014/03/04 PHP
php empty 函数判断结果为空但实际值却为非空的原因解析
2018/05/28 PHP
js关闭父窗口时关闭子窗口
2013/04/01 Javascript
js中符号转意问题示例探讨
2013/08/19 Javascript
使用 Node.js 做 Function Test实现方法
2013/10/25 Javascript
jquery数组之存放checkbox全选值示例代码
2013/12/20 Javascript
jquery判断至少有一个checkbox被选中的方法
2015/06/05 Javascript
jQuery实现hover合成事件的方法
2015/08/06 Javascript
JS实现的3D拖拽翻页效果代码
2015/10/31 Javascript
Node.js实用代码段之正确拼接Buffer
2016/03/17 Javascript
jQuery实现点击水纹波动动画
2016/04/10 Javascript
简单的js表格操作
2016/09/24 Javascript
JavaScript中浅讲ajax图文详解
2016/11/11 Javascript
jquery mobile移动端幻灯片滑动切换效果
2020/04/15 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
2019/09/14 Javascript
JS前端广告拦截实现原理解析
2020/02/17 Javascript
Node.js API详解之 tty功能与用法实例分析
2020/04/27 Javascript
Vue自定义全局弹窗组件操作
2020/08/11 Javascript
如何手动实现一个 JavaScript 模块执行器
2020/10/16 Javascript
vue实现图书管理系统
2020/12/29 Vue.js
Python实现从URL地址提取文件名的方法
2015/05/15 Python
APIStar:一个专为Python3设计的API框架
2018/09/26 Python
Python3.6安装卸载、执行命令、执行py文件的方法详解
2020/02/20 Python
Python基于pip实现离线打包过程详解
2020/05/15 Python
好莱坞百老汇御用王牌美妆:Koh Gen Do 江原道
2018/04/03 全球购物
STAY JAPAN台湾:预订日本民宿
2018/07/22 全球购物
介绍一下XMLHttpRequest对象的常用方法和属性
2013/05/24 面试题
招聘单位介绍信
2014/01/14 职场文书
文明宿舍获奖感言
2014/02/07 职场文书
会计演讲稿范文
2014/05/23 职场文书
人事专员岗位说明书
2014/07/29 职场文书
调解书格式范本
2015/05/20 职场文书
2019大学生暑期实习心得总结
2019/08/21 职场文书
jquery插件实现搜索历史
2021/04/24 jQuery
Mysql排查分析慢sql之explain实战案例
2022/04/19 MySQL