`
longgangbai
  • 浏览: 7255913 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

prototype资料 和实战教程

prototypeAjaxPHPWindowsHTML 
阅读更多

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="&gt; " size="15" /></td></tr>
                         <tr><td> <input type="button"   onclick="move_left();"   id="right2left" value="&lt; " /></td></tr>
                         <tr><td> <input type="button"  onclick="move_right_all();"   id="left2rightAll"  value="&gt;&gt;" /></td></tr>
                         <tr><td> <input type="button"   onclick="move_left_all();"   id="right2leftAll" value="&lt;&lt;" /></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.js教程及prototype中文手册
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics