jQuery根據(jù)設置的字數(shù)截斷過長標題并在末尾加上“…”

jQuery插件代碼內(nèi)容:
可以直接寫在頁面里,也可以另存為一個jQuery插件,命名為 jQuery_limit.js 然后再調(diào)用...
<script type="text/javascript">
jQuery.fn.limit=function(){
//這里的div去掉的話,就可以運用li和其他元素上了,否則就只能div使用。
var self = $("div[limit]");
self.each(function(){
var objString = $(this).text();
var objLength = $(this).text().length;
var num = $(this).attr("limit");
if(objLength > num){
//這里可以設置鼠標移動上去后顯示標題全文的title屬性,可去掉。
$(this).attr("title",objString);
objString = $(this).text(objString.substring(0,num) + "...");
}
})
}
</script>
==================================

jQuery代碼內(nèi)容:
<script type="text/javascript">
$(document).ready(function(){
$(document.body).limit();
})
</script>

==================================

測試用的Html代碼:可以看到,如果不去掉插件代碼里的div,則只有div屬性的會被影響...
<div limit="2">計算字串的長度長度長度長度</div>
<div limit="12">計算字長度長度</div>
<li limit="4">這邊有優(yōu)化很公開這邊</li>
<li limit="14">這邊有優(yōu)化很公開這邊這邊有優(yōu)化很公開這邊</li>
<dt limit="12">這邊有優(yōu)化很公開長度長度很公開長度</dt>
<dd limit="10">這邊有優(yōu)化很邊有優(yōu)化很邊有優(yōu)化很邊有優(yōu)化很邊有優(yōu)化很</dd>

轉(zhuǎn)載自:http://blog.sina.com.cn/s/blog_724008890101dfqh.html

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內(nèi)容

  • 工廠模式類似于現(xiàn)實生活中的工廠可以產(chǎn)生大量相似的商品,去做同樣的事情,實現(xiàn)同樣的效果;這時候需要使用工廠模式。簡單...
    舟漁行舟閱讀 7,808評論 2 17
  • 1.JQuery 基礎 改變web開發(fā)人員創(chuàng)造搞交互性界面的方式。設計者無需花費時間糾纏JS復雜的高級特性。 1....
    LaBaby_閱讀 1,367評論 0 2
  • <a name='html'>HTML</a> Doctype作用?標準模式與兼容模式各有什么區(qū)別? (1)、<...
    clark124閱讀 3,540評論 1 19
  • @轉(zhuǎn)自GitHub 介紹js的基本數(shù)據(jù)類型。Undefined、Null、Boolean、Number、Strin...
    YT_Zou閱讀 1,184評論 0 0
  • 1.JQuery 基礎 改變web開發(fā)人員創(chuàng)造搞交互性界面的方式。設計者無需花費時間糾纏JS復雜的高級特性。 1....
    LaBaby_閱讀 1,199評論 0 1