自定義全文顯示插件

今天給大家帶來的是一個自定義的全文顯示插件，具體來說呢，就是當文章過長時，我們只希望特定地顯示幾行字符，然後點擊"顯示全文"的時候可以加載全文，那麼這個怎麼做呢？我想了想提供一種思路，就是根據獲取當前的文本，截取出特定個數的字符，就可以精確的控制初始化時顯示的文本了。就是下面截圖的樣子:

當點擊"顯示全部"的時候，就可以顯示全文了，同時提供了"收起文章"的選項，點擊可以收起文章。

廢話不多說了，直接貼代碼咯。

css樣式(這個就不多說了,只是在谷歌上測試了)：

* {
margin: 0;
padding: 0;
}
body {
font-family: "微軟雅黑";
font-size: 12px;
color: #222;
}
.article {
margin: 20px auto;
width: 512px;
border-radius: 5px;
padding: 10px;
box-shadow: 0 0 1em rgb(0,0,0);
}
.article p {
font-size: 14px;
text-indent: 28px;
text-align: justify;
}
.article p a {
text-decoration: none;
margin-left: 5px;
display: none;
}

插件js代碼：

(function($) {
$.fn.articleShow = function(option) {
// 默認樣式
var defaultOpt = {
'width' : '512',// 顯示的寬度
'showNum' : 112// 顯示的字數
}
var opts = $.extend(true, defaultOpt, option);
var $this = $(this);
var show_num = opts.showNum;
var showTexts = [];
$.each(opts.article, function(index, val) {
var show_text = val.substring(0, show_num);
showTexts.push(show_text);
if(val.length > show_num) {
// 添加dom節點
var $append_dom = $("<div class='article'><p data-index='"+ index +"'><span>"+ show_text +"</span>" +
"<a class='show_all' href='javascript:void(0);' title='顯示全部'>顯示全部>></a>" +
"<a class='hide_all' href='javascript:void(0);' title='收起全文'><<收起全文</a>" +
"</p></div>");
$this.prepend($append_dom);
$('.show_all').show();
}
});
(function() {
// 初始化寬度
$('.article').width(opts.width);
})();
$('.show_all').on('click', function(event) {
var index = parseInt($(this).parent('p').data('index'));
$(this).prev('span').text(opts.article[index]);
$(this).hide();
$(this).next('a.hide_all').show();
});
$('.hide_all').on('click', function(event) {
var index = parseInt($(this).parent('p').data('index'));
$(this).siblings('span').text(showTexts[index]);
$(this).prev('a.show_all').show();
$(this).hide();
});
}
})(jQuery);

調用代碼：

只需要在html文件中加入jquery的庫文件即可.

