jQuery插件——长字符串改为显示部分字符串+伸缩图标

来源:互联网 发布:mac口红辩真假 编辑:程序博客网 时间:2024/06/07 04:53

一直以来, 长字符串在表格中的处理都是非常麻烦的:截短了看不到,看到了页面难看……

本人发了个“恨”, 用半天时间写好这个玩意, 免得以后烦人吧。

//=====================================================================  //插件名称: CutString  //作    者: yenange//功能说明: 设置 字符个数,在超过时显示部分字符串和 ">>"//          ">>"点击时会展开显示全部内容, 变为 "<<"//输入参数: charLength: 字符长度超过多少个时  //调用示例: $(function(){ $("#xxx li").CutString(25) });      //输出参数://创建日期: 2014-11-11(function ($) {    jQuery.fn.CutString = function (charLength) {        $(this).each(function(){            var fullString = $(this).text();            if(fullString==null || typeof(fullString)=="undefined" || fullString.length<=charLength){                return true;            }            var cutString = fullString.substring(0, charLength);            $(this).text( cutString );            //内面加多一层,类似: <li><span>xxx</span></li>            $(this).wrapInner(function(){                return "<span></span>";            });                        var $cutFlag = $("<span style='color:red;cursor:pointer;' title='展开' >>></span>");            $cutFlag.data("full", fullString)                .data("cut", cutString)                .data("open", "0");                        $(this).append($cutFlag);                        $(this).click(function(){                var open = $cutFlag.data("open");                var $txt = $cutFlag.prev();                $cutFlag.text(open=='0'?"<<":">>")                       .data("open", open=='0'?'1':'0')                       .attr("title", open=='0'?'收缩':'展开');                $txt.text( open=='0' ? $cutFlag.data("full") : $cutFlag.data("cut") );            });        });    }})(jQuery);


1 0
原创粉丝点击