前几天在工作的时候,测试提了个BUG,我们的系统有很多的地方用的SELECT框把框中的信息给遮挡了,为了解决这个问题想了很多方法,一开始想弄一个横向的滚动条,可是网上给出的资料很少,于是想到用一个小TIP信息来提醒是不是也可以呢,所以写了以下的代码:
var oP=window.createPopup();
var oPopBody;
function showTip(Sobj){
var Sindex = Sobj.selectedIndex;
if(Sindex>=0){
var Svalue = Sobj.options[Sindex].text;
var Slen = Svalue.length*10;
oPopBody= oP.document.body;
oPopBody.style.background="#fdfce9";
oPopBody.style.border="solid black 1px";
oPopBody.innerHTML="<div style='font-family:Arial;font-size:12px;'>"+Svalue+"</div>";
if(Slen>90){
oP.show(window.event.clientX+10,window.event.clientY+10,Slen+40,20,document.body);
}
}
}
function hideTip(Sobj){
if(oP.isOpen){
oP.hide();
}
}
以下为JSP代码:
<select name="seeit" size="5" style="overflow-x:scroll;width:100" οnclick="showTip(this)" οnmοuseοut= "hideTip(this)">
<option title="html中的文字太长,列表框中显示不完整,麻烦大家了" value="f">html中的文字太长,列表框中显示不完整,麻烦大家了</option>
<option title="听说是用js代码实现,麻烦给个例子,谢谢 " value="d" style="width:auto">听说是用js代码实现,麻烦给个例子,谢谢 </option>
<option title="或者鼠标指在某条上,显示完整的文字也行">或者鼠标指在某条上,显示完整的文字也行</option>
<option title="或者鼠标指在某条上,显示完整的文字也行">或者鼠标指在某条上,显示完整的文字也行</option>
<option title="或者鼠标指在某条上,显示完整的文字也行">或者鼠标指在某条上,显示完整的文字也行</option>
<option title="或者鼠标指在某条上,显示完整的文字也行">或者鼠标指在某条上,显示完整的文字也行</option>
<option title="或者鼠标指在某条上,显示完整的文字也行">或者鼠标指在某条上,显示完整的文字也行</option>
</select>
好了,一切搞定!