$('body').articleShow({
'width' : '500',
'showNum' : 150,
'article' : [
'全球票房超20億美元最新科幻動作大片《阿凡達》。卡梅隆這部歷時十餘年打造的史詩鉅作呈現了獨一無二的宏偉場面，壯觀的視野，激動人心的敘事以及迴歸自然的主題。自1997年《泰坦尼克號》在全球大熱之後，導演詹姆斯·卡梅隆的下一部電影令影迷等得幾乎望眼欲穿。對此，詹姆斯·卡梅隆表示:《阿凡達》能夠最終拍出來，是一次奇蹟。這是一部科幻電影，是我喜歡的東西，科幻電影要表現的是我們現在無法接觸到的事物，這是一種預言，它會讓你反思我們現在在做的一切，將來會發生什麼樣的後果？這就是我拍《阿凡達》的初衷之一，我對現在人類對大自然所做的一切感到深深的憂慮，我想將來也許會受到大自然的報復。故事開始於地球，傑克·薩利（Jake Sully，薩姆·沃辛頓　飾）是一個雙腿癱瘓的老兵，他覺得沒有任何東西值得他去戰鬥，因此當被要求去潘多拉星球到那裏的採礦公司工作時欣然接受。潘多拉星球上有一種別的地方都沒有的礦物元素"unobtanium\"，它將徹底改變人類的能源產業，正是受此吸引人類才不遠萬里來到這裏拓荒。不過資源豐富的潘多拉星球完全不適合人類生活，這裏的空氣對人類有毒，本土的動植物是兇猛的掠食者，非常危險。這裏的環境也造就了與人類不同的一羣生物：10英尺高的藍色類人生物\"Navi族"。Navi族對於人類拓荒者的到來非常不滿，他們也不喜歡人類的機器在這個星球的土地上到處挖礦、留下斑斑傷痕。由於潘多拉星球環境嚴酷，人類傳統的宇航服、機甲都不足以保護礦工，於是科學家們轉向了克隆技術：他們將人類DNA和Navi人的DNA結合在一起，製造了一個克隆Navi人，這個克隆Navi人可以讓人類的意識進駐其中，成爲人類在這個星球上自由活動的"化身\"。然而並不是任何人都可以操縱這個克隆Navi人，只有DNA與他身上人類DNA配型相符的人才有這樣的能力。傑克·薩利的哥哥是這個克隆Navi的人類DNA捐獻者，他就可以操縱這個克隆Navi人，然而他被殺死了，採礦的公司爲了不讓砸下去的錢白砸（克隆Navi人價格不菲），必須找到一個可以代替他操縱克隆Navi的人，這個人的DNA還必須和其配型相符，於是他們自然就找到了傑克·薩利，傑克·薩利對此很高興，應爲那意味着他又能走路了。幾年後，傑克·薩利到了潘多拉星球，他發現這裏的美景簡直無法用語言來形容，高達900英尺的參天巨樹、星羅棋佈飄浮在空中的羣山、色彩斑斕充滿奇特植物的茂密雨林、晚上各種動植物還會發出光……就如同夢中的奇幻花園。不過很快他就體驗到了這裏的危險，一頭毒狼（潘多拉星球一種本土生物）與他狹路相逢，眼看就要被吃掉，一支箭射死了毒狼，傑克得救了。救他的是Navi族的一個女孩（佐伊·薩爾達娜　飾），傑克從她口中瞭解到了更多潘多拉星球的知識。懶人圖庫Navi族人一直以來都與潘多拉星球的其他物種和諧相處，過着一種簡樸天然的生活，傑克在和這個Navi女孩的相處過程中逐漸轉變了對人類來這裏採礦的看法，他意識到他已經找到值得爲之戰鬥的東西了。不過傑克·薩利如果要加入Navi族人對抗人類入侵者的戰爭，要付出很大的代價：他並不能永遠呆在\"化身\"中，當"化身\"--克隆Navi人睡覺時，他就會回到自己半身不遂的人類身體中，只有通過專門的連接設備才能重新回到"化身\"中。一旦與自己的同胞爲敵，他就失去了與\"化身\"結合的可能，只能困在殘疾的身體裏，並失去那個他越來越喜歡的Navi女孩……',
'然所做的一切感到深深的憂慮，我想將來也許會受到大自然的報復。故事開始於地球，傑克·薩利（Jake Sully，薩姆·沃辛頓　飾）是一個雙腿癱瘓的老兵，他覺得沒有任何東西值得他去戰鬥，因此當被要求去潘多拉星球到那裏的採礦公司工作時欣然接受。潘多拉星球上有一種別的地方都沒有的礦物元素"unobtanium\"，它將徹底改變人類的能源產業，正是受此吸引人類才不遠萬里來到這裏拓荒。不過資源豐富的潘多拉星球完全不適合人類生活，這裏的空氣對人類有毒，本土的動植物是兇猛的掠食者，非常危險。這裏的環境也造就了與人類不同的一羣生物：10英尺高的藍色類人生物\"Navi族"。Navi族對於人類拓荒者的到來非常不滿，他們也不喜歡人類的機器在這個星球的土地上到處挖礦、留下斑斑傷痕。由於潘多拉星球環境嚴酷，人類傳統的宇航服、機甲都不足以保護礦工，於是科學家們轉向了克隆技術：他們將人類DNA和Navi人的DNA結合在一起，製造了一個克隆Navi人，這個克隆Navi人可以讓人類的意識進駐其中，成爲人類在這個星球上自由活動的"化身\"。然而並不是任何人都可以操縱這個克隆Navi人，只有DNA與他身上人類DNA配型相符的人才有這樣的能力。傑克·薩利的哥哥是這個克隆Navi的人類DNA捐獻者，他就可以操縱這個克隆Navi人，然而他被殺死了，採礦的公司爲了不讓砸下去的錢白砸（克隆Navi人價格不菲），必須找到一個可以代替他操縱克隆Navi的人，這個人的DNA還必須和其配型相符，於是他們自然就找到了傑克·薩利，傑克·薩利對此很高興，應爲那意味着他又能走路了。幾年後，傑克·薩利到了潘多拉星球，他發現這裏的美景簡直無法用語言來形容，高達900英尺的參天巨樹、星羅棋佈飄浮在空中的羣山、色'
]
});