由于协议标题,最多可以输入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');
})
};
小结:
这种效果,虽然没有要求,但是我把他尽量做到让自己满意。呵呵,这样也算是对工作的一种态度,和对自己的一种肯定吧!