鼠标移入截取的字符串将显示全部字符串及改变它的字符串的样式

  由于协议标题，最多可以输入50字；当协议标题比较长时，页面就会产生滚动条；这样使得布局很不协调，用户体验很差。于是我擅自主张，做了这个功能，效果图如下：

实现操作的步骤：

1）将协议标题截取成指定的字符串

2）鼠标移动到字体上，显示题目的全部信息，字体颜色改变并加上下划线

3）鼠标移出时，回复原样。

 

代码如下：

<script type="text/javascript">
 
        var pageindex = 1;
        var pagesize = 10;
        var pagecount = 0;
        var init = function () {
           
            $.ajax({
                url: "../Handler/AgreementHandler.ashx?pageIndex=" + pageindex + "&pageSize=" + pagesize,
                type: "Post",
                dataType: "json",
                data: {
                    operType: "query",
                    listType: '<%=AgreementTypeResult%>'
                },
                success: function (data) {
                    Render(data);
                    //鼠标在协议Tile的移入或移出效果
                    ChangeTitleStyle();
                },
                error: function (error) {
                    showerrortip("加载数据失败，请稍后再试！");
                }
 
            });
        }
 
 
        //绑定协议表数据
        var Render = function (data) {
            $("#data").empty();
            var resultStr = "";
            var listData = data.ListData;
 
            $(eval(listData)).each(function (i) {
                //调用setString（）截取，概要标题内容
                var strTitle=setString(this['Title'],20,"");
                //var strTitle=this['Title'].substring(0,10);
                //调用setString（）截取，概要概要内容
                var strIntroduction = setString(this['Introduction'], 30,"...");
                resultStr += "<tr>";
                resultStr += '<td>        <div class="checkbox" οnclick="check(this);"><input type="checkbox" id="' + this['Code'] + '" name="items"></div></td>';
                resultStr += "<td >";
               resultStr +='<a class="All" name="showAllInfo" href="javascript:void(0);" title="'+this['Title']+'" >'+strTitle+'</a>';
                resultStr += "</td>";
                resultStr += "<td>" + strIntroduction + "</td>";
                if (this['ModifyTime'] == "/Date(-62135596800000)/") {
                    resultStr += "<td>------</td>";
                } else {
 
                    resultStr += "<td>" + DateFormat(this['ModifyTime'], "yyyy-MM-dd hh:mm") + "</td>";
                }
 
……
 
 
};
}
 
 
 
 //截取字符串，str需要截取的字符串，len截取字符串的长度，strReplace剩余字符串的取代方式
        function setString(str, len,strReplace) {
            var strlen = 0;
            var s = "";
            for (var i = 0; i < str.length; i++) {
                if (str.charCodeAt(i) > 128) {
                    strlen += 2;
                } else {
                    strlen++;
                }
                s += str.charAt(i);
                if (strlen >= len) {
                    return s + strReplace;
                }
            }
            return s;
        }
 
//鼠标移入和移出产生的效果
function ChangeTitleStyle(){
              //hover事件：当鼠标移上该元素时，执行第一个函数；移出时，执行第二个元素
           $(".All").hover(function(){
                $(this).css('color', 'blue');
                $(this).css('text-decoration','underline');
              
            },
            function(){
                $(this).css('color', 'black');
                $(this).css('text-decoration','none');
                })
        };
 

小结：

这种效果，虽然没有要求，但是我把他尽量做到让自己满意。呵呵，这样也算是对工作的一种态度，和对自己的一种肯定吧！