2011-08-19 55 views
1

我正在使用名爲Autoellipsis的jQuery插件。添加閱讀更多鏈接到jQuery Autoellipsis? (Autoellipsis在固定高度的文本末尾添加「...」)

它在固定高度的文本末尾添加「...」。

例如:

隨着省略號和高度:

<div style="height 20px;"> 

Lorem存有悲坐阿梅特,consectetuer adipiscing ELIT,sed的直徑 nonummy NIBH euismod tincidunt UT laoreet dolore蚤aliquam ERAT volutpat ...

</div> 

沒有省略號,也沒有高度:

<div> 

Lorem存有悲坐阿梅德,consectetuer adipiscing ELIT,sed的直徑 nonummy NIBH euismod tincidunt UT laoreet dolore麥格納aliquam ERAT volutpat Lorem存有悲坐阿梅德,consectetuer adipiscing elit,sed diam dolore magna aliquam erat volutpat。

</div> 

申請省略號,你只需要做到這一點 (省略號僅應用如果元素具有高度):

// Apply ellipsis 
    $j('.reply-content p').ellipsis(); 

HTML:

<div class="reply-content"> 
<span class="topic-author-link"> 
<span class="topic-post-date"> 
<span class="bbp-admin-links"> 
<p> 
<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam dolore magna aliquam erat volutpat.</div> 
</p> 

<!-- etc... --> 

我想添加一個閱讀更多按鈕:

Lorem存有悲坐阿梅德,consectetuer adipiscing ELIT,sed的直徑 nonummy NIBH euismod tincidunt UT laoreet dolore麥格納aliquam ERAT volutpat euismod tincidunt UT laore tincidunt UT laoreet ...... 讀更多

所以在省略號後點擊read more鏈接時,出現全文(例如,只保留兩行文字)。

任何建議來完成此?

編輯:

插件選項(以防萬一):

.ellipsis([選擇器],[選項])

jQuery的選擇執行省略號。可選選擇器定義將受省略號操作影響的子元素 。 選擇器選擇子元素以執行省略號 的選擇器。如果沒有給出選擇器,則插件默認對所有子元素執行 省略號。選項 傳遞給方法的附加選項的映射。支持的有:

ellipsis要使用的省略號字符或字符串。默認爲 「...」(三個點)。

setTitle設置受影響元素的標題屬性爲 原始內容。永遠可以設置爲永遠,onEllipsis或 。使用onEllipsis時,只有在元素的內容確實爲省略時,title屬性纔會被設置爲 。從不默認爲 。

live設置爲true時,對當前和未來的 元素執行與jQuery選擇匹配的元素。當目標元素的尺寸發生變化時,還會重新應用省略號 。謹慎使用,因爲此 模式輪詢選擇元素。默認爲false。

該方法返回用於鏈接目的的jQuery對象。

回答

1

從插件的來源,設置對象看起來像這樣:

var defaultSettings = { 
    ellipsis: '...', 
    setTitle: 'never', 
    live: false 
}; 

所以ellipsis選項實際上並不是一個字符,而是(默認)三個字符。代碼的快速脫脂不轉了任何明顯的斑點,在使用魔法之三,所以有一個很好的機會,你可以簡單地提供一個不同的ellipsis選項,如

ellipsis : ' <a href="something">Read More...</a>'; 

這當然是可能的事情可能打破,但這是一個開始。

+0

謝謝,但現在如何讓全文出現? (順便說一句,我發現在那裏留下一個空間掛着瀏覽器)。 – alexchenco

+0

@alexchenco如果你需要一個空間,你可以使用「no break space」代碼String.fromCharCode(160),例如:ellipsis:String.fromCharCode(160)+'...',它在之前添加了空格。 。 – Tadej