弹出式选择！

FDH007 2003-07-16 01:57:14
今天我们老大说，不用下拉式列表了。改用弹出式选择！
就是在文本框后面加一个图标，点图标就弹出一个动态的div，
可以选取一项后显示在前面的文本框中！
大家帮帮忙啊！
已经是最多分了，我就只留10分以后问问题了1
...全文
59 2 打赏 收藏 转发到动态 举报
写回复
用AI写文章
2 条回复
切换为时间正序
请发表友善的回复…
发表回复
gzh_seagull 2003-07-16
  • 打赏
  • 举报
 回复
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style>
.selectOff
{
BORDER-RIGHT: medium none;
BORDER-TOP: medium none;
FONT-SIZE: 12px;
OVERFLOW: hidden;
BORDER-LEFT: medium none;
CURSOR: default;
BORDER-BOTTOM: #aaaaaa 1px solid;
BACKGROUND-COLOR: transparent
}
.selectOn
{
BORDER-RIGHT: 1px solid;
BORDER-TOP: 1px solid;
FONT-SIZE: 12px;
Z-INDEX: 1;
LEFT: -1000px;
VISIBILITY: hidden;
OVERFLOW: hidden;
BORDER-LEFT: 1px solid;
WIDTH: 0px;
CURSOR: default;
BORDER-BOTTOM: 1px solid;
FONT-FAMILY: ??¨??,Helvetica,Arial,Sans-Serif;
POSITION: absolute;
TOP: -1000px;
BACKGROUND-COLOR: #f0f0f0
}
.ednonedisable
{
BORDER-RIGHT: medium none;
BORDER-TOP: medium none;
FONT-SIZE: 12px;
BORDER-LEFT: medium none;
COLOR: #777777;
BORDER-BOTTOM: medium none;
BACKGROUND-COLOR: transparent
}
.selectItem
{
FONT-SIZE: 12px;
WIDTH: 100%;
LINE-HEIGHT: 16px
}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
selectObjs = false;
curSelectObj = null;
window.onresize=TryAdjustSelect;
setTimeout("SetOnFocusToHideSelect();",500);
function SetOnFocusToHideSelect()
{
var obj;
var i;
if (document.all){
document.body.onfocus = TryHideSelect;
obj = document.all.tags("TABLE");
for (i=0;i<obj.length;i++){
obj.item(i).onfocus = TryHideSelect;
}
obj = document.all.tags("TD");
for (i=0;i<obj.length;i++){
obj.item(i).onfocus = TryHideSelect;
}
obj = document.all.tags("A");
for (i=0;i<obj.length;i++){
obj.item(i).onfocus = TryHideSelect;
}
}
}

function RegisterSelect(selobj)
{
if (!selectObjs)
selectObjs = new Array();
selectObjs[selectObjs.length] = selobj;
}

function TryAdjustSelect()
{
if (selectObjs){
for (i=0;i<selectObjs.length;i++)
if (selectObjs[i].visible){
CalcSelectPosition(selectObjs[i]);
}
}
}

function TSelectObject(formVarH,formVarV,idOn,idOff,selectedIndex,nItems,onselectFunc)
{
this.formVarH = formVarH;
this.formVarV = formVarV;
this.idOn = idOn;
this.idOff = idOff;
this.selectedIndex = selectedIndex;
this.index0 = selectedIndex;
this.visible = false;
this.nItems = nItems;
this.onselect = onselectFunc;
return this;
}

function ToggleSelect(selobj)
{
if (selobj.visible)
HideSelect(selobj);
else
ShowSelect(selobj);
return;
}

function HighlightOption(selobj,i)
{
NormalOption(selobj,selobj.selectedIndex);
var obj = document.all[selobj.idOn+"_"+i];
obj.style.backgroundColor = "#113399";
obj.style.color = "#ffffff";
}

function NormalOption(selobj,i)
{
var obj = document.all[selobj.idOn+"_"+i];
obj.style.backgroundColor = "#f0f0f0";
obj.style.color = "#000";
}

function OptionClicked(selobj,idx,val)
{
var obj = document.all[selobj.idOn+"_"+idx];
var vstr = obj.innerText;
vstr = vstr.replace(/^( )+/,"");
var formObj=null;

formObj = FindFormByVarName(selobj.formVarH);
if (formObj!=null){
eval("formObj."+selobj.formVarV+".value = vstr;");
eval("formObj."+selobj.formVarH+".value = "+val+";");
}
selobj.selectedIndex = idx;
HideSelect(selobj);
if (selobj.onselect!=''){
eval(selobj.onselect+"("+val+");");
}
}

function CalcSelectPosition(selobj)
{
if (document.all){
var obj = document.all[selobj.idOff];
var left = 0;
var top = 0;
for (; obj!=document.body; obj=obj.offsetParent){
left += obj.offsetLeft;
top += obj.offsetTop;
}
obj = document.all[selobj.idOn].style;
obj.pixelLeft = left;
obj.pixelTop = top+document.all[selobj.idOff].offsetHeight+1;
obj.pixelWidth = document.all[selobj.idOff].offsetWidth;
if (selobj.nItems<=10){
obj.pixelHeight = selobj.nItems*16+2;
obj.overflow = "visible";
}
else{
obj.pixelHeight = 10*16+2;
obj.overflow = "auto";
}
}
}

function PreShowSelect(selobj)
{
obj = document.all[selobj.idOn].style;
obj.overflow = "hidden";
}

