说起来比较惭愧，在园子里混了4年，注册账号也有3年多了，一篇博客都没有写过，之前不写博客的原因是：1，觉得自己的水平弱爆了，不敢出来误人子弟，也怕大牛们笑话 2，太懒了，有时候自己搞一点小东西，搞的过程中兴趣盎然，等搞出来以后就觉得索然无味了，懒得花时间再去整理。新的一年不想再抱着这种想法继续下去了，改变就从今天开始。
先介绍一下造轮子的背景:前几天给客户设计原型，是关于一个步骤数据展示及打分的页面，客户可以在此页面上看到APP端配置的工作步骤以及采集到的数据，可以分别给每个步骤打分，在设计的时考虑到一般情况下APP端配置的工作步骤比较多，Web后台进行展示的时候页面会非常长，用户在查看数据及评分的过程中可能会不清楚自己评了几个步骤，还剩下几个步骤未打分，所以想在页面中设计一个类似于导航的东西，通过这个导航可以很清晰直观的看到当前正在浏览的是哪个步骤，同时也可以点击自己感兴趣的步骤直接滚动到该步骤的内容区域。当时灵光一闪，想到了百度百科右侧的目录导航树，不如就用这个效果吧，基本满足自己所想的效果，所以就按照这个效果画了一个原型页面跟客户确认，客户也挺满意的，原型确定之后，任务也就开始了。就先从这个导航树开始吧，从可维护性和复用角度考虑，当时就想直接封装一个插件吧，在功能页面，直接通过JQ的方式调用，这样功能页面的代码量会少一些，所以就有了下面这个小东西，先看一下效果图：
一、控件参数介绍
1，data：为控件生成提供数据源，效果图中的标题1，标题2，标题3等导航名称就是通过该属性的NodeName获取的。
2，css：为导航树容器提供css样式，这个可以根据个人的需求进行调整，如控制导航树的距离浏览器的顶部，右侧的位置。
3，className：该参数主要用于浏览器滚动条滚动到对应内容时，导航树光标定位到对应的节点，默认的值为'.item'。
目前只有这个三个参数，大家可以在使用时根据自己的需求扩展自己想要的参数。
二、控件的调用
1，js部分
以上就是所有的内容了，因本人第一次写博客，同时水平有限，代码实现的也可能也不够优雅、简洁。还请各位看官且看且轻拍。希望能够给您带来一丢丢的帮助。、
附下载链接：http://pan.baidu.com/s/1kVFf8I7
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！
京公网安备 11010802040832号 | 京ICP备19059560号-6 