2010年3月5日 星期五

jquery 截斷超出字並加上省略號

這plugin 還不錯, 若是能加上 中英文寬度判別應該就更完美了.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>cookie</title>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<style>
*{ margin:0; padding:0;font-family:"宋體",Arial, Helvetica, sans-serif;}
#best{ width:300px; height:200px; border:1px solid #ccc; margin:60px auto 0; line-height:1.6; font-size:14px; padding:10px 0 0 10px}
.blank{ font-size:18px; font-weight:bold; text-align:center; padding:20px}
</style>
<script type="text/javascript">
jQuery.fn.limit=function(){
        var self = $("[@limit]");
        self.each(function(){
                var objString = $(this).text();
                var objLength = $(this).text().length;
                var num = $(this).attr("limit");
                if(objLength > num){
                                                $(this).attr("title",objString);
                        objString = $(this).text(objString.substring(0,num) + "...");
                }
        })
}
$(function(){
        $("[@limit]").limit();
})
</script>
</head>
<body>
        <div class="blank">請按F5刷新頁面。。。。</div>
<div id="best">
        <div limit="12">計算字串的長度長度長度長度</div>
        <div limit="10">這邊有優化很公開這邊</div>
        <div limit="12">這邊有優化很公開長度長度很公開長度</div>
        <div limit="12">計算字長度長度</div>
        <div limit="10">這邊有優化很邊有優化很邊有優化很邊有優化很邊有優化很</div>
</div>

</body>
</html>


加強版有過濾中英文

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>cookie</title>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<style>
*{ margin:0; padding:0;font-family:"宋體",Arial, Helvetica, sans-serif;}
#best{ width:300px; height:200px; border:1px solid #ccc; margin:60px auto 0; line-height:1.6; font-size:14px; padding:10px 0 0 10px}
.blank{ font-size:18px; font-weight:bold; text-align:center; padding:20px}
</style>
<script type="text/javascript">
String.prototype.mylength = function(){
var arr = this.match(/[\u00FF-\uFFFF]/gi);
if(!arr || arr==null)
return this.length;
var len = this.length + arr.length;
return len;
}
String.prototype.mysubstring = function(limit){
var len = 0;
var arr = [];
for(var i=0;i<this.length;i++){
var it = this.substring(i,i+1);
len += it.mylength();
if(len > limit)
break;
arr[arr.length] = it;
}

var result = arr.join("");
return result;
}

jQuery.fn.limit = function(){
$(this).each(function(){
var mylimit = parseInt($(this).attr("limit"));
var applied = $(this).attr("applied");
if(applied)
return;
var text = $(this).text();
var original_text = text;
if(text.mylength() > mylimit){
text = text.mysubstring(mylimit);
text += "…";
text = "<SPAN style=\"position:relative\"><SPAN class='tooltip'>" + original_text + "</SPAN>" + text + "</SPAN>";
$(this).html(text);
$(this).mouseover(function(){
$(this).find(".tooltip").css("display","");
});
$(this).mouseout(function(){
$(this).find(".tooltip").css("display","none");
});
$(this).find(".tooltip")
.css({ 'display':'block',
'position':'absolute',
'top':'2em',
'left':'2em',
'width':'15em',
'border':'1px solid #0cf',
'background-color':'#cff',
'color':'#000',
'text-align':'center',
'word-wrap':'break-word',
'word-break':'break-all'})
.css("display","none");
$(this).attr("applied",true);
}
});
}

$(function(){
$("[limit]").limit();
});
</script>
</head>
<body>
<div class="blank">請按F5刷新頁面。。。。</div>
<div id="best">
<div limit="7">abcd計算字串的長度長度長度長度</div>
<div limit="10">這邊有優化很公開這邊</div>
<div limit="12">這邊有優化很公開長度長度很公開長度</div>
<div limit="12">計算字長度長度</div>
<div limit="10">這邊有優化很邊有優化很邊有優化很邊有優化很邊有優化很</div>
</div>
</body>
</html>

【下列文章您可能也有興趣】

沒有留言: