87,921
社区成员
发帖
与我相关
我的任务
分享急，请问怎么样去用层和文本框模拟下拉列表框，
要求如下：
1。利用文本框去代替html控件的下拉框。后面有一个图像按钮，当单击这个图像按钮的时候，在这个文本框下面去展开层，层中是要展示的数据，就像普通下拉列表单击展开那样。
2。在这个层中去展示一个菜单， 菜单代码已经写好，如何将这个代码应用到层上？
谢谢大家！
1。利用文本框去代替html控件的下拉框。后面有一个图像按钮，当单击这个图像按钮的时候，在这个文本框下面去展开层，层中是要展示的数据，就像普通下拉列表单击展开那样。
2。在这个层中去展示一个菜单， 菜单代码已经写好，如何将这个代码应用到层上？
谢谢大家！
...全文
请发表友善的回复…
发表回复
懒得去死 2006-12-17
- 打赏
- 举报
<title>自定义列表框</title>
<style>
.selectDiv { border: 2px solid inset buttonface;}
.optionDiv { border:1px solid black;border-top:0px;position:absolute;cursor:default;clip:rect(auto auto 0% auto);}
.optionDiv div { font-size:11px;font-family:Tahoma;padding-left:8px;line-height:160%;background-color:white;}
.optionDiv img { vertical-align: middle;margin-right:3px;}
.defaultSelect { font-size:11px;font-family:Tahoma;padding-left:6px;border:1px solid white;cursor:default;}
.defaultSelect img { vertical-align: middle;margin-right:3px;}
.arrow { font-family:webdings;line-height:13px;border:2px outset buttonhighlight;background-color:buttonface;width:15px;text-align:center;cursor:default;font-size:8px;height:18px;}
</style>
<body>
<span id="sel"></span><button style="font-family:Arial;font-size:10px;width:22px;height:18px;margin-top:4px;" onclick="putValue()">Go</button>
<SCRIPT LANGUAGE="JavaScript">
//用户变量
var oWhere = document.getElementById("sel");
//显示文字
var OptionText = new Array();
OptionText[0] = "--优秀网站--";
OptionText[1] = "piggydesign.yeah.net";
OptionText[2] = "蓝色理想";
OptionText[3] = "PcHome.net";
OptionText[4] = "Sina.com.cn";
//显示图片
var OptionImg = new Array();
OptionImg[0] = "";
OptionImg[1] = "";
OptionImg[2] = new Image(),OptionImg[2].src="http://www.sayee.com/cloudchen/js/images/blueidea.gif";
OptionImg[3] = new Image(),OptionImg[3].src="http://www.sayee.com/cloudchen/js/images/pchome.gif";
OptionImg[4] = new Image(),OptionImg[4].src="http://www.sayee.com/cloudchen/js/images/sina.gif";
var OptionValue = new Array();
OptionValue[0] = "";
OptionValue[1] = "http://piggydesign.yeah.net";
OptionValue[2] = "http://www.blueidea.com";
OptionValue[3] = "http://www.pchome.net";
OptionValue[4] = "http://www.sina.com.cn";
//系统变量
var selectedOver = false;
var selectedValue = 0;
//下拉菜单主体
var selectDiv = document.createElement("table");
var selectDivTR = selectDiv.insertRow();
var defaultValueTD = selectDivTR.insertCell();
var arrow = selectDivTR.insertCell();
with(selectDiv)cellSpacing=0,cellPadding=0,border=0,className="selectDiv";
with(defaultValueTD)innerHTML = showOptionImg(1)+OptionText[0],className="defaultSelect";
with(arrow)innerText=6,className="arrow";
oWhere.appendChild(selectDiv);
//外层Div
var optionDiv = document.createElement("div");
//设置下拉菜单选项的坐标和宽度
with(optionDiv.style) {
var select = selectDiv;
var xy = getSelectPosition(select);
pixelLeft = xy[0];
pixelTop = xy[1]+select.offsetHeight;
optionDiv.className = "optionDiv";
}
//下拉菜单内容
var Options = new Array();
for (var i=0;i<OptionText.length;i++) {
Options[i] = optionDiv.appendChild(document.createElement("div"));
}
for (i=0;i<Options.length;i++) {
Options[i].innerHTML = showOptionImg(i)+OptionText[i];
Options[i].index = i;
}
oWhere.appendChild(optionDiv);
//列表宽度自适应
var SelectWidth = Options[0].offsetWidth+arrow.offsetWidth+8;
selectDiv.style.width=SelectWidth;;
optionDiv.style.width=SelectWidth;
/*事件*/
//禁止选择文本
selectDiv.onselectstart = function() {return false;}
optionDiv.onselectstart = function() {return false;}
//下拉菜单的箭头
arrow.onmousedown = function() {
this.setCapture();
this.style.borderStyle="inset";
}
arrow.onmouseup = function() {
event.cancelBubble = true;
this.style.borderStyle="outset";
this.releaseCapture();
showHide();
}
document.onmouseup = function() {
optionDiv.style.clip="rect(auto auto 0% auto)";
if(selectedOver) {
with(defaultValueTD.style)background="",color="";
selectedOver=false;
}
}
defaultValueTD.onmouseup = function() {
event.cancelBubble = true;
showHide();
}
//移动Option时的动态效果
for (i=0;i<Options.length;i++) {
Options[i].attachEvent("onmouseover",function(){moveWithOptions("highlight","white")});
Options[i].attachEvent("onmouseout",function(){moveWithOptions("","")});
Options[i].attachEvent("onmouseup",selectedText);
}
function moveWithOptions(bg,color) {
with(event.srcElement) {
style.backgroundColor = bg;
style.color = color;
}
}
function selectedText() {
event.cancelBubble=true;
defaultValueTD.innerHTML = event.srcElement.innerHTML;
with(defaultValueTD.style)background="highlight",color="white";
optionDiv.style.clip="rect(auto auto 0% auto)";
selectedOver = true;
selectedValue = event.srcElement.index;
}
i = 0;
/*通用函数*/
//获取对象坐标
function getSelectPosition(obj) {
var objLeft = obj.offsetLeft;
var objTop = obj.offsetTop;
var objParent = obj.offsetParent;
while (objParent.tagName != "BODY") {
objLeft += objParent.offsetLeft;
objTop += objParent.offsetTop;
objParent = objParent.offsetParent;
}
return([objLeft,objTop]);
}
function showOptionImg(index) {
var imgSrc = OptionImg[index].src;
if (imgSrc!=undefined)
return("<img src="+OptionImg[index].src+">")
else
return("");
}
function dynamicOptions() {
optionDiv.style.clip="rect(auto auto "+i+"% auto)",i=i+20;
if(i<101)
setTimeout("dynamicOptions()",5);
else
i=0;
}
function showHide() {
with(optionDiv.style) {
if (clip=="rect(auto auto 0% auto)"||clip=="")
dynamicOptions();
else
clip="rect(auto auto 0% auto)";
}
}
function putValue() {
var url = OptionValue[selectedValue];
if (url) window.open(url)
}
</SCRIPT>
<style>
.selectDiv { border: 2px solid inset buttonface;}
.optionDiv { border:1px solid black;border-top:0px;position:absolute;cursor:default;clip:rect(auto auto 0% auto);}
.optionDiv div { font-size:11px;font-family:Tahoma;padding-left:8px;line-height:160%;background-color:white;}
.optionDiv img { vertical-align: middle;margin-right:3px;}
.defaultSelect { font-size:11px;font-family:Tahoma;padding-left:6px;border:1px solid white;cursor:default;}
.defaultSelect img { vertical-align: middle;margin-right:3px;}
.arrow { font-family:webdings;line-height:13px;border:2px outset buttonhighlight;background-color:buttonface;width:15px;text-align:center;cursor:default;font-size:8px;height:18px;}
</style>
<body>
<span id="sel"></span><button style="font-family:Arial;font-size:10px;width:22px;height:18px;margin-top:4px;" onclick="putValue()">Go</button>
<SCRIPT LANGUAGE="JavaScript">
//用户变量
var oWhere = document.getElementById("sel");
//显示文字
var OptionText = new Array();
OptionText[0] = "--优秀网站--";
OptionText[1] = "piggydesign.yeah.net";
OptionText[2] = "蓝色理想";
OptionText[3] = "PcHome.net";
OptionText[4] = "Sina.com.cn";
//显示图片
var OptionImg = new Array();
OptionImg[0] = "";
OptionImg[1] = "";
OptionImg[2] = new Image(),OptionImg[2].src="http://www.sayee.com/cloudchen/js/images/blueidea.gif";
OptionImg[3] = new Image(),OptionImg[3].src="http://www.sayee.com/cloudchen/js/images/pchome.gif";
OptionImg[4] = new Image(),OptionImg[4].src="http://www.sayee.com/cloudchen/js/images/sina.gif";
var OptionValue = new Array();
OptionValue[0] = "";
OptionValue[1] = "http://piggydesign.yeah.net";
OptionValue[2] = "http://www.blueidea.com";
OptionValue[3] = "http://www.pchome.net";
OptionValue[4] = "http://www.sina.com.cn";
//系统变量
var selectedOver = false;
var selectedValue = 0;
//下拉菜单主体
var selectDiv = document.createElement("table");
var selectDivTR = selectDiv.insertRow();
var defaultValueTD = selectDivTR.insertCell();
var arrow = selectDivTR.insertCell();
with(selectDiv)cellSpacing=0,cellPadding=0,border=0,className="selectDiv";
with(defaultValueTD)innerHTML = showOptionImg(1)+OptionText[0],className="defaultSelect";
with(arrow)innerText=6,className="arrow";
oWhere.appendChild(selectDiv);
//外层Div
var optionDiv = document.createElement("div");
//设置下拉菜单选项的坐标和宽度
with(optionDiv.style) {
var select = selectDiv;
var xy = getSelectPosition(select);
pixelLeft = xy[0];
pixelTop = xy[1]+select.offsetHeight;
optionDiv.className = "optionDiv";
}
//下拉菜单内容
var Options = new Array();
for (var i=0;i<OptionText.length;i++) {
Options[i] = optionDiv.appendChild(document.createElement("div"));
}
for (i=0;i<Options.length;i++) {
Options[i].innerHTML = showOptionImg(i)+OptionText[i];
Options[i].index = i;
}
oWhere.appendChild(optionDiv);
//列表宽度自适应
var SelectWidth = Options[0].offsetWidth+arrow.offsetWidth+8;
selectDiv.style.width=SelectWidth;;
optionDiv.style.width=SelectWidth;
/*事件*/
//禁止选择文本
selectDiv.onselectstart = function() {return false;}
optionDiv.onselectstart = function() {return false;}
//下拉菜单的箭头
arrow.onmousedown = function() {
this.setCapture();
this.style.borderStyle="inset";
}
arrow.onmouseup = function() {
event.cancelBubble = true;
this.style.borderStyle="outset";
this.releaseCapture();
showHide();
}
document.onmouseup = function() {
optionDiv.style.clip="rect(auto auto 0% auto)";
if(selectedOver) {
with(defaultValueTD.style)background="",color="";
selectedOver=false;
}
}
defaultValueTD.onmouseup = function() {
event.cancelBubble = true;
showHide();
}
//移动Option时的动态效果
for (i=0;i<Options.length;i++) {
Options[i].attachEvent("onmouseover",function(){moveWithOptions("highlight","white")});
Options[i].attachEvent("onmouseout",function(){moveWithOptions("","")});
Options[i].attachEvent("onmouseup",selectedText);
}
function moveWithOptions(bg,color) {
with(event.srcElement) {
style.backgroundColor = bg;
style.color = color;
}
}
function selectedText() {
event.cancelBubble=true;
defaultValueTD.innerHTML = event.srcElement.innerHTML;
with(defaultValueTD.style)background="highlight",color="white";
optionDiv.style.clip="rect(auto auto 0% auto)";
selectedOver = true;
selectedValue = event.srcElement.index;
}
i = 0;
/*通用函数*/
//获取对象坐标
function getSelectPosition(obj) {
var objLeft = obj.offsetLeft;
var objTop = obj.offsetTop;
var objParent = obj.offsetParent;
while (objParent.tagName != "BODY") {
objLeft += objParent.offsetLeft;
objTop += objParent.offsetTop;
objParent = objParent.offsetParent;
}
return([objLeft,objTop]);
}
function showOptionImg(index) {
var imgSrc = OptionImg[index].src;
if (imgSrc!=undefined)
return("<img src="+OptionImg[index].src+">")
else
return("");
}
function dynamicOptions() {
optionDiv.style.clip="rect(auto auto "+i+"% auto)",i=i+20;
if(i<101)
setTimeout("dynamicOptions()",5);
else
i=0;
}
function showHide() {
with(optionDiv.style) {
if (clip=="rect(auto auto 0% auto)"||clip=="")
dynamicOptions();
else
clip="rect(auto auto 0% auto)";
}
}
function putValue() {
var url = OptionValue[selectedValue];
if (url) window.open(url)
}
</SCRIPT>
懒得去死 2006-12-17
- 打赏
- 举报
1.http://www.blueidea.com/tech/web/2003/1327.asp
2.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<script language="javascript">
function run(){
var a_div = document.getElementById("A");
if(a_div.style.display != 'none'){
a_div.style.display = 'none';
}else{
a_div.style.display = 'block';
}
}
</script>
<input type=button value=菜单 onclick="run()" />
<div id="A" style="display:none;">
<ul>
<li>1.菜单1</li>
<li>1.菜单1</li>
<li>1.菜单1</li>
<li>1.菜单1</li>
</div>
</BODY>
</HTML>
2.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<script language="javascript">
function run(){
var a_div = document.getElementById("A");
if(a_div.style.display != 'none'){
a_div.style.display = 'none';
}else{
a_div.style.display = 'block';
}
}
</script>
<input type=button value=菜单 onclick="run()" />
<div id="A" style="display:none;">
<ul>
<li>1.菜单1</li>
<li>1.菜单1</li>
<li>1.菜单1</li>
<li>1.菜单1</li>
</div>
</BODY>
</HTML>
zysoft17 2006-12-17
- 打赏
- 举报
<BODY>
<script language="javascript">
function run(){
if(document.all.A.style.display != 'none'){
document.all.A.style.display = 'none';
}else{
document.all.A.style.display = '';
}
}
</script>
<input type=button value=菜单 onclick="run()" />
<div id="A" style="display:none;">
<ul>
<li>1.菜单1</li>
<li>1.菜单1</li>
<li>1.菜单1</li>
<li>1.菜单1</li>
</div>
</BODY>
<script language="javascript">
function run(){
if(document.all.A.style.display != 'none'){
document.all.A.style.display = 'none';
}else{
document.all.A.style.display = '';
}
}
</script>
<input type=button value=菜单 onclick="run()" />
<div id="A" style="display:none;">
<ul>
<li>1.菜单1</li>
<li>1.菜单1</li>
<li>1.菜单1</li>
<li>1.菜单1</li>
</div>
</BODY>
