zoukankan      html  css  js  c++  java
  • 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);
    });
  • 相关阅读:
    Error:Execution failed for task ':app:transformClassesWithDexForDebug'.
    Appcan——Box
    基于SSH框架的网上商城的质量属性
    框架的选择
    软件体系结构的认识
    Cocos2d-x项目创建方式
    一、设计模式简介
    数组与字符串四(例子、使用(2))
    数组与字符串三(Cocos2d-x 3.x _Array容器)
    数组与字符串二(例子、使用)
  • 原文地址:https://www.cnblogs.com/jine/p/2626006.html
Copyright © 2011-2022 走看看