87,987
社区成员
发帖
与我相关
我的任务
分享怎么做出类似IE“自定义工具栏”对话框的那种效果
VIEW->ToolBars->Customize
两边各有一个选项框，中间有两个按钮，一个“添加”，一个“删除”，
左边的选项固定，单击按钮就能改变右边的选项。
请指教，谢谢
我用的jsp
两边各有一个选项框，中间有两个按钮，一个“添加”，一个“删除”，
左边的选项固定，单击按钮就能改变右边的选项。
请指教，谢谢
我用的jsp
...全文
请发表友善的回复…
发表回复
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>
<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>
<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
- 打赏
- 举报
稍后
