页内导航插件编写后总结

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         },

View Code

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" οnclick="return false;" title="'+sideName+'" href="#'+sideAnchor+'">'+ sideName +'</a>'
32                         +       '<span class="sideCatalog-dot"></span>'
33                         +    '</dd>';
34                 ddArr.push(ddHtml);
35             });

View Code

 

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         },

View Code

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的区别是，前者还会占位置，后者不会。

 

转载于:https://www.cnblogs.com/wubaimao/p/4725193.html