詳解百度百科目錄導航樹小插件

先介紹一下造輪子的背景:前幾天給客戶設計原型，是關於一個步驟數據展現及打分的頁面，客戶能夠在此頁面上看到APP端配置的工做步驟以及採集到的數據，能夠分別給每一個步驟打分，在設計的時考慮到通常狀況下APP端配置的工做步驟比較多，Web後臺進行展現的時候頁面會很是長，用戶在查看數據及評分的過程當中可能會不清楚本身評了幾個步驟，還剩下幾個步驟未打分，因此想在頁面中設計一個相似於導航的東西，經過這個導航能夠很清晰直觀的看到當前正在瀏覽的是哪一個步驟，同時也能夠點擊本身感興趣的步驟直接滾動到該步驟的內容區域。當時靈光一閃，想到了百度百科右側的目錄導航樹，不如就用這個效果吧，基本知足本身所想的效果，因此就按照這個效果畫了一個原型頁面跟客戶確認，客戶也挺滿意的，原型肯定以後，任務也就開始了。就先從這個導航樹開始吧，從可維護性和複用角度考慮，當時就想直接封裝一個插件吧，在功能頁面，直接經過JQ的方式調用，這樣功能頁面的代碼量會少一些，因此就有了下面這個小東西，先看一下效果圖：

1、控件參數介紹

1，data：爲控件生成提供數據源，效果圖中的標題1，標題2，標題3等導航名稱就是經過該屬性的NodeName獲取的。

2，css：爲導航樹容器提供css樣式，這個能夠根據我的的需求進行調整，如控制導航樹的距離瀏覽器的頂部，右側的位置。

3，className：該參數主要用於瀏覽器滾動條滾動到對應內容時，導航樹光標定位到對應的節點，默認的值爲'.item'。

目前只有這個三個參數，你們能夠在使用時根據本身的需求擴展本身想要的參數。

2、控件的調用

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 = $('#demo').navigationTree({
                data: [
                    { ID: '1', NodeName: '標題1' },
                    { ID: '2', NodeName: '標題2' },
                    {
                        ID: '3',
                        NodeName: '標題3',
                        Children: [{ ID: '3.1', NodeName: '標題3.1' }, { ID: '3.2', NodeName: '標題3.2' }]
                    },
                    { ID: '4', NodeName: '標題4' },
                    { ID: '5', NodeName: '標題5' }
                ]
            });
        });
</script>

2，控件html部分

1 <!--控件容器開始-->
2 <div id="demo"></div>
3 <!--控件容器結束-->

怎麼樣，調用是否是比較簡單？

3、實現難點說明

　　其實整個功能可能最難的地方就在於目錄導航樹如何準確顯示當前用戶正在瀏覽的區域，這個主要的是經過監聽滾動條滾動的事件，而後在事件中動態的計算當前哪一個元素處於瀏覽器可視區域的，而後取到該元素的惟一標示（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)) {
                $('.arrow').css({ top: $('[data-id="' + elmObj.attr('id') + '"]').position().top + 3 });
                return false;
            }
        }
    });
    //#endregion

其中_allElements這個變量保存的就是經過className參數獲得的對象數組，在scroll事件中不斷的循環該數組，對比哪一個元素的處於當前可視的區域內，而後拿到該元素的ID，去目錄樹中找到對應的節點，拿到該節點元素距離其父元素的距離，把該距離經過css給到$('.arrow')對象，該$('.arrow')對象就是右側藍色的光標對象，經過控制它的top值來調整它顯示到對應節點的位置。

4、額外小功能

　　由於個人使用場景中須要可以標示出那個步驟已經評完了分，因此在封裝這個控件的時候，額外的加了這個小功能，不過默認狀況下「已完成」小圖標是不會顯示的，當經過如下js代碼調用時，圖標就會顯示在對應的節點的後面：

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

其中tree對象是建立控件後返回的對象，經過該對象的showOkIcon方法，顯示小圖標，參數爲對應節點的ID，效果圖以下：

以上就是全部的內容了，因本人第一次寫博客，同時水平有限，代碼實現的也可能也不夠優雅、簡潔。還請各位看官且看且輕拍。但願可以給您帶來一丟丟的幫助。