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

来源：互联网发布：知乎专栏怎么样编辑：程序博客网时间：2024/06/11 20:26

由于协议标题，最多可以输入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" onclick="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');                })        };

小结：

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

0 0