說(shuō)起來(lái)比較慚愧，在園子里混了4年，注冊(cè)賬號(hào)也有3年多了，一篇博客都沒(méi)有寫(xiě)過(guò)，之前不寫(xiě)博客的原因是：1，覺(jué)得自己的水平弱爆了，不敢出來(lái)誤人子弟，也怕大牛們笑話 2，太懶了，有時(shí)候自己搞一點(diǎn)小東西，搞的過(guò)程中興趣盎然，等搞出來(lái)以后就覺(jué)得索然無(wú)味了，懶得花時(shí)間再去整理。新的一年不想再抱著這種想法繼續(xù)下去了，改變就從今天開(kāi)始。

先介紹一下造輪子的背景:前幾天給客戶設(shè)計(jì)原型，是關(guān)于一個(gè)步驟數(shù)據(jù)展示及打分的頁(yè)面，客戶可以在此頁(yè)面上看到APP端配置的工作步驟以及采集到的數(shù)據(jù)，可以分別給每個(gè)步驟打分，在設(shè)計(jì)的時(shí)考慮到一般情況下APP端配置的工作步驟比較多，Web后臺(tái)進(jìn)行展示的時(shí)候頁(yè)面會(huì)非常長(zhǎng)，用戶在查看數(shù)據(jù)及評(píng)分的過(guò)程中可能會(huì)不清楚自己評(píng)了幾個(gè)步驟，還剩下幾個(gè)步驟未打分，所以想在頁(yè)面中設(shè)計(jì)一個(gè)類(lèi)似于導(dǎo)航的東西，通過(guò)這個(gè)導(dǎo)航可以很清晰直觀的看到當(dāng)前正在瀏覽的是哪個(gè)步驟，同時(shí)也可以點(diǎn)擊自己感興趣的步驟直接滾動(dòng)到該步驟的內(nèi)容區(qū)域。當(dāng)時(shí)靈光一閃，想到了百度百科右側(cè)的目錄導(dǎo)航樹(shù)，不如就用這個(gè)效果吧，基本滿足自己所想的效果，所以就按照這個(gè)效果畫(huà)了一個(gè)原型頁(yè)面跟客戶確認(rèn)，客戶也挺滿意的，原型確定之后，任務(wù)也就開(kāi)始了。就先從這個(gè)導(dǎo)航樹(shù)開(kāi)始吧，從可維護(hù)性和復(fù)用角度考慮，當(dāng)時(shí)就想直接封裝一個(gè)插件吧，在功能頁(yè)面，直接通過(guò)JQ的方式調(diào)用，這樣功能頁(yè)面的代碼量會(huì)少一些，所以就有了下面這個(gè)小東西，先看一下效果圖：

一、控件參數(shù)介紹

1，data：為控件生成提供數(shù)據(jù)源，效果圖中的標(biāo)題1，標(biāo)題2，標(biāo)題3等導(dǎo)航名稱(chēng)就是通過(guò)該屬性的NodeName獲取的。

2，css：為導(dǎo)航樹(shù)容器提供css樣式，這個(gè)可以根據(jù)個(gè)人的需求進(jìn)行調(diào)整，如控制導(dǎo)航樹(shù)的距離瀏覽器的頂部，右側(cè)的位置。

3，className：該參數(shù)主要用于瀏覽器滾動(dòng)條滾動(dòng)到對(duì)應(yīng)內(nèi)容時(shí)，導(dǎo)航樹(shù)光標(biāo)定位到對(duì)應(yīng)的節(jié)點(diǎn)，默認(rèn)的值為'.item'。

目前只有這個(gè)三個(gè)參數(shù)，大家可以在使用時(shí)根據(jù)自己的需求擴(kuò)展自己想要的參數(shù)。

二、控件的調(diào)用

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 () {
  //創(chuàng)建控件
  var tree = $('#demo').navigationTree({
  data: [
   { ID: '1', NodeName: '標(biāo)題1' },
   { ID: '2', NodeName: '標(biāo)題2' },
   {
   ID: '3',
   NodeName: '標(biāo)題3',
   Children: [{ ID: '3.1', NodeName: '標(biāo)題3.1' }, { ID: '3.2', NodeName: '標(biāo)題3.2' }]
   },
   { ID: '4', NodeName: '標(biāo)題4' },
   { ID: '5', NodeName: '標(biāo)題5' }
  ]
  });
 });
