jQuery插件綜合應用(二)文字爲主的頁面

1、介紹

文字內容是每一個網站都有的內容，網站在展現文字內容時，老是比圖片、視頻等富媒體內容要難一些，由於富媒體容易被用戶接受。尤爲是越多的文字內容越難以被用戶通篇的閱讀，跳躍式閱讀每每是閱讀的主要方式。 那麼作爲站長的咱們，該如何使用戶輕鬆閱讀咱們寫的文章，也是很是重要的事情，由於咱們發佈一篇文章，目的是爲了供網友閱讀，產生共鳴。若是發佈一篇文章沒人看，或者看完了也不知道文章在說些什麼，那發佈文章也沒有意義。

爲了使用戶輕鬆閱讀文章，改進的方面主要有如下3點。1)文章的選題，作爲開發人員，能夠選擇 工做中遇到或解決的問題，或學習的內容作爲文章的主題。2）寫做技巧，怎樣寫文章，寫文章注意的事項，從小在語文課中學習的寫做技巧。3）文章的佈局（排版），本文的主要內容。書面文章可能千篇一概，文字基本也就幾種格式如宋體、仿宋體等，行距固定，字體大小也基本固定，顏色也基本以黑色爲主（彩色圖書除外）。

而在博客中發佈文章，咱們能夠合理的毫無限制的使用文字的字體、大小、顏色等，也能夠在文章中添加圖片、視頻等信息。咱們經過使用html+css+js能夠提供更好地閱讀體驗。

而本文主要講解經過html+css提供文章頁面佈局，jquery插件提供豐富的閱讀體驗。

在說明實現的功能以前，先以圖書的形式進行說明。圖書是相關文章的彙總，對咱們閱讀者來講，最主要的內容有：1）目錄，多是翻閱一本書時最早瀏覽的地方。方便咱們知道圖書的內容如何組織，也方便咱們跳躍式的閱讀。2）內容，涉及到具體的知識和操做。3）引用和術語解釋，尤爲是翻譯的圖書，在圖書的最後或每章的後面都有引用或術語說明，以附錄的形式表示。固然圖書還有前言、做者介紹等說明，但重要性相對低一些。因此在本文中只實現目錄、內容和引用術語說明3個功能。

2、使用的插件

目錄：
咱們在發佈文章時，若是可以合理的使用h2標記表示」章「、h3標記表示」節「。那麼咱們就能夠用js遍歷body，提取出所有的h2,h3造成文章的「章-節」。在本文只是測試jquery插件的綜合應用，因此目錄是人工輸入的。

而後咱們使用scrolltofixed,scrollTo兩個插件實現目錄固定、內容滾動，向用戶提供跳躍式閱讀的功能。

內容：
對設置的關鍵詞以連接的方式顯示，如網站設置的分類，點擊關鍵詞連接，跳轉到相應的分類。以遍歷的方式尋找文章中的關鍵詞，加連接（不遍歷代碼中的，如type=’text/javascript’,文章中出現的’javascript’關鍵詞加連接，代碼中的不予添加）。

引用和術語解釋：
使用cluetip插件直接在文章中以提示框的形式對術語進行解釋。

插件的使用說明能夠看下面的文章

網站開發經常使用jQuery插件總結(13)定位插件scrollto
網站開發經常使用jQuery插件總結(12)固定元素插件scrolltofixed
網站開發經常使用jQuery插件總結(六)關鍵詞說明插件cluetip

3、插件實現的功能

scrolltofixed插件：
頁面滾動時固定「目錄」的位置。

scrollTo插件：
滾動到指定元素的位置，按「目錄」可進行跳躍式閱讀。

cluetip插件：
對術語或引用進行說明。

backstretch插件：
添加頁面（body）和頭部(header)的背景，只是爲了增長頁面美觀，在選擇背景圖片時，對於圖片的要求是質量越高越好（如清晰度，圖片大小等）。backstretch插件只能適當使用，若是設置的背景圖片過大，加載會很是緩慢，若是圖片過小，背景模糊甚至變形（本文只是演示插件的使用，圖片來自於網絡）。使用說明能夠看 網站開發經常使用jQuery插件總結(七)背景插件backstretch

4、實現流程

頁面樣式：
主要用於定義頁面居中顯示、雙列、邊距、字體格式、大小等。具體信息看「測試頁面」。

插件的樣式：
主要定義了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等等，隨着技術的進步，名單可能會進一步加長。'};

5、測試環境

ie8以上瀏覽器、chrome版本 29.0.1547.76 m、firefox12.0測試經過

測試地址：http://1100w.com/ref/p/page.html