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

说起来比较惭愧，在园子里混了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

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！