前面的话
有朋友在博客下面留言,询问博客目录是如何生成的。接下来就详细介绍实现过程
操作说明
关于博客目录自动生成,已经封装成catalog.js文件,只要引用该文件即可
//默认地,为页面上所有的h3标签生成目录 <script src="http://files.cnblogs.com/files/xiaohuochai/catalog.js"></script> //或者,为页面上所有class="test"的标签生成目录 <script src="http://files.cnblogs.com/files/xiaohuochai/catalog.js" data-seletor=".test"></script>
如下图所示,打开HTML源代码编辑器,在最后引入js即可
![](https://i-blog.csdnimg.cn/blog_migrate/8c8a599a47d27a5a75ef745ece38fa7c.jpeg)
【功能简要说明】
1、点击目录项,对应章节标题将显示在可视区上方
2、滚动滚轮,目录项会对应章节标题的变化而相应地变化
3、点击目录右上角的关闭按钮,可以将目录缩小为"显示目录"四个字,再次单击缩小后的目录,可恢复默认状态
4、目录可以拖拽至任意地方
目录参照
首先,要确定的是,基于什么生成目录。是文章中的<h3>标签,还是文章中的class="list"的标签。所以,更人性化的做法是,将其作为参数,默认参数为<h3>标签
由于博客园的博文除了自己生成的博客内容外,博客园还会添加诸如评论、公告、广告等元素。所以,第一步要先定位博文
博文最终都处于id="cnblogs_post_body"的div中
![](https://i-blog.csdnimg.cn/blog_migrate/c8e12a496a2b094d07e2cf308bfffe6e.jpeg)
//DOM结构稳定后再操作 window.onload = function(){ /*设置章节标题函数*/ function setCatalog(){ //获取页面中所有的script标题 var aEle = document.getElementsByTagName('script'); //设置sel变量,用于保存其选择符的字符串值 var sel; //获取script标签上的data-selector值 Array.prototype.forEach.call(aEle,function(item,index,array){ sel = item.getAttribute('data-selector'); if(sel) return; }) //默认参数为h3标签 if(sel == undefined){ sel ='h3'; } //选取文章中所有的章节标题 var tempArray = document.querySelectorAll(sel); };
目录连接
目录如何与章节进行对应呢,最常用的就是使用锚点。以基于文章中的<h3>标签生成目录为例,为每一个<h3>标签按照顺序添加锚点(#anchor1,#anchor2...)
//为每一个章节标题顺序添加锚点标识 Array.prototype.forEach.call(tempArray, function(item, index, array) { item.setAttribute('id','anchor' + (1+index)); });
目录显示
在文章左侧显示目录,目录显示的内容就是对应章节的题目
//设置全局变量Atitle保存添加锚点标识的标题项 var aTitle = setCatalog(); /*生成目录*/ function buildCatalog(arr){ //由于每个部件的创建过程都类似,所以写成一个函数进行服用 function buildPart(json){ var oPart = document.createElement(json.selector); if(json.id){oPart.setAttribute('id',json.id);} if(json.className){oPart.className = json.className;} if(json.innerHTML){oPart.innerHTML = json.innerHTML;} if(json.href){oPart.setAttribute('href',json.href);} if(json.appendToBox){ oBox.appendChild(oPart); } return oPart; } //取得章节标题的个数 len = arr.length; //创建最外层div var oBox = buildPart({ selector:'div', id:'box', className:'box' }); //创建关闭按钮 buildPart({ selector:'span', id:'boxQuit', className:'box-quit', innerHTML:'×', appendToBox:true }); //创建目录标题 buildPart({ selector:'h6', className:'box-title', innerHTML:'目录', appendToBox:true }); //创建目录项 for(var i = 0; i < len; i++){ buildPart({ selector:'a', className:'box-anchor', href:'#anchor' + (1+i), innerHTML:'['+(i+1)+']'+arr[i].innerHTML, appendToBox:true }); } //将目录加入文档中 document.body.appendChild(oBox); } buildCatalog(aTitle);
目录样式
为目录设置样式,最外层div设置最小宽度和最大宽度。当目录项太宽时,显示...。由于最终要封装为一个js文件,所以样式采用动态样式的形式
/*动态样式*/ function loadStyles(str){ loadStyles.mark = 'load'; var style = document.createElement("style"); style.type = "text/css"; try{ style.innerHTML = str; }catch(ex){ style.styleSheet.cssText = str; } var head = document.getElementsByTagName('head')[0]; head.appendChild(style); } if(loadStyles.mark != 'load'){ loadStyles("h6{margin:0;padding:0;}\ .box{position: fixed; left: 10px;top: 60px;font:16px/30px '宋体'; border: 2px solid #ccc;padding: 4px; border-radius:5px;min-width:80px;max-width:118px;overflow:hidden;cursor:default;}\ .boxHide{border:none;width:60px;height:30px;padding:0;}\ .box-title{text-align:center;font-size:20px;color:#ccc;}\ .box-quit{position: absolute; right: 0;top: 4px;cursor:pointer;font-weight:bold;}\ .box-anchor{display:block;text-decoration:none;color:black; border-left: 3px solid transparent;padding:0 3px;margin-bottom: 3px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}\ .box-anchor:hover{color:#3399ff;}\ .box-anchorActive{color:#3399ff;text-decoration:underline;border-color:#2175bc};"); };
点击事件
为各目录项增加点击事件,使用事件代理,增加性能
//由于点击事件和滚轮事件都需要将目录项发生样式变化,所以声明锚点激活函数 function anchorActive(obj){ var parent = obj.parentNode; var aAnchor = parent.getElementsByTagName('a'); //将所有目录项样式设置为默认状态 Array.prototype.forEach.call(aAnchor,function(item,index,array){ item.className = 'box-anchor'; }) //将当前目录项样式设置为点击状态 obj.className = 'box-anchor box-anchorActive'; } var oBox = document.getElementById('box'); //设置目录内各组件的点击事件 oBox.onclick = function(e){ e = e || event; var target = e.target || e.srcElement; //获取target的href值 var sHref = target.getAttribute('href'); //设置目录项的点击事件 if(/anchor/.test(sHref)){ anchorActive(target); } }
隐藏功能
目录有时是有用的,但有时又是碍事的。所以,为目录添加一个关闭按钮,使其隐藏,目录内容全部消失,关闭按钮变成“显示目录”四个字。再次点击则完全显示
[注意]当目录正在移动时,目录显隐功能暂时无效,否则会造成冲突
var oBox = document.getElementById('box'); //设置目录内各组件的点击事件 oBox.onclick = function(e){ e = e || event;
if(oBox.isMove) return; var target = e.target || e.srcElement; //设置关闭按钮的点击事件 if(target.id == 'boxQuit'){ if(target.isHide){ target.innerHTML = '显示目录'; target.className = 'box-quit box-quitAnother' this.className = 'box boxHide'; target.isHide = false; }else{ target.innerHTML = '×'; target.className = 'box-quit'; this.className = 'box'; target.isHide = true; } } }
滚轮功能
当使用滚轮时,触发滚轮事件或滚动事件,当前目录对应可视区内相应的文章内容
//设置滚轮事件 var wheel = function(e){ //获取列表项 var aAnchor = oBox.getElementsByTagName('a'); //获取章节题目项 aTitle.forEach(function(item,index,array){ //获取当前章节题目离可视区上侧的距离 var iTop = item.getBoundingClientRect().top; //获取下一个章节题目 var oNext = array[index+1]; //如果存在下一个章节题目,则获取下一个章节题目离可视区上侧的距离 if(oNext){ var iNextTop = array[index+1].getBoundingClientRect().top; } //当前章节题目离可视区上侧的距离小于10时 if(iTop <= 10){ //当下一个章节题目不存在, 或下一个章节题目离可视区上侧的距离大于10时,设置当前章节题目对应的目录项为激活态 if(iNextTop > 10 || !oNext){ anchorActive(aAnchor[index]); } } }); } document.body.onmousewheel = wheel; document.body.addEventListener('DOMMouseScroll',wheel,false);
window.onscroll = wheel;
拖拽功能
由于不同计算机的分辨率不同,所以目录的显示位置也不同。为目录增加一个拖拽功能,可以把其放在任意合适的地方
//拖拽实现 oBox.onmousedown = function(e){ //设置oBox的正在移动状态为假 oBox.isMove = false; e = e || event; //获取元素距离定位父级的x轴及y轴距离 var x0 = this.offsetLeft; var y0 = this.offsetTop; //获取此时鼠标距离视口左上角的x轴及y轴距离 var x1 = e.clientX; var y1 = e.clientY; document.onmousemove = function(e){ //设置oBox的正在移动状态为真 oBox.isMove = true; e = e || event; //获取此时鼠标距离视口左上角的x轴及y轴距离 x2 = e.clientX; y2 = e.clientY; //计算此时元素应该距离视口左上角的x轴及y轴距离 var X = x0 + (x2 - x1); var Y = y0 + (y2 - y1); //将X和Y的值赋给left和top,使元素移动到相应位置 oBox.style.left = X + 'px'; oBox.style.top = Y + 'px'; } document.onmouseup = function(e){ //当鼠标抬起时,拖拽结束,则将onmousemove赋值为null即可 document.onmousemove = null; //释放全局捕获 if(oBox.releaseCapture){ oBox.releaseCapture(); } } //阻止默认行为 return false; //IE8-浏览器阻止默认行为 if(oBox.setCapture){ oBox.setCapture(); } }
代码展示
//事件处理程序兼容写法 function addEvent(target,type,handler){ if(target.addEventListener){ target.addEventListener(type,handler,false); }else{ target.attachEvent('on'+type,function(event){ return handler.call(target,event); }); } } //DOM结构稳定后,再操作 addEvent(window,'load', fnCata); function fnCata(){ /*动态样式*/ function loadStyles(str){ loadStyles.mark = 'load'; var style = document.createElement("style"); style.type = "text/css"; try{ style.innerHTML = str; }catch(ex){ style.styleSheet.cssText = str; } var head = document.getElementsByTagName('head')[0]; head.appendChild(style); } if(loadStyles.mark != 'load'){ loadStyles("h6{margin:0;padding:0;}\ .box{position: fixed; left: 10px;top: 60px;font:16px/30px '宋体'; border: 2px solid #ccc;padding: 4px; border-radius:5px;min-width:80px;max-width:118px;overflow:hidden;cursor:default;background:rgba(0,0,0,0.1);}\ .boxHide{border:none;width:60px;height:30px;padding:0;}\ .box-title{text-align:center;font-size:20px;color:#444;}\ .box-quit{position: absolute;text-align:center; right: 0;top: 4px;cursor:pointer;font-weight:bold;}\ .box-quitAnother{background:#3399ff;left:0;top:0;}\ a.box-anchor{display:block;text-decoration:none;color:black; border-left: 3px solid transparent;padding:0 3px;margin-bottom: 3px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}\ a.box-anchor:hover{color:#3399ff;}\ a.box-anchorActive{color:#3399ff;text-decoration:underline;border-color:#2175bc};"); }; /*设置章节标题函数*/ function setCatalog(){ //获取页面中所有的script标题 var aEle = document.getElementsByTagName('script'); //设置sel变量,用于保存其选择符的字符串值 var sel; //获取script标签上的data-selector值 Array.prototype.forEach.call(aEle,function(item,index,array){ sel = item.getAttribute('data-selector'); if(sel) return; }) //默认参数为h3标签 if(sel == undefined){ sel ='h3'; } //选取博文 var article = document.getElementById('cnblogs_post_body'); //选取文章中所有的章节标题 var tempArray = article.querySelectorAll(sel); //为每一个章节标题顺序添加锚点标识 Array.prototype.forEach.call(tempArray, function(item, index, array) { item.setAttribute('id','anchor' + (1+index)); }); //返回章节标题这个类数组 return tempArray; } //设置全局变量Atitle保存添加锚点标识的标题项 var aTitle = setCatalog(); /*生成目录*/ function buildCatalog(arr){ //由于每个部件的创建过程都类似,所以写成一个函数进行服用 function buildPart(json){ var oPart = document.createElement(json.selector); if(json.id){oPart.setAttribute('id',json.id);} if(json.className){oPart.className = json.className;} if(json.innerHTML){oPart.innerHTML = json.innerHTML;} if(json.href){oPart.setAttribute('href',json.href);} if(json.appendToBox){ oBox.appendChild(oPart); } return oPart; } //取得章节标题的个数 len = arr.length; //创建最外层div var oBox = buildPart({ selector:'div', id:'box', className:'box boxHide' }); //创建关闭按钮 buildPart({ selector:'span', id:'boxQuit', className:'box-quit box-quitAnother', innerHTML:'显示目录', appendToBox:true }); //创建目录标题 buildPart({ selector:'h6', className:'box-title', innerHTML:'目录', appendToBox:true }); //创建目录项 for(var i = 0; i < len; i++){ buildPart({ selector:'a', className:'box-anchor', href:'#anchor' + (1+i), innerHTML:'['+(i+1)+']'+arr[i].innerHTML, appendToBox:true }); } //将目录加入文档中 document.body.appendChild(oBox); } buildCatalog(aTitle); /*事件部分*/ (function(){ var oBox = document.getElementById('box'); //设置目录内各组件的点击事件 oBox.onclick = function(e){ e = e || event; if(oBox.isMove) return; var target = e.target || e.srcElement; //设置关闭按钮的点击事件 if(target.id == 'boxQuit'){ if(target.isHide){ target.innerHTML = '显示目录'; target.className = 'box-quit box-quitAnother' this.className = 'box boxHide'; target.isHide = false; }else{ target.innerHTML = '×'; target.className = 'box-quit'; this.className = 'box'; target.isHide = true; } } //获取target的href值 var sHref = target.getAttribute('href'); //设置目录项的点击事件 if(/anchor/.test(sHref)){ anchorActive(target); } } //由于点击事件和滚轮事件都需要将目录项发生样式变化,所以声明锚点激活函数 function anchorActive(obj){ var parent = obj.parentNode; var aAnchor = parent.getElementsByTagName('a'); //将所有目录项样式设置为默认状态 Array.prototype.forEach.call(aAnchor,function(item,index,array){ item.className = 'box-anchor'; }) //将当前目录项样式设置为点击状态 obj.className = 'box-anchor box-anchorActive'; } //设置滚轮事件 var wheel = function(e){ //获取列表项 var aAnchor = oBox.getElementsByTagName('a'); //获取章节题目项 aTitle.forEach(function(item,index,array){ //获取当前章节题目离可视区上侧的距离 var iTop = item.getBoundingClientRect().top; //获取下一个章节题目 var oNext = array[index+1]; //如果存在下一个章节题目,则获取下一个章节题目离可视区上侧的距离 if(oNext){ var iNextTop = array[index+1].getBoundingClientRect().top; } //当前章节题目离可视区上侧的距离小于10时 if(iTop <= 10){ //当下一个章节题目不存在, 或下一个章节题目离可视区上侧的距离大于10时,设置当前章节题目对应的目录项为激活态 if(iNextTop > 10 || !oNext){ anchorActive(aAnchor[index]); } } }); } document.body.onmousewheel = wheel; document.body.addEventListener('DOMMouseScroll',wheel,false); window.onscroll = wheel; //拖拽实现 oBox.onmousedown = function(e){ //设置oBox的正在移动状态为假 oBox.isMove = false; e = e || event; //获取元素距离定位父级的x轴及y轴距离 var x0 = this.offsetLeft; var y0 = this.offsetTop; //获取此时鼠标距离视口左上角的x轴及y轴距离 var x1 = e.clientX; var y1 = e.clientY; document.onmousemove = function(e){ //设置oBox的正在移动状态为真 oBox.isMove = true; e = e || event; //获取此时鼠标距离视口左上角的x轴及y轴距离 x2 = e.clientX; y2 = e.clientY; //计算此时元素应该距离视口左上角的x轴及y轴距离 var X = x0 + (x2 - x1); var Y = y0 + (y2 - y1); //将X和Y的值赋给left和top,使元素移动到相应位置 oBox.style.left = X + 'px'; oBox.style.top = Y + 'px'; } document.onmouseup = function(e){ //当鼠标抬起时,拖拽结束,则将onmousemove赋值为null即可 document.onmousemove = null; //释放全局捕获 if(oBox.releaseCapture){ oBox.releaseCapture(); } } //阻止默认行为 return false; //IE8-浏览器阻止默认行为 if(oBox.setCapture){ oBox.setCapture(); } } })(); };
最后
如果有自己的需求,可以把代码下载下来,进行相应参数的修改
如果点击右键,会出现自定义菜单,按住ctrl键,再点击右键,会出现原生右键菜单。这是我曾经开发的一个有意思的小功能。为了让两个功能能够兼容,于是window.onload改成了DOM2级事件处理程序的兼容写法