function ShowSelect(selobj)
{
if (document.all){
if (curSelectObj!=null)
HideSelect(curSelectObj);
selobj.visible = true;
document.all[selobj.idOn].style.visibility="visible";
CalcSelectPosition(selobj);
// document.all[selobj.idOn].focus();
// document.all[selobj.idOn+"_"+selobj.selectedIndex].scrollIntoView();
HighlightOption(selobj,selobj.selectedIndex);
curSelectObj = selobj;
}
}

function HideSelect(selobj)
{
if (document.all){
obj = document.all[selobj.idOn].style;
obj.visibility="hidden";
selobj.visible = false;
curSelectObj = null;
}
}

function DelayHideSelect(objname)
{
setTimeout("HideSelect("+objname+");",200);
}

function TryHideSelect()
{
if (curSelectObj!=null)
HideSelect(curSelectObj);
}

function EscapeHTMLString(str)
{
str = str+"";
str = str.replace(/ /g," ");
str = str.replace(/&/g,"&");
str = str.replace(/</g,"<");
str = str.replace(/>/g,">");
str = str.replace(/"/g,""");
str = str.replace(/ /g," ");
return str;
}

function GenSelItem(num,k,v)
{
var sobj = "selobj_"+tmp_select_vname;
var id = "selon_"+tmp_select_vname;
v = EscapeHTMLString(v);
document.write("<DIV CLASS=\"selectItem\" ID=\""+id+"_"+num+"\" ONCLICK=\"OptionClicked("+sobj+","+num+",'"+k+"');\" ONMOUSEOVER=\"HighlightOption("+sobj+","+num+");\" ONMOUSEOUT=\"NormalOption("+sobj+","+num+");\">"+v+"</DIV>");
}

function FindFormByVarName(vname)
{
for (i=0;i<document.forms.length;i++){
if (document.forms[i].all[vname]!=null)
return document.forms[i];
}
return null;
}

function FindVarByName(vname)
{
var obj;
for (i=0;i<document.forms.length;i++){
obj = document.forms[i].all.item(vname);
if (obj!=null){
if (obj.length>0)
return obj.item(0);
else
return obj;
}
}
return null;
}
//-->
</SCRIPT>
</HEAD>

<BODY>
<FORM METHOD=POST name=thisForm ACTION="">
<TABLE width=100>
<TR>
<TD><div ID="seloff_emp_cal_start_month" CLASS="selectOff" ONCLICK="ToggleSelect(selobj_emp_cal_start_month);">
<table BORDER="0" CELLSPACING="0" CELLPADDING="0">
<tr>
<td><input CLASS="ednonedisable" READONLY STYLE="cursor:default;" NAME="selvarV_emp_cal_start_month" VALUE="1" SIZE="20"></td>
<td WIDTH="1%"><img src="../image/images/down_arrow.gif" STYLE="cusor:hand;" BORDER="0" width="15" height="6"></td>
</tr>
</table>
</div>
<div ID="selon_emp_cal_start_month" CLASS="selectOn" ONBLUR="DelayHideSelect('selobj_emp_cal_start_month');">
<script LANGUAGE="javascript">tmp_select_vname='emp_cal_start_month';GenSelItem(0,0,' ');GenSelItem(1,1,'1');GenSelItem(2,2,'2');GenSelItem(3,3,'3');GenSelItem(4,4,'4');GenSelItem(5,5,'5');GenSelItem(6,6,'6');GenSelItem(7,7,'7');GenSelItem(8,8,'8');GenSelItem(9,9,'9');GenSelItem(10,10,'10');GenSelItem(11,11,'11');GenSelItem(12,12,'12');</script>
</div>
<input TYPE="HIDDEN" NAME="emp_cal_start_month" VALUE="1">
<script>
selobj_emp_cal_start_month=new TSelectObject('emp_cal_start_month','selvarV_emp_cal_start_month','selon_emp_cal_start_month','seloff_emp_cal_start_month',2,13,'');
RegisterSelect(selobj_emp_cal_start_month);
</script></TD>
</TR>
</TABLE>

</FORM>
</BODY>
</HTML>
FDH007 2003-07-16
  • 打赏
  • 举报
 回复
我在线等待啊！
MATLAB　GUI设计之弹出式菜单的使用
本文详细介绍了MATLAB GUI设计中弹出式菜单的创建与调用方法，包括如何在GUI中设置弹出式菜单内容、如何通过函数获取用户选择的值，并提供了一个实例应用——选择不同波特率的场景。
MATLAB GUI笔记(七):弹出式菜单使用
本文介绍了如何在GUI中使用弹出式菜单，通过选择不同选项动态绘制不同曲线，展示了其与按钮组的相似功能及具体操作步骤。
matlab标弹出式菜单使用图行,MATLAB　GUI设计之弹出式菜单的使用
本文介绍如何在MATLAB GUI中创建及使用弹出式菜单，并详细解释了如何通过get函数获取菜单选项对应的值。同时，提供了一个实际的例子——选择波特率的弹出式菜单，展示了如何映射菜单选项到实际数值。
asp.net 弹出式日历控件 选择日期 Calendar控件
本文介绍了如何在 ASP.NET 应用中使用 Calendar 控件实现弹出式日期选择功能，包括 HTML 代码示例、C# 代码实现以及功能展示。
自动弹窗被拦截 html,弹出式窗口被阻止怎么办,如何阻止弹出式窗口
本文介绍如何制作弹出式窗口及其在网页广告中的应用，并提供了详细步骤指导。此外，还介绍了如何在浏览器中禁止弹出式窗口的方法。
JavaScript

87,987

社区成员

224,683

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章