jQuery插件综合应用(二)文字为主的页面

一、介绍

文字内容是每个网站都有的内容，网站在展示文字内容时，总是比图片、视频等富媒体内容要难一些，因为富媒体容易被用户接受。尤其是越多的文字内容越难以被用户通篇的阅读，跳跃式阅读往往是阅读的主要方式。 那么做为站长的我们，该如何使用户轻松阅读我们写的文章，也是非常重要的事情，因为我们发布一篇文章，目的是为了供网友阅读，产生共鸣。如果发布一篇文章没人看，或者看完了也不知道文章在说些什么，那发布文章也没有意义。

为了使用户轻松阅读文章，改进的方面主要有以下3点。1)文章的选题，做为开发人员，可以选择 工作中遇到或解决的问题，或学习的内容做为文章的主题。2）写作技巧，怎样写文章，写文章注意的事项，从小在语文课中学习的写作技巧。3）文章的布局（排版），本文的主要内容。书面文章可能千篇一律，文字基本也就几种格式如宋体、仿宋体等，行距固定，字体大小也基本固定，颜色也基本以黑色为主（彩色图书除外）。

而在博客中发布文章，我们可以合理的毫无限制的使用文字的字体、大小、颜色等，也可以在文章中添加图片、视频等信息。我们通过使用html+css+js可以提供更好地阅读体验。

而本文主要讲解通过html+css提供文章页面布局，jquery插件提供丰富的阅读体验。

在说明实现的功能之前，先以图书的形式进行说明。图书是相关文章的汇总，对我们阅读者来说，最主要的内容有：1）目录，可能是翻阅一本书时最先浏览的地方。方便我们知道图书的内容如何组织，也方便我们跳跃式的阅读。2）内容，涉及到具体的知识和操作。3）引用和术语解释，尤其是翻译的图书，在图书的最后或每章的后面都有引用或术语说明，以附录的形式表示。当然图书还有前言、作者介绍等说明，但重要性相对低一些。所以在本文中只实现目录、内容和引用术语说明3个功能。

二、使用的插件

目录：
我们在发布文章时，如果能够合理的使用h2标记表示”章“、h3标记表示”节“。那么我们就可以用js遍历body，提取出全部的h2,h3形成文章的“章-节”。在本文只是测试jquery插件的综合应用，所以目录是人工输入的。

然后我们使用scrolltofixed,scrollTo两个插件实现目录固定、内容滚动，向用户提供跳跃式阅读的功能。

内容：
对设置的关键词以链接的方式显示，如网站设置的分类，点击关键词链接，跳转到相应的分类。以遍历的方式寻找文章中的关键词，加链接（不遍历代码中的，如type=’text/javascript’,文章中出现的’javascript’关键词加链接，代码中的不予添加）。

引用和术语解释：
使用cluetip插件直接在文章中以提示框的形式对术语进行解释。

插件的使用说明可以看下面的文章

网站开发常用jQuery插件总结(13)定位插件scrollto
网站开发常用jQuery插件总结(12)固定元素插件scrolltofixed
网站开发常用jQuery插件总结(六)关键词说明插件cluetip

三、插件实现的功能

scrolltofixed插件：
页面滚动时固定“目录”的位置。

scrollTo插件：
滚动到指定元素的位置，按“目录”可进行跳跃式阅读。

cluetip插件：
对术语或引用进行说明。

backstretch插件：
添加页面（body）和头部(header)的背景，只是为了增加页面美观，在选择背景图片时，对于图片的要求是质量越高越好（如清晰度，图片大小等）。backstretch插件只能适当使用，如果设置的背景图片过大，加载会非常缓慢，如果图片太小，背景模糊甚至变形（本文只是演示插件的使用，图片来自于网络）。使用说明可以看 网站开发常用jQuery插件总结(七)背景插件backstretch

四、实现流程

页面样式：
主要用于定义页面居中显示、双列、边距、字体格式、大小等。具体信息看“测试页面”。

插件的样式：
主要定义了cluetip插件样式，修改了插件中的jquery.cluetip.css文件,具体信息看测试文件。scrolltofixed,scrollto使用过程中，无需定义

js编码： 操作主要涉及到 设置透明度，点击“目录”链接时，禁止回滚操作

$("#wrap").css({ opacity: .86 }); //透明度
$('#left a').attr('href','javascript:void(0)');  //禁止回滚

backstretch插件设置背景

//背景图片
$.backstretch(["http://1100w.com/ref/backstretch/bg.jpg"]);
//头部图片，设置了两张图片，切换显示，间隔时间为4000毫秒
$("#header").backstretch(["http://1100w.com/ref/backstretch/b.jpg","header2.jpg"],{duration:4000});

scrolltofixed插件固定元素 ，固定文章的”章与节”

$('#articleinfo').scrollToFixed();

scrollTo插件滚动到指定元素

$('#left li > a').click(function(){
    var id='#h'+$(this).attr("id");
    $.scrollTo(id,800);
});

遍历关键词 ，为关键词添加链接。如在本例中对关键词jquery,css,插件,javascript添加了链接,使用正则忽略关键词的大小写。

function KeywordAddLink(json) {
    $.each(json,function(key, value) {
          if(json[key] instanceof Object){
              TraversalJson(json[key]);
          }else{
              $('.box p').each(function(){
                    var reg=new RegExp(key,'ig');
                    $(this).html($(this).html().replace(reg, '<a href="'+json[key]+'">'+key+'</a>'));
              });
          }
    });
}

cluetip插件为术语添加说明,说明的术语有 排版 、富媒体

function TermInfo(json){
  $.each(json,function(key, value) {
    $('.box p').each(function(){
          var reg=new RegExp(key,'ig');
          $(this).html($(this).html().replace(reg, '<a href="#" title="'+key+'|'+json[key]+'" class="term">'+key+'</a>'));
    });
  });   
}
$('.box a.term').cluetip({
    splitTitle: '|',
    sticky: true,
    closeText: '<img src="http://1100w.com/ref/cluetip/cross.png" alt="关闭" />',
    closePosition: 'title',
    dropShadow: false,
    positionBy: 'mouse'
    //truncate: 60
});

本例使用的数据,在寻找关键词和术语时，使用的是两个json数据。

var keywords={'jquery':'http://www.1100w.com/category/jquery/','css':'http://www.1100w.com/category/css/','插件':'http://www.1100w.com/tag/jquery%e6%8f%92%e4%bb%b6/','javascript':'http://www.1100w.com/category/javascript/'};
var terms={'排版':'在固定版面内，排版摆置各种不同型态的数据，如数字、文字、表格、图形和图像等等，以最合适的方法呈现。印刷品中的版面安排，网页文案的编排，若要引人注意和阅读上的舒适，皆应留意排版方面的问题。','富媒体':'富媒体包括多媒体（二维和三维动画、影像及声音）。它包括HTML、Java scripts, Interstitial间隙窗口，Microsoft Netshow、RealVideo，和RealAudio，Flash等等，随着技术的进步，名单可能会进一步加长。'};

五、测试环境

ie8以上浏览器、chrome版本 29.0.1547.76 m、firefox12.0测试通过

测试地址：http://1100w.com/ref/p/page.html