jquery实战--定宽

大家有没有遇到过一个问题，就是一个列表，或是一段文字过多时，截取多余的部分用省略号，好吧，证明你实力的时候到了，我下面先分解一下方法，再用插件写出来,首先我们说的是，用到的第一个方法，就是判断一个字符串多少个字节。

function lengthB(str){var num=0,len =str.length;if(len){for(i =0; i<len;i++){if(str.charCodeAt(i)>255){num+=2;}else{num+=1;    }}}else{return 0;}return num;
}

lengthB,这个方法，是返回str的字节数，charCodeAt(i),返回字符的ascii码值，>255，为中文，就是2个字节，否则，为英文一个字节。

测试看看

var num =lengthB("test多少个字节");
alert(num);

第二个重点来了，传入参数，str（被截取的字符串）,length(定宽的宽度)，最后返回截取的截取的字符串。

function substringB(str , length){var temp="",num=0;_len = lengthB(str);if(_len){if(_len<length){return str;}else{for(var i =0; i<length; i++){if(num>=length){break;}if(str.charCodeAt(i)>255){num+=2;temp+=str.charAt(i);}else{num+=1;temp+=str.charAt(i);}}return temp;}}else{return null;}}

第三步：终极方法，相比第二个方法，多了第三个参数，默认是“...”

function fixedWidth(str,length,char){var str = str.toString();if(!char){var char ="..."}    var num = length - lengthB(str);if(num<0){str = substringB(str,length-lengthB(char))+char;}return str;
}

注意，返回的str，要把char的字节数减掉哦。

下面来封装一下插件哦，这里我做的是全局的，（大家试下jquery对象打方法封装插件。下节我再公布）

(function($){$.extend($,{fixedWidth :function(str,length,char){var str = str.toString();if(!char){var char ="..."}    var num = length - lengthB(str);if(num<0){str = substringB(str,length-lengthB(char))+char;}return str;function lengthB(str){var num=0,len =str.length;if(len){for(i =0; i<len;i++){if(str.charCodeAt(i)>255){num+=2;}else{num+=1;    }}}else{return 0;}return num;}function substringB(str , length){var temp="",num=0;_len = lengthB(str);if(_len){if(_len<length){return str;}else{for(var i =0; i<length; i++){if(num>=length){break;}if(str.charCodeAt(i)>255){num+=2;temp+=str.charAt(i);}else{num+=1;temp+=str.charAt(i);}}return temp;}}else{return null;}}}});
})(jQuery);

调用：

$(function(){var str1 = jQuery.fixedWidth("ddddddfagfa",7);alert(str1);
});

转载于:https://www.cnblogs.com/jine/archive/2012/08/07/2626006.html

jquery实战--定宽相关推荐

jquery实战-定宽（二）
上一节,我提了个问题给大家,说是用jquery对象方法来封装对象,你们做好了吗,现在我把我自己写的代码,供大家参考,当然了,我写的肯定不是最好的,就当时抛砖引玉吧,你们更好, ;(function($ ...
[WebApp]定宽网页设计下，固定宽度布局开发WebApp并实现多终端下WebApp布局自适应...
前言由于博主最近宝宝出生,工作上更换项目组,白天晚上都比较忙碌,所以最近未登陆博客园,一些童鞋得留言未能及时查看回复,在此表示歉意.由于留言的童鞋大部分是希望我能发送一份测试代码,为了一劳永逸,我把 ...
CSS使用浮动属性和边距设计3行3列定宽的布局实例
CSS使用浮动属性和边距设计3行3列定宽的布局下面使用CSS的浮动属性和边距属性设计一个简单地3行3列并且是固定宽度的布局页面. 实例设计步骤如下: 1. 制作3行3列定宽布局的XHTML部分.源 ...
Web前端开发必备：《Jquery实战》第3版介绍
目标读者本书适合想深入学习jQuery的Web开发人员.全栈工程师.架构师.jQuery是互联网上最流行的JavaScript框架.本书的目标是希望读者成为Web高级开发人员,无论起点如何.本书深入 ...
vb.net2019-读取定宽文本文件-比如日志
0001 2019/04/01 Y-werqwerqwerwe 0002 2019/04/02 N-vvvad 0003 2019/04/02 Y-sfasf 0004 2019/04/02 Y-12 ...
jquery获取元素宽高
前言 jquery获取元素宽高 <!DOCTYPE html> <html lang="zh" > <head><meta charset ...
banner特效php,jQuery自适应通栏宽屏banner幻灯片切换特效
jQuery自适应通栏宽屏banner幻灯片切换特效这是一款代码简洁的jQuery自适应通栏宽屏banner幻灯片切换特效,jQuery自适应全屏BANNER焦点图代码. js代码 $(" ...
两列布局左边定宽，右边自适应
效果图: 代码如下: <html> <head> <title>文章标题</title> <meta http-equiv="Conte ...
【CSS】一侧定宽，另一侧自适应的布局该如何去做
一侧定宽,一侧自适应的页面布局在现在用的很多,有哪些实现方式呢? (个人总结,这个要看是左定右适.还是左适右定.视情况而定) 1, 左边固定,右边自适应:通过浮动和margin取正值来实现: 这里的原 ...

jquery实战--定宽

jquery实战--定宽相关推荐

最新文章

热门文章