实现目标：点击链接，显示下拉菜单效果。
如同点击论坛上面的“搜索”和“快速链接”，以求尽可能通用。
2008-07-01, 15:21
|
#7 (页面定位) |
|
萌爸
 
注册日期: 2005-08-31
住址: Chin@Net
帖子: 17024
  |
看看这个行么？
代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#keleSelect{
TEXT-DECORATION: none;
}
body {
margin:0;
padding:0;
}
</style>
<script type="text/javascript" >
var ary = new Array;
var tableAlign = "left" // left|right
ary.push( {
img:"",
url:"http://www.kele-cn.cn",
title:"回复所有人"
}) ;
ary.push( {
img:"",
url:"http://www.kele-cn.cn",
title:"转发"
});
ary.push( {
img:"",
url:"http://www.kele-cn.cn",
title:"打印"
});
ary.push( {
img:"",
url:"http://www.kele-cn.cn",
title:"将 rubyonrails-spinoffs 添加到通讯录"
});
ary.push( {
img:"",
url:"http://www.kele-cn.cn",
title:"删除此邮件"
});
ary.push( {
img:"",
url:"http://www.kele-cn.cn",
title:"这是网络欺诈"
});
ary.push( {
img:"",
url:"http://www.kele-cn.cn",
title:"显示原始邮件"
});
ary.push( {
img:"",
url:"http://www.kele-cn.cn",
title:"邮件内容出现乱码?"
});
function addOnLoad(newFunction) {
var oldFun = window.onload;
if(typeof window.onload != "function") {
window.onload = newFunction;
}else {
window.onload = function() {
oldFun();
newFunction();
}
}
}
function trOnclick(obj) {
var keleKey = document.getElementById("keleKey");
var url = ary[obj.i].url + "?key=" + keleKey.value;
location.href = url;
}
function prepareKeleTable() {
var keleTr = document.getElementById("keleTable").getElementsByTagName("tr");
var trCount = keleTr.length
for(var i=0;i<trCount;++i) {
keleTr[i].onmouseout = function() {this.style.backgroundColor = "#EEEEEE";};
keleTr[i].onmouseover = function() {this.style.backgroundColor = "#CCCCCC";};
keleTr[i].onclick = function(){ trOnclick(this); }
}
}
/**
*
* @param {Object} table
* @info 设置table样式
*/
function keleSelectStyle(obj,table) {
table.style.border = "#CCCCCC solid 1px";
table.style.backgroundColor = "#EEEEEE";
table.style.color="#496397";
table.style.borderCollapse="collapse";
table.style.fontFamily = "arial,sans-serif";
table.style.fontSize = "14px";
table.style.lineHeight="20px";
table.style.position = "absolute";
table.style.top = obj["offsetHeight"]+ calculateOffsetTop(obj) + "px";
if (tableAlign == "left") {
table.style.left = calculateOffsetLeft(obj) + "px";
} else {
table.style.right = document.body.offsetWidth - calculateOffsetLeft(obj) -obj.offsetWidth + "px";
}
}
function keleSelectOnclick(obj){
clearTable();
var table = document.createElement("table");
table.setAttribute("id","keleTable");
keleSelectStyle(obj,table);
var tbody = document.createElement("tbody");
for(var i=0;i<ary.length;++i) {
var tr = document.createElement("tr");
tr.i = i;
var td1 = document.createElement("td");
var td2 = createTd(ary[i].title);
var img = createImg(ary[i].img);
td1.style.padding = "1px";
td1.width = "18px";
td1.appendChild(img);
td2.style.padding = "1px";
tr.appendChild(td1);
tr.appendChild(td2);
tr.style.cursor = "pointer";
tbody.appendChild(tr);
}
table.appendChild(tbody);
document.body.appendChild(table);
prepareKeleTable();
/*
if(document.getElementById("keleTable")) {
alert("yes");
alert(document.getElementById("keleTable").innerHTML);
} else {
alert("no");
}
*/
}
function prepareKeleSelect() {
var keleSelect = document.getElementById("keleSelect");
keleSelect.onblur = function() { setTimeout("clearTable()",100);}
keleSelect.onclick = function() { keleSelectOnclick(this); return false;};
}
function calculateOffsetLeft(field) {
return calculateOffset(field,"offsetLeft");
}
function calculateOffsetTop(field) {
return calculateOffset(field,"offsetTop");
}
function calculateOffset(field,attr) {
if(field) {
return field[attr] + calculateOffset(field.offsetParent, attr);
} else {
return 0;
}
}
function clearTable() {
if(!document.getElementById("keleTable")) return false;
var keleTable = document.getElementById("keleTable");
document.body.removeChild(keleTable);
}
function createTd(text){
var td = document.createElement("td");
var textNode = document.createTextNode(text);
td.appendChild(textNode);
return td;
}
function createImg(url) {
if (url != "") {
var img = document.createElement("img");
img.setAttribute("src", url);
return img;
} else {
var text = document.createTextNode(" ");
return text;
}
}
addOnLoad(prepareKeleSelect);
</script>
</head>
<body>
<div style="margin:0 auto;text-align:center;">
<h1><a id="keleSelect" href="#"></>OnClick</a></h1>
<input type="hidden" id="keleKey" name="keleKey" value="KeleKeyyyyyyyy">
</div>
</body>
</html>
 QQ：382121 
|
|
|
平板模式
