白虎 女優 详解百度百科目次导航树小插件
提及来相比愧疚，在园子里混了4年，注册账号也有3年多了，一篇博客皆莫得写过，之前不写博客的原因是：1，认为我方的水平弱爆了，不敢出来误东谈主子弟，也怕大牛们见笑 2，太懒了白虎 女優，有手艺我方搞少量小东西，搞的经过中有滋隽永，等搞出来以后就认为百无廖赖了，懒得花时分再去整理。新的一年不念念再抱着这种念念法继续下去了，改变就从今天运转。
先先容一下造轮子的布景:前几天给客户策动原型，是对于一个法子数据展示及打分的页面，客户不错在此页面上看到APP端竖立的责任法子以及集结到的数据，不错分手给每个法子打分，在策动的时研究到一般情况下APP端竖立的责任法子相比多，Web后台进行展示的手艺页面会卓越长，用户在巡逻数据及评分的经过中可能会不明晰我方评了几个法子，还剩下几个法子未打分，是以念念在页面中策动一个肖似于导航的东西，通过这个导航不错很泄漏直不雅的看到刻下正在浏览的是哪个法子，同期也不错点击我方感风趣的法子凯旋改变到该法子的本体区域。其时灵光一闪，念念到了百度百科右侧的目次导航树，不如就用这个成果吧，基本骄气我方所念念的成果，是以就按照这个成果画了一个原型页面跟客户阐述，客户也挺惬意的，原型细目之后，任务也就运转了。就先从这个导航树运转吧，从可调遣性和复用角度研究，其时就念念凯旋封装一个插件吧，在功能页面，凯旋通过JQ的方式调用，这么功能页面的代码量会少一些，是以就有了底下这个小东西，先看一下成果图：
一、控件参数先容
1，data：为控件生成提供数据源，成果图中的标题1，标题2，标题3等导航称号便是通过该属性的NodeName获得的。
2，css：为导航树容器提供css理论，这个不错字据个东谈主的需求进行调治，如箝制导航树的距离浏览器的顶部，右侧的位置。
3，className：该参数主要用于浏览器改变条改变到对应本体时，导航树光标定位到对应的节点，默许的值为'.item'。
现在只消这个三个参数，寰宇不错在使用时字据我方的需求扩张我方念念要的参数。
二、控件的调用
1，js部分
2，控件html部分
奈何样，调用是不是相比浅薄？
三、收场难点说明
其实通盘功能可能最难的处所就在于目次导航树怎么准确自满刻下用户正在浏览的区域，这个主要的是通过监听改变条改变的事件，然后在事件中动态的计划刻下哪个元素处于浏览器可视区域的，然后取到该元素的独一标示（ID），然后字据ID在目次导航树中找到对应的节点，计划该节点距离父元素顶部的距离，通过箝制光标元素的top值，我知谈，当我这句话说完的手艺，你可能仍然不太显著，那么请看代码，代码有手艺比别东谈主理论评释的要直不雅泄漏的多：
其中_allElements这个变量保存的便是通过className参数得到的对象数组，在scroll事件中不休的轮回该数组，对比哪个元素的处于刻下可视的区域内，然后拿到该元素的ID，去目次树中找到对应的节点，拿到该节点元素距离其父元素的距离，把该距离通过css给到$('.arrow')对象，该$('.arrow')对象便是右侧蓝色的光标对象，通过箝制它的top值来调治它自满到对应节点的位置。
四、颠倒小功能
因为我的使用场景中需要随机标示出阿谁法子也曾评完结分，是以在封装这个控件的手艺，颠倒的加了这个小功能，不外默许情况下“已完成”小图标是不会自满的，当通过以下js代码调用时，图标就会自满在对应的节点的背面：
其中tree对象是创建控件后复返的对象，通过该对象的showOkIcon门径，自满小图标，参数为对应节点的ID，成果图如下：
麻豆 夏晴子
以上便是统统的本体了，因本东谈主第一次写博客，同期水平有限，代码收场的也可能也不够优雅、圣洁。还请列位看官且看且轻拍。但愿随机给您带来一丢丢的匡助。、
附下载贯穿：
以上便是本文的一齐本体白虎 女優，但愿本文的本体对寰宇的学习或者责任能带来一定的匡助，同期也但愿多多扶助剧本之家！
您可能感风趣的著作: jQuery仿写百度百科的目次树 教你用python3字据关节词爬取百度百科的本体 基于Jquery收场仿百度百科右侧导航代码附源码下载 jquery仿百度百科底部浮动导航殊效 python集结百度百科的门径 jQuery+css收场百度百科的页面导航成果
