针对ie6 用层来实现select的title 提示属性 (增加含有滚动条情况的支持)
2010-02-23 09:53
609 查看
//
function opts(selectObj){
if(Browser.ie6 == false){
return;
}
var optDivs=document.createElement("div");
optDivs.className="tbl-container";
var objTable=document.createElement("table");
var objTbody=document.createElement("tbody");
optDivs.style.zIndex = "100";
objTable.style.zIndex = "100";
objTable.width=selectObj.style.width;
objTable.border = "0";
objTable.cellSpacing = "0";
objTable.cellPadding = "0";
objTable.className = "ctl";
var e = selectObj;
var absTop = e.offsetTop;
var absLeft = e.offsetLeft;
var absWidth = e.offsetWidth;
var absHeight = e.offsetHeight;
while(e = e.offsetParent){
absTop += (e.offsetTop+0.3);
absLeft += e.offsetLeft;
}
with (objTable.style){
position = "absolute";
top = 0;
left = 0;
border = "1px solid black";
tableLayout="fixed";
wordBreak="break-all";
}
with (optDivs.style){
position = "absolute";
top = (absTop + absHeight) + "px";
left = (absLeft+1) + "px";
tableLayout="fixed";
wordBreak="break-all";
backgroundColor = document.bgColor;
}
var options = selectObj.options;
var val=selectObj.value;
if (options.length > 0){
for (var i = 0; i < options.length; i++){
var newOptDiv = document.createElement("td");
var objRow=document.createElement("tr");
newOptDiv.name=options[i].value;
newOptDiv.innerHTML=options[i].innerHTML;
newOptDiv.title=options[i].title;
newOptDiv.onmouseout = function() {this.className='smouseOut';val=selectObj.value};
newOptDiv.onmouseover = function() {this.className='smouseOver';val=this.name;};
newOptDiv.className="smouseOut";
newOptDiv.style.width=1000;
newOptDiv.style.cursor="default";
newOptDiv.style.fontSize = "12px";
objRow.appendChild(newOptDiv);
objTbody.appendChild(objRow);
}
}
objTbody.appendChild(objRow);
objTable.appendChild(objTbody);
optDivs.appendChild(objTable);
document.body.appendChild(optDivs);
if(objTable.offsetHeight > 120){
optDivs.style.height = 120;
optDivs.style.overflowY = "scroll";
}else{
optDivs.style.height = objTable.offsetHeight;
}
var IfrRef = document.createElement("div");
IfrRef.style.position="absolute";
IfrRef.style.width = optDivs.offsetWidth;
IfrRef.style.height = optDivs.offsetHeight;
IfrRef.style.top = optDivs.style.top;
IfrRef.style.left = optDivs.style.left;
IfrRef.style.backgroundColor = document.bgColor;
document.body.appendChild(IfrRef);
optDivs.focus();
optDivs.onblur=function() {choose(selectObj,val,optDivs,IfrRef)};
}
function choose(objselect,val,delobj,delobj2){
objselect.value=val;
document.body.removeChild(delobj);
document.body.removeChild(delobj2);
}
Browser = (function(ua){
var b = {
msie: /msie/.test(ua) && !/opera/.test(ua),
opera: /opera/.test(ua),
safari: /webkit/.test(ua) && !/chrome/.test(ua),
firefox: /firefox/.test(ua),
chrome: /chrome/.test(ua)
};
var vMark = "";
for (var i in b) {
if (b[i]) { vMark = "safari" == i ? "version" : i; break; }
}
b.version = vMark && RegExp("(?:" + vMark + ")[\\/: ]([\\d.]+)").test(ua) ? RegExp.$1 : "0";
b.ie = b.msie;
b.ie6 = b.msie && parseInt(b.version, 10) == 6;
b.ie7 = b.msie && parseInt(b.version, 10) == 7;
b.ie8 = b.msie && parseInt(b.version, 10) == 8;
return b;
})(window.navigator.userAgent.toLowerCase());
// ]]>
aaaaaaaaaaaaaaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
cccccccccccccccccccccccc
aaaaaaaaaaaaaaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
cccccccccccccccccccccccc
aaaaaaaaaaaaaaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
加入了对数据太多，增加含有滚动条的支持。。。。把样式的一部分从js里面拿出来设置。这里采用了consatan提供的样式.同时也为了方便使用者自定义自己的样式。
因为只有ie6没有在option 里面支持title属性，所以其他浏览器直接忽略了。（code里面判断了浏览器）
代码
function opts(selectObj){
if(Browser.ie6 == false){
return;
}
var optDivs=document.createElement("div");
optDivs.className="tbl-container";
var objTable=document.createElement("table");
var objTbody=document.createElement("tbody");
optDivs.style.zIndex = "100";
objTable.style.zIndex = "100";
objTable.width=selectObj.style.width;
objTable.border = "0";
objTable.cellSpacing = "0";
objTable.cellPadding = "0";
objTable.className = "ctl";
var e = selectObj;
var absTop = e.offsetTop;
var absLeft = e.offsetLeft;
var absWidth = e.offsetWidth;
var absHeight = e.offsetHeight;
while(e = e.offsetParent){
absTop += (e.offsetTop+0.3);
absLeft += e.offsetLeft;
}
with (objTable.style){
position = "absolute";
top = 0;
left = 0;
border = "1px solid black";
tableLayout="fixed";
wordBreak="break-all";
}
with (optDivs.style){
position = "absolute";
top = (absTop + absHeight) + "px";
left = (absLeft+1) + "px";
tableLayout="fixed";
wordBreak="break-all";
backgroundColor = document.bgColor;
}
var options = selectObj.options;
var val=selectObj.value;
if (options.length > 0){
for (var i = 0; i < options.length; i++){
var newOptDiv = document.createElement("td");
var objRow=document.createElement("tr");
newOptDiv.name=options[i].value;
newOptDiv.innerHTML=options[i].innerHTML;
newOptDiv.title=options[i].title;
newOptDiv.onmouseout = function() {this.className='smouseOut';val=selectObj.value};
newOptDiv.onmouseover = function() {this.className='smouseOver';val=this.name;};
newOptDiv.className="smouseOut";
newOptDiv.style.width=1000;
newOptDiv.style.cursor="default";
newOptDiv.style.fontSize = "12px";
objRow.appendChild(newOptDiv);
objTbody.appendChild(objRow);
}
}
objTbody.appendChild(objRow);
objTable.appendChild(objTbody);
optDivs.appendChild(objTable);
document.body.appendChild(optDivs);
if(objTable.offsetHeight > 120){
optDivs.style.height = 120;
optDivs.style.overflowY = "scroll";
}else{
optDivs.style.height = objTable.offsetHeight;
}
var IfrRef = document.createElement("div");
IfrRef.style.position="absolute";
IfrRef.style.width = optDivs.offsetWidth;
IfrRef.style.height = optDivs.offsetHeight;
IfrRef.style.top = optDivs.style.top;
IfrRef.style.left = optDivs.style.left;
IfrRef.style.backgroundColor = document.bgColor;
document.body.appendChild(IfrRef);
optDivs.focus();
optDivs.onblur=function() {choose(selectObj,val,optDivs,IfrRef)};
}
function choose(objselect,val,delobj,delobj2){
objselect.value=val;
document.body.removeChild(delobj);
document.body.removeChild(delobj2);
}
Browser = (function(ua){
var b = {
msie: /msie/.test(ua) && !/opera/.test(ua),
opera: /opera/.test(ua),
safari: /webkit/.test(ua) && !/chrome/.test(ua),
firefox: /firefox/.test(ua),
chrome: /chrome/.test(ua)
};
var vMark = "";
for (var i in b) {
if (b[i]) { vMark = "safari" == i ? "version" : i; break; }
}
b.version = vMark && RegExp("(?:" + vMark + ")[\\/: ]([\\d.]+)").test(ua) ? RegExp.$1 : "0";
b.ie = b.msie;
b.ie6 = b.msie && parseInt(b.version, 10) == 6;
b.ie7 = b.msie && parseInt(b.version, 10) == 7;
b.ie8 = b.msie && parseInt(b.version, 10) == 8;
return b;
})(window.navigator.userAgent.toLowerCase());
// ]]>
aaaaaaaaaaaaaaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
cccccccccccccccccccccccc
aaaaaaaaaaaaaaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
cccccccccccccccccccccccc
aaaaaaaaaaaaaaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
加入了对数据太多，增加含有滚动条的支持。。。。把样式的一部分从js里面拿出来设置。这里采用了consatan提供的样式.同时也为了方便使用者自定义自己的样式。
因为只有ie6没有在option 里面支持title属性，所以其他浏览器直接忽略了。（code里面判断了浏览器）
代码
<HTML>
<HEAD>
</HEAD>
<BODY>
<STYLE>
.tbl-container {
position:relative;border:2px solid red;width:100px;overflow:hidden;margin:0px;
font-Family:Verdana, Arial, Helvetica, sans-serif;
}
.smouseOut {
background: document.bgColor;
color: #000000;
}
.smouseOver {
background: rgb(0,128,128);
color: #FFFFFF;
cursor: pointer;
}
.ctl{ table-layout:fixed ;top:0;}
.ctl td{text-overflow:ellipsis;overflow:hidden;white-space: nowrap;padding:2px}
</style>
<SCRIPT language="javascript">
function opts(selectObj){
if(Browser.ie6 == false){
return;
}
var optDivs=document.createElement("div");
optDivs.className="tbl-container";
var objTable=document.createElement("table");
var objTbody=document.createElement("tbody");
optDivs.style.zIndex = "100";
objTable.style.zIndex = "100";
objTable.width=selectObj.style.width;
objTable.border = "0";
objTable.cellSpacing = "0";
objTable.cellPadding = "0";
objTable.className = "ctl";
var e = selectObj;
var absTop = e.offsetTop;
var absLeft = e.offsetLeft;
var absWidth = e.offsetWidth;
var absHeight = e.offsetHeight;
while(e = e.offsetParent){
absTop += (e.offsetTop+0.3);
absLeft += e.offsetLeft;
}
with (objTable.style){
position = "absolute";
top = 0;
left = 0;
border = "1px solid black";
tableLayout="fixed";
wordBreak="break-all";
}
with (optDivs.style){
position = "absolute";
top = (absTop + absHeight) + "px";
left = (absLeft+1) + "px";
tableLayout="fixed";
wordBreak="break-all";
backgroundColor = document.bgColor;
}
var options = selectObj.options;
var val=selectObj.value;
if (options.length > 0){
for (var i = 0; i < options.length; i++){
var newOptDiv = document.createElement("td");
var objRow=document.createElement("tr");
newOptDiv.name=options[i].value;
newOptDiv.innerHTML=options[i].innerHTML;
newOptDiv.title=options[i].title;
newOptDiv.onmouseout = function() {this.className='smouseOut';val=selectObj.value};
newOptDiv.onmouseover = function() {this.className='smouseOver';val=this.name;};
newOptDiv.className="smouseOut";
newOptDiv.style.width=1000;
newOptDiv.style.cursor="default";
newOptDiv.style.fontSize = "12px";
objRow.appendChild(newOptDiv);
objTbody.appendChild(objRow);
}
}
objTbody.appendChild(objRow);
objTable.appendChild(objTbody);
optDivs.appendChild(objTable);
document.body.appendChild(optDivs);
if(objTable.offsetHeight > 120){
optDivs.style.height = 120;
optDivs.style.overflowY = "scroll";
}else{
optDivs.style.height = objTable.offsetHeight;
}
var IfrRef = document.createElement("div");
IfrRef.style.position="absolute";
IfrRef.style.width = optDivs.offsetWidth;
IfrRef.style.height = optDivs.offsetHeight;
IfrRef.style.top = optDivs.style.top;
IfrRef.style.left = optDivs.style.left;
IfrRef.style.backgroundColor = document.bgColor;
document.body.appendChild(IfrRef);
optDivs.focus();
optDivs.onblur=function() {choose(selectObj,val,optDivs,IfrRef)};
}
function choose(objselect,val,delobj,delobj2){
objselect.value=val;
document.body.removeChild(delobj);
document.body.removeChild(delobj2);
}
Browser = (function(ua){
var b = {
msie: /msie/.test(ua) && !/opera/.test(ua),
opera: /opera/.test(ua),
safari: /webkit/.test(ua) && !/chrome/.test(ua),
firefox: /firefox/.test(ua),
chrome: /chrome/.test(ua)
};
var vMark = "";
for (var i in b) {
if (b[i]) { vMark = "safari" == i ? "version" : i; break; }
}
b.version = vMark && RegExp("(?:" + vMark + ")[\\/: ]([\\d.]+)").test(ua) ? RegExp.$1 : "0";
b.ie = b.msie;
b.ie6 = b.msie && parseInt(b.version, 10) == 6;
b.ie7 = b.msie && parseInt(b.version, 10) == 7;
b.ie8 = b.msie && parseInt(b.version, 10) == 8;
return b;
})(window.navigator.userAgent.toLowerCase());
</SCRIPT>
sdfsfsdf
<select name='selId' size=1 style= 'width:100px' onclick="opts(this);" >
<option value='111' title="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa">aaaaaaaaaaaaaaaaaaaaaaaaaaaa</option>
<option value='222' title="bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</option>
<option value='3333' title="cccccccccccccccccccccccccccccccc">cccccccccccccccccccccccc</option>
<option value='4444' title="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa">aaaaaaaaaaaaaaaaaaaaaaaaaaaa</option>
<option value='55555' title="bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</option>
<option value='66666' title="cccccccccccccccccccccccccccccccc">cccccccccccccccccccccccc</option>
<option value='77777' title="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa">aaaaaaaaaaaaaaaaaaaaaaaaaaaa</option>
<option value='88888' title="bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</option>
</select>
</BODY>
</HTML>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- js下用层来实现select的title提示属性
- js下用层来实现select的title提示属性
- HO3003: IE6 IE7 IE8(Q) 中 IMG 元素的 alt 属性在没有 title 属性的情况下会被当作提示信息使用
- 使用原生JavaScript实现对select增加option标签并附加value属性
- 为 SELECT.options 对象增加或删除选项的方法在各浏览器中的支持情况不同
- 跟我做背景变暗，弹出提示层的功能,而且增加了对Select对象的支持
- 为 SELECT 对象增加或删除选项的方法在各浏览器中的支持情况不同
- 有一个图书馆系统，含有Book和BookMaster两个类。Book可以用来设置书的属性(如title)，BookMaster每天做的事情就是根据上级的要求重设设定某些书的title，以增加借阅者的注意力，让更多的人对书有新的兴趣
- ie8 对于select标签<option>属性的text属性不支持的一种情况
- 实现 IE6 下支持 position-fixed 的 CSS 属性并解决“振动”的问题
- 让ie6,ie7,ie8支持 css3 的部分属性实现全兼容
- 实现 IE6 支持 position fixed 的 CSS 属性
- EZNamespaceExtensions.Net v2013增加对上下文菜单、缩略图、图标、属性表的支持
- javscript实现滚动条滚动到页面底部自动加载增加页面内容
- VS+SqlServe 在引用了webservice后刷新数据时提示：已超过传入消息(65536)的最大消息大小配额若要增加配额请使用相应绑定元素上 MaxReceivedMessageSize 属性
- AutoCompleteTextView输入汉字拼音首字母实现过滤提示（支持多音字）
- 蛙蛙推荐:让title属性支持html
- 【原】解决 ie6下select 控件的selected属性无效
- 鼠标悬停显示提示语句，使用title属性即可显示
- VS2005下自定义用户控件 如何实现属性及方法的相关智能提示