Javascript 实现双栏选择框
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function onloadTask(){
var taskListObj="[{'taskName':'A',taskId:'1'},{'taskName':'B',taskId:'2'},{'taskName':'C',taskId:'3'},{'taskName':'D',taskId:'4'},{'taskName':'E',taskId:'5'},{'taskName':'F',taskId:'6'},{'taskName':'G',taskId:'7'},{'taskName':'H',taskId:'9'},{'taskName':'M',taskId:'10'}]";
var taskList=eval(taskListObj);
var leftTaskList=document.getElementById("leftTaskList")
for(var index=0;index<taskList.length;index++){
leftTaskList.options.add(new Option(taskList[index].taskName,taskList[index].taskId));
}
}
function move_right(){
var leftTaskListSelect=document.getElementById("leftTaskList");
var leftSelectedIndex=leftTaskListSelect.selectedIndex;
var rightTaskList=document.getElementById("rightTaskList")
if(leftSelectedIndex>= 0){
rightTaskList.options.add(new Option(leftTaskListSelect.options[leftSelectedIndex].text, leftTaskListSelect.options[leftSelectedIndex].value));
leftTaskListSelect.options.remove(leftSelectedIndex);
}else {
alert('请选择一个前置任务！');
}
}
function move_left(){
var leftTaskList=document.getElementById("leftTaskList");
var rightTaskListSelect=document.getElementById("rightTaskList");
var rightSelectedIndex=rightTaskListSelect.selectedIndex;
if(rightSelectedIndex>= 0){
leftTaskList.options.add(new Option(rightTaskListSelect.options[rightSelectedIndex].text, rightTaskListSelect.options[rightSelectedIndex].value));
rightTaskListSelect.options.remove(leftSelectedIndex);
}else {
alert('请选择一个前置任务！');
}
}
function move_left_all(){
var rightTaskList=document.getElementById("rightTaskList");
var leftTaskList=document.getElementById("leftTaskList")
for (var i=0; i<rightTaskList.options.length; i++)
{
leftTaskList.add(new Option(rightTaskList.options[i].text, rightTaskList.options[i].value));
}
rightTaskList.length = 0;
}
function move_right_all(){
var rightTaskList=document.getElementById("rightTaskList");
var leftTaskList=document.getElementById("leftTaskList")
for (var i=0; i<leftTaskList.options.length; i++)
{
rightTaskList.add(new Option(leftTaskList.options[i].text, leftTaskList.options[i].value));
}
leftTaskList.length = 0;
}
</script>
</head>
<body onload="onloadTask();">
<form action="post" name="taskform" id="taskform">
<table>
<tbody>
<tr>
<td>
<select id="leftTaskList" multiple="multiple" size="15">
</select>
</td>
<td>
<table>
<tr><td> <input type="button" onclick="move_right();" id="left2right" value="> " size="15" /></td></tr>
<tr><td> <input type="button" onclick="move_left();" id="right2left" value="< " /></td></tr>
<tr><td> <input type="button" onclick="move_right_all();" id="left2rightAll" value=">>" /></td></tr>
<tr><td> <input type="button" onclick="move_left_all();" id="right2leftAll" value="<<" /></td></tr>
</table>
</td>
<td>
<select id="rightTaskList" multiple="multiple" size="15">
</select>
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
prototype 1.5 【转】 (4-10 08:17)
一个国外网友做的基于prototype.js的模拟窗口
http://www.dayanmei.com/demo/prototype_pwc/samples/constraint.html
http://www.dayanmei.com/demo/prototype_pwc/samples/window_store.html
http://www.dayanmei.com/demo/prototype_pwc/samples/oldFirstSampleCode.html
完整的基于prototype.js的模拟窗口源文件下载
http://www.dayanmei.com/download.php?filename=windows_js_1.3.zip
官方文档：
http://prototypejs.org/api/
相关推荐
Prototype Codes TextBook.rar:Prototype实战教程(爆爽,推荐); 2.Prototype API: Prototype1.5.1_API_CN_A.CHM:Prototype1.5.1中文API,版本一(推荐); prototype1.5.1_API_CN_B.CHM:Prototype1.5.1中文API,版本二...
在实战教程的第一部分，`$$('div#loginForm .field input')`这一行代码就展示了`$$`的用法。这行代码会查找ID为`loginForm`的`div`内的所有拥有`field`类的`input`元素。通过这个选择器，我们可以方便地获取到登录...
作者从这个社区收集了大量资料，并结合自己的学习和实践经验，形成了这份文档。这使得文档既具有权威性，又包含了个人的见解和补充，对初学者来说尤其有价值，因为他们可以从中快速理解和掌握Prototype的基础知识和...
"PROTOTYPE与SCRIPTACULOUS篇"表明这个教程主要关注Prototype和Scriptaculous两个JavaScript库在实现Ajax功能上的应用。 Prototype是一个流行的JavaScript库，它简化了DOM（文档对象模型）操作，提供了一套强大的...
三、Prototype实战技巧 1. **模块化开发**：Prototype支持模块化开发，通过`Object.extend()`和`Class.include()`等方法，可以实现代码的模块化组织，提高代码复用性和可维护性。 2. **性能优化**：理解Prototype...
《jQuery 前端开发实战教程》主要涵盖了jQuery的基础知识和高级特性，包括选择器、DOM操作、事件处理、动画效果、Ajax以及jQuery Mobile等移动设备应用。以下是一些关键知识点的详细说明： 1. jQuery Mobile选择...
本教程《jQuery前端开发实战教程》旨在帮助开发者掌握jQuery的核心概念和实用技巧。 1. jQuery Mobile 选择菜单：在jQuery Mobile中，如果一个选择菜单包含多个类别，可以使用`<optgroup>`元素，它允许你根据`label...
学习Prototype.js，可以参考其官方文档（如提供的CHM文件），以及社区中的教程和示例代码。Stack Overflow、GitHub和网上论坛都有很多关于Prototype.js的问题解答和讨论，是提升技能的好去处。 总结，Prototype.js...
学习Prototype.js，可以参考官方文档，查阅各种教程和示例代码，同时，Stack Overflow 和其他开发者论坛是获取帮助和分享经验的好地方。社区的存在使得解决遇到的问题变得更加容易。 总结，"最新Prototype手册"是...
总的来说，《.prototype.and.scriptaculous.taking.the.pain.out.of.javascript》是一本帮助开发者掌握Prototype和Scriptaculous的实用教程，通过学习，你可以利用这两个库提升网站的动态性和用户体验，同时降低...
Axure RP（Prototype on Rails）允许用户快速创建线框图、原型和规格说明，支持动态面板、自定义函数、交互模拟等功能，使得非程序员也能制作出功能丰富的交互原型。 2. **原型设计基础** - **界面布局**：了解...
尽管JavaScript定义了基本的语法规范和逻辑结构，但对于浏览器端的应用开发，仍然需要依赖于API扩展如DOM、XMLHttpRequest等组件。直接使用JavaScript及其API进行开发会显得非常繁琐，这是因为在控制文档结构和操作...
在本教程中，我们将详细讲解 Spring 框架的各个方面，包括 IoC、DI、AOP、事务管理和 JDBC 等。我们还将提供多种实践和示例代码，以帮助开发者快速掌握 Spring 框架。 在 Spring 中，控制反转（IoC）和依赖注入（DI...
每个对象都有一个proto属性，指向创建它的构造函数的prototype属性。通过这种方式，对象可以访问并继承其原型中的属性和方法。此外，JavaScript还提供了函数构造器，如Function和Object，以及内置构造器，如Array和...
2. **AJAX库与框架**：简述jQuery和其他流行库（如Prototype、Dojo）如何简化Ajax开发。 3. **跨域问题与解决方案**：探讨Ajax的同源策略限制及JSONP、CORS等跨域解决方案。 ### 第五章 - PHP与Ajax结合 1. **创建...
本实战教程将深入探讨jQuery的核心概念和技术，帮助开发者快速掌握并应用jQuery进行网页开发。 **一、jQuery基础** 1. **选择器**: jQuery的选择器是其最强大的特性之一，它允许开发者通过CSS语法选择页面中的元素...
100道逻辑思维趣题,ajax框架：dwr》实战(包括整合),Ajax中英文对照手册,CSS2 – Quick Reference Guide,css滤镜,css样式,DHTML默认行为手册,DOM文档对象模型手册,JavaScript源码大全 v1.0,javascript资料（源码，...
1. **创建型模式**：包括单例（Singleton）、工厂方法（Factory Method）、抽象工厂（Abstract Factory）、建造者（Builder）和原型（Prototype）模式。这些模式主要处理对象的创建，使得代码结构更加灵活，易于扩展...