首頁 > 文章 > web前端 > 百度百科目錄導航樹小插件的分析

百度百科目錄導航樹小插件的分析

不言原創: 2018-06-25 12:01:041902瀏覽

本文主要介紹了百度百科目錄導航樹小插件,具有一定的參考價值，下面一起來看下吧

#說起來比較慚愧，在園子裡混了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 = $(&#39;#demo&#39;).navigationTree({
  data: [
   { ID: &#39;1&#39;, NodeName: &#39;标题1&#39; },
   { ID: &#39;2&#39;, NodeName: &#39;标题2&#39; },
   {
   ID: &#39;3&#39;,
   NodeName: &#39;标题3&#39;,
   Children: [{ ID: &#39;3.1&#39;, NodeName: &#39;标题3.1&#39; }, { ID: &#39;3.2&#39;, NodeName: &#39;标题3.2&#39; }]
   },
   { ID: &#39;4&#39;, NodeName: &#39;标题4&#39; },
   { ID: &#39;5&#39;, NodeName: &#39;标题5&#39; }
  ]
  });
 });
</script>

2，控制項html部分

<!--控件容器开始-->
<p id="demo"></p>
<!--控件容器结束-->

怎麼樣，呼叫是不是比較簡單？

三、實作難點說明

其實整個功能可能最難的地方就在於目錄導覽樹如何準確顯示目前使用者正在瀏覽的區域，這個主要的是透過監聽捲軸滾動的事件，然後在事件中動態的計算當前哪個元素處於瀏覽器可視區域的，然後取到該元素的唯一標示（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)) {
  $(&#39;.arrow&#39;).css({ top: $(&#39;[data-id="&#39; + elmObj.attr(&#39;id&#39;) + &#39;"]&#39;).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

以上就是本文的全部內容，希望對大家的學習有幫助，更多相關內容請關注PHP中文網！

百度百科目錄導航樹小插件的分析

相關文章