怎么做出类似IE“自定义工具栏”对话框的那种效果

Yukon 2003-05-15 04:38:54
VIEW->ToolBars->Customize
两边各有一个选项框,中间有两个按钮,一个“添加”,一个“删除”,
左边的选项固定,单击按钮就能改变右边的选项。
请指教,谢谢
我用的jsp
...全文
55 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
Yukon 2003-05-16
  • 打赏
  • 举报
回复
非常感谢两位!
我先研究一下代码,有不明白的还要请教:)
jsidiot 2003-05-16
  • 打赏
  • 举报
回复
<!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>
<table>
<form name=aform >
<tr>
<td><select name=select1 multiple style='width:100px;' size=10 ondblclick='toRight(this,document.aform.select2)'>
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
<option value=4>4</option>
<option value=5>5</option>
<option value=6>6</option>
<option value=7>7</option>
</select>
</td>
<td>
<input type=button value='>>' onclick='toRight(aform.select1,aform.select2)'><br>
<input type=button value='<<' onclick='toRight(aform.select2,aform.select1)'>
</td>
<td><select name=select2 multiple style='width:100px;' ondblclick='toRight(aform.select2,aform.select1)' size=10 >
<option value=x>x</option>
<option value=y>y</option>
<option value=z>z</option>
<option value=c>c</option>
<option value=d>d</option>
<option value=e>e</option>
</select>
</td>
</tr>
</form>
</table>
<script language="JavaScript">
<!--
function toRight(first,second){
for(i=0;i<first.options.length;i++){
if ((first.options[i].selected) && (first.options[i].value!="")){
var newOP=new Option();
newOP.text=first.options[i].text;
newOP.value=first.options[i].value;
second.options.add(newOP);
first.options[i].text="";
first.options[i].value="";
}

}
for(i=0;i<first.options.length;i++){
if ((first.options[i].value=="") && (first.options[i].text=="")){
first.options.remove(i);
}
}
}
//-->
</script>
</body>
</html>
fason 2003-05-15
  • 打赏
  • 举报
回复
<html><head>
<script language="javascript">
function moveOption(oFromList, oToList, bAll)
{
var nFromLen = oFromList.options.length;
var nToLen = oToList.options.length;
var i = 0;
while (nFromLen > 0)
{
if (oFromList.options[i].selected || bAll)
{
oToList[nToLen++] = new Option(oFromList.options[i].text, oFromList.options[i].value);
oFromList.options[i] = null;
}
else
i++;

nFromLen--;
}

sortOption(oToList);
}

function compare(a,b)
{
if (a.text < b.text)
return -1;
else if (a.text > b.text)
return 1;
return 0;
}

function sortOption(oList)
{
if (oList.options.length > 1)
{
var optionList = new Array();

for (var i=0; i < oList.options.length; i++)
optionList.push(oList.options[i]);

optionList.sort(compare);

oList.length = 0;
for (var i=0; i < optionList.length; i++)
oList.options[i] = optionList[i];
}
}
</script>
</head><body>
<form name="form1">
<table>
<tr>
<td>
<select name="leftlist" multiple size="4">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
<td>
<input type="button" value="<<" onclick="javascript:moveOption(rightlist, leftlist,true)"><br>
<input type="button" value="<" onclick="javascript:moveOption(rightlist, leftlist,false)"><br>
<input type="button" value=">" onclick="javascript:moveOption(leftlist, rightlist,false)"><br>
<input type="button" value=">>" onclick="javascript:moveOption(leftlist, rightlist,true)">
</td>
<td>
<select name="rightlist" multiple size="4">
</select>
</td>
</tr>
</table>
</body></html>
jsidiot 2003-05-15
  • 打赏
  • 举报
回复
稍后

87,988

社区成员

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

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