1、在_render:function(){}中添加一个方法_addFrame(){}用来构建整个页面的dom结构。
1 _addFrame:function(){
2 var g=this,p=this.options,el=g.el;
3 el[0].innerHTML=‘‘;
4 var _htmltempl=‘<div id="sideToolbar" style="position: fixed;">‘+
5 ‘<div id="sideCatalog" class="sideCatalogBg" style="visibility: visible;">‘+
6 ‘<div id="sideCatalog-sidebar">‘+
7 ‘ <div class="sideCatalog-sidebar-top"></div>‘+
8 ‘<div class="sideCatalog-sidebar-bottom"></div>‘+
9 ‘</div>‘+
10 ‘<div id="sideCatalog-updown" style="visibility: visible;">‘+
11 ‘ <div id="sideCatalog-up" class="sideCatalog-up-disable" title="向上翻页"></div>‘+
12 ‘ <div id="sideCatalog-down" class="sideCatalog-down-enable" title="向下翻页"></div>‘+
13 ‘</div>‘+
14 ‘<div id="sideCatalog-catalog">‘+
15 ‘ <dl style="zoom:1"></dl>‘+
16 ‘</div>‘+
17 ‘</div>‘+
18 ‘<div class="btn-box">‘+
19 ‘<a id="sideCatalogBtn" class="" title="隐藏" style="visibility: visible;" href="javascript:void(0);"></a>‘+
20 ‘<a id="sideToolbar-up" style="visibility: visible;" title="返回顶部" href="javascript:void(0)"></a>‘+
21 ‘</div>‘+
22 ‘</div>‘;
23 g.sidetoolbar=$(_htmltempl).css({"bottom":p.bottom+"px","right":"10px","width":p.width+‘px‘}).appendTo(el);
24 },
2、在_render:function(){}中添加一个_blidData()方法，用于生成导航节点的名字。这里要注意，导航节点的名字是根据内容部分的标题来生成的。但是如果查找所有的标题用于生成节点呢，在写页面标题的时候，要使用我们默认固定的class名。比如以headline开头。
查找到所有的标题后，进行遍历，将每一个都追加到导航节点中。
1 var g=this,p=this.options,el=g.el;
2 p=( options ? $.extend(p,options): p);
3 g.targetSelector=( p.targetSelector==undefined || p.targetSelector==null ? $("body") : $(p.targetSelector) ) ;
4 var allEle = g.targetSelector.find(‘:header[class*="headline"]‘);
5 g.allEle=allEle;
6 g.headLen = allEle.length;
7 var ddArr = [];
8 //根据页面内容生成slide导航；
9 allEle.each(function(i){
10 var sideIndex,
11 sideName,
12 ddId,
13 highlight=‘‘,
14 ddClass,
15 sideAnchor;
16 sideName = $(this).find(‘.headline-content‘).text();
17 if($(this).hasClass(‘headline-1‘)){
18 sideAnchor = sideIndex = $(this).find(‘.anchor-1‘).eq(0).attr(‘name‘);
19 ddClass = ‘sideCatalog-item1‘;
20 }else{
21 sideAnchor = $(this).find(‘.anchor-2‘).eq(0).attr(‘name‘);
22 sideIndex = sideAnchor.replace(‘-‘,‘.‘);
23 ddClass = ‘sideCatalog-item2‘;
24 }
25 ddId = ‘sideToolbar-item-0-‘+ sideAnchor;
26 if(i==0){
27 highlight = ( p.showCurIcon ? ‘highlight‘ : ‘‘);
28 }
29 var ddHtml = ‘<dd id="‘+ ddId +‘" class="‘+ddClass + ‘ ‘ + highlight +‘">‘
30 + ‘<span class="sideCatalog-index1">‘+ sideIndex +‘</span>‘
31 + ‘<a class="nslog:1026" onclick="return false;" title="‘+sideName+‘" href="#‘+sideAnchor+‘">‘+ sideName +‘</a>‘
32 + ‘<span class="sideCatalog-dot"></span>‘
33 + ‘</dd>‘;
34 ddArr.push(ddHtml);
35 });
3、在编写过程中会设计到很多的变量，如果让这些变量在别的方法中也能用呢？
将这些变量添加到this中。这里用到了jquery中的核心方法$(selector,contnet)
4、窗口大小改变时导航条的高度也自动调整
导航条的高度是自动获取到的。用整个页面的高度-导航条中下面按钮的高度-导航条距顶端的高度-导航条距离底部的高度。
$(window).resize():当调整浏览器窗口的大小时，发生 resize 事件。
这里的高度涉及到几个方法 clientHeight、outerHeight()、
http://www.jb51.net/article/43470.htm（这里有详细介绍）
1 autoHeight:function(){
2 var g=this,p=this.options,el=g.el;
3 var owinHeight=$(document.body)[0].clientHeight;
4 var sidetoolbarHeight=owinHeight-g.btnBoxHeight-parseFloat(p.bottom)-parseFloat(p.top);
5 p.minHeight=parseInt(p.minHeight)
6 if(sidetoolbarHeight<p.minHeight){
7 sidetoolbarHeight=p.minHeight;
8 }
9 if(p.height!=="auto"){
10 sidetoolbarHeight=parseInt(p.height);
11 }
12 g.sideCatalog.css("height",sidetoolbarHeight);
13 g.sidebar.css("height",sidetoolbarHeight);
14 g.sideCatCatalog.css("height",sidetoolbarHeight-36);
15 g.sideCatCatalogHeight=sidetoolbarHeight-36;
16 g.visibleDdCount=Math.ceil(g.sideCatCatalogHeight/g.ddHeight);
17 g._judge();
18 },
5、点击导航节点，内容部门要滚动到节点对应的内容，如果导航的长度比可是区域长，点导航后面的部分，也要出现向上滚动，以显示后面的内容。
这里涉及到的有scrollTop、定时器
scrollTop：scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。
http://www.jb51.net/article/26141.htm（有关定时器的几个方法）
6、滑动滚动条，导航条的节点要跟着内容部门依次被选中
这里用到了$(window).scroll();
animate():该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。
7、在导航条的显示与隐藏中用了css()方法
首先注意这个方法是Jquery的方法
sideCatalog.css(‘visibility‘,‘hidden‘);visibility:hidden和display:none的区别是，前者还会占位置，后者不会。