最近十来天都在学习原生 javascript,参考的是 《DOM Scripting》 这本英文原版书,写得确实非常不错,适合 js 基础非常不牢的小白~ 学的时候基本上是看一章就写点读书笔记发表在博客上,但却基本没动过手写代码。
正好自己最近在写技术博文时遇到了一点小需求,就打算用 js 做一个小工具解决掉。
技术人员写博客时,有一个很常见的方式就是写系列博客(或者称作主题博文),即围绕某一个中心技术点,循序渐进,由浅入深地论述其方方面面。园子里这种现象非常常见,就拿排在前列的几位老大说说,例如 Artech 的 “深入剖析授权在 WCF 中的实现[共14篇]”,例如 李永京 的 “NHibernate 之旅系列文章”,如 小洋(燕洋天) 的 “浅谈ASP.NET 的内部机制” 等等,都是其中的典范之作。
为什么高手们似乎都有写系列博客的倾向?个人认为有以下几点好处:
呵呵,总之,系列博文的写作非常有利于个人知识的深化和整理,可以说是从小工到专家的一个比较有效的方法之一。
我们在写系列博文时,不仅要对文章前后的安排顺序仔细斟酌,而且每一篇文章的谋篇布局也是需要花一番头脑的。随便看看上面提到的高手的系列博 文,都会感觉逻辑之分明,条理之清晰。就拿永京老大的 “NHibernate 之旅” 系列文章为例,作者在每篇博文中都用到了大量的标题,主标题下还有次级标题,这样一来把整篇文章的内容结构很好地规划出来,同时为提高读者的阅读体验,还 在每篇文章的开篇列下了文章的标题结构。不多说,上图:
呵呵,读者一打开这篇文章,映入眼帘的就是整篇文章的框架结构,非常清晰并富有逻辑性,有助于把握整篇文章的脉络。从这一点可以看出,为一篇技术博文划分逻辑层次,使用主标题(mainTitle)+ 次级标题(subTitle)的形式是极其常见和实用的。
笔者的第一个原生 js 小工具的目的,就是为了增强这种 主标题 + 次级标题 的用户体验效果。
核心功能只有两个:
如永京老大的博文,写完文章后把大大小小的标题抽出来放在文首固然是个好方法,但总觉得这样做比较麻烦。那么能否通过代码自动抽取标题,然后再包装一下插入文档中呢?
小工具的第一个核心功能,就是为了解决上述的需求。基本实现原理:首先要求博主在写博文的时候,将主标题和次级标题用 HTML 标签中的 title tag(如:h1、h2、h3...)包起来;然后通过 JS 代码遍历整个包含博文正文的 <div>,过滤出这些标签,再把它们组装成 自定义列表 的形式,再插入到 HTML 文档中,如下:
<dl>
<dt>NHibernate中的查询方法</dt>
<dt>条件查询</dt>
<dd>创建ICriteria实例</dd>
<dd>结果集限制</dd>
<dd>结果集排序</dd>
<dd>一些说明</dd>
<dt>根据示例查询</dt>
<dt>实例分析</dt>
<dt>结语</dt>
</dl>
如果不加任何样式,它在浏览器中的默认显示效果如下:
呵呵,不过我们当然可以手动为其添加 CSS 代码,后面会给出来的。
现在假设我们已经构造出了标题的菜单,插入到了文档中。如果我想点击其中的某一项,页面就会定位到相应位置的话,这样会方便很多(特别是在以后 再次浏览的时候)。对 HTML 比较熟的童鞋可能马上想到:用锚!对,我们可以把 <a name="title"></a> 放置到想要跳转的位置,然后再用 <a href="#title"></a> 来填充菜单,那么只要点击后者,浏览器窗口就会立即切换到前者所处的位置。
这是一个不错的解决方案,但是缺点就在于这种跳转是瞬间的,而且目的地是未知的(不知道向下跳转还是向上跳转),这样会造成非常糟糕的用户体验,会打乱读者在浏览一篇文章时所形成的连贯性。所以我们不打算使用锚,而是自己来使用 JS 实现一种平滑跳转的效果。
实现的原理也不难:首先通过调用 DOM 方法,判断出浏览器滚动条(scroll bar)的当前位置,记为 currentPos;然后计算出目标标题(target title)的距页面顶端的距离,记为 finalPos;最后通过一定的算法实现平滑过度。
下面给出 JS 源代码和一些必要的 CSS 样式:
一共有 5 个函数:
//获取元素位置
function getPos(e) {
var t = l = 0;
while (e)
{
t += e.offsetTop;
l += e.offsetLeft;
e = e.offsetParent;
}
return {top:t, left:l};
}
//获取滚动条信息
function getScroll() {
return document.body.scrollTop | document.documentElement.scrollTop;
}
//移动窗体
function moveWindow(finalpos, interval) {
//若不支持此方法,则退出
if(!window.scrollTo) return false;
//窗体滚动时,禁用鼠标滚轮
window.onmousewheel = function(){
return false;
};
//清除计时
if (document.body.movement) {
clearTimeout(document.body.movement);
}
var currentpos = getScroll(); //获取滚动条信息
var dist = 0;
if (currentpos == finalpos) { //到达预定位置,则解禁鼠标滚轮,并退出
window.onmousewheel = function(){
return true;
}
return true;
}
if (currentpos < finalpos) { //未到达,则计算下一步所要移动的距离
dist = Math.ceil((finalpos - currentpos)/10);
currentpos += dist;
}
if (currentpos > finalpos) {
dist = Math.ceil((currentpos - finalpos)/10);
currentpos -= dist;
}
var scrTop = getScroll(); //获取滚动条信息
window.scrollTo(0, currentpos); //移动窗口
if(getScroll() == scrTop) //若已到底部,则解禁鼠标滚轮,并退出
{
window.onmousewheel = function(){
return true;
}
return true;
}
//进行下一步移动
var repeat = "moveWindow(" + finalpos + "," + interval + ")";
document.body.movement = setTimeout(repeat, interval);
}
//移动绝对定位元素
function moveFixElement(elementID, finalTop, finalRight, interval)
{
var elem = document.getElementById(elementID);
if(elem.movement){
clearTimeout(elem.movement);
}
finalTop = parseInt(finalTop);
finalRight = parseInt(finalRight);
var xpos = parseInt(elem.style.right);
var ypos = parseInt(elem.style.top);
var dist = 0;
if(xpos == finalRight && ypos == finalTop){
return true;
}
if(xpos < finalRight){
dist = Math.ceil((finalRight - xpos) / 10);
xpos += dist;
}
if(xpos > finalRight){
dist = Math.ceil((xpos - finalRight) / 10);
xpos -= dist;
}
if(ypos < finalTop){
dist = Math.ceil((finalTop - ypos) / 10);
ypos += dist;
}
if(ypos > finalTop){
dist = Math.ceil((ypos - finalTop) / 10);
ypos -= dist;
}
elem.style.right = xpos + "px";
elem.style.top = ypos + "px";
var repeat = "moveFixElement('" + elementID + "'," + finalTop + "," + finalRight + "," + interval + ")";
elem.movement = setTimeout(repeat, interval);
}
//创建菜单
function createContent(id, mt, st, interval)
{
//获取博文正文div容器
var elem = document.getElementById(id);
if(!elem) return false;
//获取div中所有元素结点
var nodes = elem.getElementsByTagName("*");
//创建自定义列表
var dlist = document.createElement("dl");
//创建div容器
var blogContent = document.createElement("div");
blogContent.setAttribute("id","blogContent");
var title = document.createElement("div");
title.setAttribute("id","contentTitle");
var dldiv = document.createElement("div");
dldiv.setAttribute("id", "dldiv");
var num = 0;
//遍历所有元素结点
for(var i=0; i<nodes.length; i++)
{
if(nodes[i].nodeName == mt || nodes[i].nodeName == st)
{
//获取标题文本
var nodetext = nodes[i].firstChild.nodeValue;
//插入锚
nodes[i].setAttribute("id", "blogTitle" + num);
switch(nodes[i].nodeName)
{
case mt: //若为主标题
var item = document.createElement("dt");
break;
case st: //若为子标题
var item = document.createElement("dd");
break;
}
//创建锚链接
var itemtext = document.createTextNode(nodetext);
item.appendChild(itemtext);
item.setAttribute("name", num);
item.onclick = function(){ //添加鼠标点击触发函数
var pos = getPos(document.getElementById("blogTitle" + this.getAttribute("name")));
if(!moveWindow(pos.top, interval)) return false;
};
//将自定义表项加入自定义列表中
dlist.appendChild(item);
num++;
}
}
if(num == 0) return false;
//将自定义列表加入文档中
dldiv.appendChild(dlist);
blogContent.appendChild(title);
blogContent.appendChild(dldiv);
document.body.appendChild(blogContent);
//设置初始化位置
blogContent.style.right = 0 - dldiv.offsetWidth + "px";
blogContent.style.top = (window.innerHeight - title.offsetHeight) / 2 + "px";
//点击 title,目录平滑伸缩
title.onclick = function(){
var blogContent = document.getElementById("blogContent");
var dldiv = document.getElementById("dldiv");
if(parseInt(blogContent.style.right) == 0){
moveFixElement("blogContent", blogContent.style.top, -dldiv.offsetWidth, 20);
}
else{
moveFixElement("blogContent", blogContent.style.top, 0, 20);
}
};
//添加窗口 resize 事件响应
window.onresize= function(){
var title = document.getElementById("contentTitle");
blogContent.style.top = (window.innerHeight - title.offsetHeight) / 2 + "px";
}
}
最终生成的标题菜单(content of titles)的 HTML 结构图如下所示:
所以我们可为其编写如下的 CSS 代码:
/*三个div容器的样式*/
#blogContent{
position:fixed;
}
#contentTitle{
background-image: url(title.png);
background-position:-46px 0px;
width:46px;
height:148px;
float:left;
cursor:pointer;
}
#dldiv{
float:left;
font-family:'微软雅黑';
color:#3191B4;
background-color:#F1FAFB;
border:1px dotted #3191B4;
border-radius:5px;
}
/*自定义列表样式*/
#dldiv dl{
margin:8px 8px 8px 12px;
}
#dldiv dd,dt{
cursor:pointer;
}
#dldiv dd:hover, dt:hover{
color:#A7995A;
}
#dldiv dt{
font-weight:bold;
margin-top:10px;
font-size:15px;
}
#dldiv dd{
margin:4px 15px;
font-size:12px;
}
最重要的当然是写博啦,如果不写博,那么这个工具就毫无存在的价值了。在写博添加标题时,首先用鼠标选定标题文字,然后点击编辑栏的样式设置菜单,选择 标题1-标题6 其中的一项。如下图所示:
当然,主标题要比次级标题设得大一些,对我来说,一般选择 h2 作为主标题,h3 作为次级标题。
首先在 博客后台管理->设置->公告 中添加对 js 文件的引用,如下:
然后,在博文编辑器中点击 HTML 功能键,在博文的 HTML 源码中添加如下 js 代码:
方法 createContent 即为生成标题目录的 js 函数,它有四个参数:
"cnblogs_post_body":表示包含博文正文的 div 容器的 id;
"H2":表示主标题的 HTML tag(需大写!);
"H3":表示次级标题的 HTML tag(需大写!);
20:表示平滑跳转时的速度,数值越大速度越快。
一般来说第一个参数不用改,后面三个根据具体情况而定。
最后,我们需要对生成的标题构成的目录设置样式,包括位置、底色、字体等等,我们在 后台管理->设置->通过 CSS 设置页面样式 中添加上面列出的 CSS 代码:
最终的效果,你应该在浏览本篇博文时已经看到了。
这是笔者初学原生 javascript 的第一个小作品,欢迎园友试用,也欢迎提出改进建议!
http://www.cnblogs.com/hustlzp/archive/2011/08/22/a-js-tool-for-auto-blog-title-content-generate.html