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

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

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

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

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

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

目前只有這個三個參數(shù)，大家可以在使用時根據(jù)自己的需求擴展自己想要的參數(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部分

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

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

三、實現(xiàn)難點說明

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

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

四、額外小功能

因為我的使用場景中需要能夠標(biāo)示出那個步驟已經(jīng)評完了分，所以在封裝這個控件的時候，額外的加了這個小功能，不過默認(rèn)情況下“已完成”小圖標(biāo)是不會顯示的，當(dāng)通過以下js代碼調(diào)用時，圖標(biāo)就會顯示在對應(yīng)的節(jié)點的后面：

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

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

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

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

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

最新評論