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

　　說起來比較慚愧，在園子里混了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 = $('#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部分

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

怎么樣，調用是不是比較簡單？

三、實現難點說明

　　其實整個功能可能最難的地方就在於目錄導航樹如何准確顯示當前用戶正在瀏覽的區域，這個主要的是通過監聽滾動條滾動的事件，然后在事件中動態的計算當前哪個元素處於瀏覽器可視區域的，然后取到該元素的唯一標示（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值來調整它顯示到對應節點的位置。

四、額外小功能

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

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

　　其中tree對象是創建控件后返回的對象，通過該對象的showOkIcon方法，顯示小圖標，參數為對應節點的ID，效果圖如下：

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

附件下載：鏈接：http://pan.baidu.com/s/1sl8hIOH 密碼：ylxl