</script>

2，控件html部分

<!--控件容器開(kāi)始-->
<div id="demo"></div>
<!--控件容器結(jié)束-->

怎么樣，調(diào)用是不是比較簡(jiǎn)單？

三、實(shí)現(xiàn)難點(diǎn)說(shuō)明

其實(shí)整個(gè)功能可能最難的地方就在于目錄導(dǎo)航樹(shù)如何準(zhǔn)確顯示當(dāng)前用戶正在瀏覽的區(qū)域，這個(gè)主要的是通過(guò)監(jiān)聽(tīng)滾動(dòng)條滾動(dòng)的事件，然后在事件中動(dòng)態(tài)的計(jì)算當(dāng)前哪個(gè)元素處于瀏覽器可視區(qū)域的，然后取到該元素的唯一標(biāo)示（ID），然后根據(jù)ID在目錄導(dǎo)航樹(shù)中找到對(duì)應(yīng)的節(jié)點(diǎn)，計(jì)算該節(jié)點(diǎn)距離父元素頂部的距離，通過(guò)控制光標(biāo)元素的top值，我知道，當(dāng)我這句話說(shuō)完的時(shí)候，你可能仍然不太明白，那么請(qǐng)看代碼，代碼有時(shí)候比別人口頭解釋的要直觀清晰的多：

//#region滾動(dòng)條事件
 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]);
  //!(滾動(dòng)條離頂部的距離>元素在當(dāng)前視圖的頂部相對(duì)偏移+元素外部高度)&&!(滾動(dòng)條離頂部的距離<元素在當(dāng)前視圖的頂部相對(duì)偏移-window對(duì)象高度/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這個(gè)變量保存的就是通過(guò)className參數(shù)得到的對(duì)象數(shù)組，在scroll事件中不斷的循環(huán)該數(shù)組，對(duì)比哪個(gè)元素的處于當(dāng)前可視的區(qū)域內(nèi)，然后拿到該元素的ID，去目錄樹(shù)中找到對(duì)應(yīng)的節(jié)點(diǎn)，拿到該節(jié)點(diǎn)元素距離其父元素的距離，把該距離通過(guò)css給到$('.arrow')對(duì)象，該$('.arrow')對(duì)象就是右側(cè)藍(lán)色的光標(biāo)對(duì)象，通過(guò)控制它的top值來(lái)調(diào)整它顯示到對(duì)應(yīng)節(jié)點(diǎn)的位置。

四、額外小功能

因?yàn)槲业氖褂脠?chǎng)景中需要能夠標(biāo)示出那個(gè)步驟已經(jīng)評(píng)完了分，所以在封裝這個(gè)控件的時(shí)候，額外的加了這個(gè)小功能，不過(guò)默認(rèn)情況下“已完成”小圖標(biāo)是不會(huì)顯示的，當(dāng)通過(guò)以下js代碼調(diào)用時(shí)，圖標(biāo)就會(huì)顯示在對(duì)應(yīng)的節(jié)點(diǎn)的后面：

//控制第二個(gè)節(jié)點(diǎn)顯示已完成
tree.showOkIcon(2);

其中tree對(duì)象是創(chuàng)建控件后返回的對(duì)象，通過(guò)該對(duì)象的showOkIcon方法，顯示小圖標(biāo)，參數(shù)為對(duì)應(yīng)節(jié)點(diǎn)的ID，效果圖如下：

以上就是所有的內(nèi)容了，因本人第一次寫(xiě)博客，同時(shí)水平有限，代碼實(shí)現(xiàn)的也可能也不夠優(yōu)雅、簡(jiǎn)潔。還請(qǐng)各位看官且看且輕拍。希望能夠給您帶來(lái)一丟丟的幫助。、

附下載鏈接：http://pan.baidu.com/s/1kVFf8I7

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

最新評(píng)論