Home » jQuery 外掛

[jQ]readmore 1.1.1

[ 日期： | 瀏覽：13,781 | 迴響：1 ]
範例 1
請協助我把這個效果加到我的網站 (只要 100 元)
沒錯!只要 100 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!



當一段文章內容很長時，通常都會利用像是繼續閱讀的方式來只顯示部份內容，剩下的部份可能得要等瀏覽者按下繼續閱讀鈕後才會顯示完整的部份。而 readmore 則是幫各位設計師寫好這樣效果的套件。

套件名稱：readmore
套件版本：1.1.1
作者網站：http://rockycode.com/blog/jquery-plugin-readmore/
套件網址：http://plugins.jquery.com/project/readmore
發佈日期：2010-07-29
檔案大小：1.28 KB
檔案下載：jquery.readmore.js

參數說明：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11

substr_len(選填)
描述： 能顯示的內容長度
預設值： 500
 
ellipses(選填)
描述： 當超過長度時的省略符號
預設值： '…'
 
more_link(選填)
描述： 顯示繼續閱讀的超連結
預設值： '<a class="more">Read&nbsp;More</a>'

方法說明：

檢視原始碼 JavaScript
1
2
3
4
5

// 把指定的區塊加上 readmore 效果
$(selector).readmore(settings);
 
// 修改預設的參數
$.readmore.defaults = settings;

使用範例：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.readmore.js"></script>
<style type="text/css">
	.more {
		font-weight: bold;
		color: #ffa73f;
		cursor: pointer;
	}
</style>
<script type="text/javascript">
	$(function($) {
		// 只顯示 110 字, 其它的需要按下繼續閱讀才會顯示
		$(".short").readmore({
			substr_len: 110, 
			more_link: '<a class="more">繼續閱讀</a>'
		});
	});
</script>
 
<body>
	<p class="short">
		SAN ANGELO, Texas (AP) — Warren Jeffs was convicted Thursday of sexually assaulting two child brides after a whirlwind trial in which the polygamist sect leader insisted on representing himself, only to remain silent through much of the proceedings and present just one witness — a church elder who gave an extended Sunday school lesson on its beliefs.
 
		The tall and lanky head of the Fundamentalist Church of Jesus Christ of Latter Day Saints stood stone-faced as a verdict of guilty on two counts of sexual assault of underage girls was read, after the jury of 10 women and two men deliberated for 3½ hours. He had stood mute during his closing argument, staring at the floor for all but a few seconds of the half hour he was allotted.
 
		At one point, he turned and looked toward prosecutors and the jury, most of whom avoided direct eye contact with him. "I am at peace," he mumbled, then said no more. The only noise in the courtroom was the creaking of wooden benches brimming with spectators.
	</p>
</body>
範例 1

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

備註：
.hidden 是隱藏起來的內容區塊所套用的樣式；.more 則是繼續閱讀所套用的樣式。

1 筆針對 [jQ]readmore 1.1.1 的迴響

發表迴響