js下用層來(lái)實(shí)現(xiàn)select的title提示屬性
更新時(shí)間:2010年02月23日 15:05:02 作者:
用層來(lái)實(shí)現(xiàn)select的title 提示屬性
復(fù)制代碼 代碼如下:
<script>
function opts(selectObj){
var optDivs=document.createElement("div");
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.cellPadding = "0";
objTable.cellSpacing = "0";
objTable.style.paddingLeft = "2";
objTable.style.fontFamily = "Verdana, Arial, Helvetica, sans-serif";
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 = (absTop + absHeight) + "px";
left = (absLeft+1) + "px";
border = "1px solid black";
tableLayout="fixed";
wordBreak="break-all";
}
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.innerText=options[i].innerText;
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=40;
newOptDiv.style.cursor="default";
newOptDiv.style.fontSize = "11px";
newOptDiv.style.fontFamily = "Verdana, Arial, Helvetica, sans-serif";
objRow.appendChild(newOptDiv);
objTbody.appendChild(objRow);
}
}
objTbody.appendChild(objRow);
objTable.appendChild(objTbody);
optDivs.appendChild(objTable);
document.body.appendChild(optDivs);
var IfrRef = document.createElement("div");
IfrRef.style.position="absolute";
IfrRef.style.width = objTable.offsetWidth;
IfrRef.style.height = objTable.offsetHeight;
IfrRef.style.top = objTable.style.top;
IfrRef.style.left = objTable.style.left;
IfrRef.style.backgroundColor = document.bgColor;
document.body.appendChild(IfrRef);
objTable.focus();
objTable.onblur=function() {choose(selectObj,val,optDivs,IfrRef)};
}
function choose(objselect,val,delobj,delobj2){
objselect.value=val;
document.body.removeChild(delobj);
document.body.removeChild(delobj2);
}
</script>
<STYLE>
.smouseOut {
background: document.bgColor;
color: #000000;
}
.smouseOver {
background: rgb(0,128,128);
color: #FFFFFF;
cursor: pointer;
}
</style>
<select id='selId' style='width:50px' class='black' onclick="opts(this);">
<option value='1' title="One....">111</option>
<option value='2' title="Two....">222</option>
</select>
您可能感興趣的文章:
- js實(shí)現(xiàn)動(dòng)畫特效的文字鏈接鼠標(biāo)懸停提示的方法
- jQuery懸停文字提示框插件jquery.tooltipster.js用法示例【附demo源碼下載】
- js 文字超出長(zhǎng)度用省略號(hào)代替,鼠標(biāo)懸停并以懸浮框顯示實(shí)例
- js實(shí)現(xiàn)鼠標(biāo)懸停圖片上時(shí)滾動(dòng)文字說(shuō)明的方法
- js實(shí)現(xiàn)文字垂直滾動(dòng)和鼠標(biāo)懸停效果
- 基于JS代碼實(shí)現(xiàn)當(dāng)鼠標(biāo)懸停表格上顯示這一格的全部?jī)?nèi)容
- Javascript仿新浪游戲頻道鼠標(biāo)懸停顯示子菜單效果
- CSS或者JS實(shí)現(xiàn)鼠標(biāo)懸停顯示另一元素
- JS實(shí)現(xiàn)title標(biāo)題欄文字不間斷滾動(dòng)顯示效果
- js鼠標(biāo)移動(dòng)在title中顯示圖片的效果代碼
- 一個(gè)JS函數(shù)搞定網(wǎng)頁(yè)標(biāo)題(title)閃動(dòng)效果
- JS實(shí)現(xiàn)TITLE懸停長(zhǎng)久顯示效果完整示例
相關(guān)文章
checkbox實(shí)現(xiàn)全選的多種方法 不斷更新
checkbox實(shí)現(xiàn)全選的多種方法 不斷更新...2006-07-07在一個(gè)form用一個(gè)SUBMIT(或button)分別提交到兩個(gè)處理表單頁(yè)面的代碼
在一個(gè)form用一個(gè)SUBMIT(或button)分別提交到兩個(gè)處理表單頁(yè)面的代碼...2007-02-02select列表內(nèi)容交換的js實(shí)現(xiàn)代碼
js實(shí)現(xiàn)左右select列表內(nèi)容交換傳遞,原來(lái)就是先獲取當(dāng)期選中select的值,然后添加到對(duì)面的select中,然后刪除選中內(nèi)容。2009-12-12解決表單中第一個(gè)非隱藏的元素獲得焦點(diǎn)的一個(gè)方案
解決表單中第一個(gè)非隱藏的元素獲得焦點(diǎn)的一個(gè)方案2009-10-10