阿發仔部落: 分享: 用Javascript寫成的多項選擇UI元件配合ASP.NET使用。

今晚有空，把自己以往用JAVASCRIPT所寫的UI元件拿些出來和大家分享一下，為何要自己寫UI元件? 因為我用過很多軟件，但發覺有些軟件內的UI元件是會很有用。但編程工具未必會提供的，以下就是其中一個我會用的UI元件，所以花了些時間用JAVASCRIPT寫成。先來一張圖:

我把此UI元件用於多項選擇，左面的是未被選擇的項目，你可以在選擇幾項項目後再按>按鈕，把那些選了的項目移動到右面的已選表。或是把右面的項目搬回左面的未選表，配合ASP.NET使用。以下是程序碼 :

   1:  <html>

   2:  <!-- Written by Barry Chan 阿發仔 -->

   3:  <head>

   4:  <meta http-equiv="Content-Type" content="text/html; charset=big5">

   5:  <title></title>

   6:    <style language="css">

   7:     .style_1{

   8:     width: 150

   9:     }

10:

  11:     .assignBtn{

  12:          width: 30

  13:     }

  14:    </style>

  15:  </head>

  16:  <body>

  17:  <script language="javascript">

18:

  19:  function assign(unassignLst,assignLst){

  20:  var txt = new Array();

  21:  var value = new Array();

  22:  var idx = new Array();

  23:  var unassignList = document.getElementById(unassignLst);

  24:  var assignList = document.getElementById(assignLst);

  25:      for (var i=0; i<unassignList.length;i++){

26:

  27:          if (unassignList[i].selected ==true){

  28:            txt.push(unassignList[i].text);

  29:            value.push(unassignList[i].value);

  30:            idx.push(i);

  31:          }

  32:      }

33:

  34:      var idxLength = idx.length - 1;

35:

  36:      for (idxLength;idxLength>=0;idxLength--){

  37:            unassignList.remove(idx[idxLength]);

  38:      }

39:

  40:       for (var j=0; j<txt.length;j++){

  41:             var myoption = new Option(txt[j],value[j]);

  42:               try {

  43:          assignList.add(myoption , null);

  44:               }catch(ex) {

  45:         assignList.add(myoption ); // IE only

  46:               }

  47:       }

  48:  }

49:

  50:  function assignAll(unassignLst,assignLst){

  51:    var txt = new Array();

  52:    var value = new Array();

  53:    var unassignList = document.getElementById(unassignLst);

  54:    var assignList = document.getElementById(assignLst);

55:

  56:      for (var i=0; i<unassignList.length;i++){

  57:            txt.push(unassignList[i].text);

  58:            value.push(unassignList[i].value);

  59:      }

60:

61:

  62:       for (var k=unassignList.length; k>0;k--){

  63:          unassignList.remove(0);

  64:       }

65:

  66:         for (var j=0; j<txt.length;j++){

  67:             var myoption = new Option(txt[j],value[j]);

  68:               try {

  69:          assignList.add(myoption , null);

  70:               }catch(ex) {

  71:         assignList.add(myoption ); // IE only

  72:               }

  73:         }

  74:  }

75:

  76:  </script>

77:

  78:   <div  align="left">

  79:   <table border="0" width="436" height="111">

  80:   <tr>

  81:   <td height="107" width="195" rowspan="4">

  82:   <p align="center"><select size="6" name="leftList" id="lList" class="style_1" multiple>

  83:   <option value="d1">data1</option>

  84:   <option value="d2">data2</option>

  85:   <option value="d3">data3</option>

  86:   <option value="d4">data4</option>

  87:   <option value="d5">data5</option>

  88:   <option value="d6">data6</option>

  89:   <option value="d7">data7</option>

  90:   </select></td>

  91:   <td height="30" width="25">

  92:   <input class="assignBtn" type="button" value="&gt;&gt;" onclick="assignAll('lList','rList')"></td>

93:

  94:          <td height="107" width="202" rowspan="4">

  95:   <p align="center">

  96:   <select size="6" name="rightList" id="rList" class="style_1" multiple>

  97:   <option value="s1">sample1</option>

  98:   <option value="s2">sample2</option>

  99:   <option value="s3">sample3</option>

 100:   <option value="s4">sample4</option>

 101:   <option value="s5">sample5</option>

 102:   <option value="s6">sample6</option>

 103:   <option value="s7">sample7</option>

 104:   </select></td>

 105:   </tr>

 106:    <tr>

 107:     <td height="23" width="25">

 108:     <p align="center">

 109:     <input class="assignBtn" type="button" value="&gt;" onclick="assign('lList','rList')"></td>

 110:    </tr>

 111:    <tr>

 112:     <td height="23" width="25">

 113:     <p align="center">

 114:     <input class="assignBtn" type="button" value="&lt;" onclick="assign('rList','lList')"></td>

 115:    </tr>

 116:    <tr>

 117:     <td height="23" width="25">

 118:     <input class="assignBtn" type="button" value="&lt;&lt;" onclick="assignAll('rList','lList')"></td>

 119:    </tr>

 120:   </table>

 121:      </div>

 122:

 123:  </body>

 124:  </html>

2011年8月25日星期四