快捷導(dǎo)航

js模擬電腦選擇多文件夾效果_選區(qū)代碼

更新時(shí)間：2008年09月21日 21:27:39 作者：

模仿選擇文件夾效果的javascript封裝類，效果不錯(cuò)，實(shí)際應(yīng)用呢，暫時(shí)用不到，大家可以學(xué)習(xí)思路

代碼很簡單，會繼續(xù)完善。。。
按住鼠標(biāo)鍵不動(dòng)，拖動(dòng)鼠標(biāo)，會看到效果

update:
1. 針對前2個(gè)beta版，該版本修復(fù)了前兩個(gè)版本出現(xiàn)的 bug ，
2. 進(jìn)行了代碼的簡單封裝（由于本人初學(xué)js，對js掌握的很淺，因此面向?qū)ο蟮睦斫夂懿?，封裝的不好）；
3. 增加了對 Ctrl 和 Shift 鍵的支持(目前shift鍵的功能和ctrl鍵的功能一樣，還不能達(dá)到仿windows的選區(qū)Shift鍵的功能)。
4. 增加了獲取“被選區(qū)選中元素”的方法，可以點(diǎn)擊按鈕“getRegions”看效果。
調(diào)用方法：

復(fù)制代碼代碼如下:

new RegionSelect({ 
region:'div.fileDiv', 
selectedClass: 'seled' 
}).select();

增強(qiáng)效果代碼

<html>     <head></head>     <style>         body{padding-top:50px;padding-left:100px;padding-right:150px;}         .fileDiv{float:left;width:100px;height:100px;text-align:center;line-height:100px;font-size:12px;border:1px solid #cccccc;margin-right:10px;margin-bottom:10px;}         .seled{border:1px solid #ff0000;background-color:#D6DFF7;}         </style>              <body> <button onclick="showSelDiv();">getRegions</button> <div   id="vvxyksv9kd"   class="fileDiv">file1</div> <div   id="vvxyksv9kd"   class="fileDiv">file2</div> <div   id="vvxyksv9kd"   class="fileDiv">file3</div> <div   id="vvxyksv9kd"   class="fileDiv">file4</div> <div   id="vvxyksv9kd"   class="fileDiv">file5</div> <div   id="vvxyksv9kd"   class="fileDiv">file6</div> <div   id="vvxyksv9kd"   class="fileDiv">file7</div> <div   id="vvxyksv9kd"   class="fileDiv">file8</div> <div   id="vvxyksv9kd"   class="fileDiv">file9</div> <div   id="vvxyksv9kd"   class="fileDiv">file10</div> <div   id="vvxyksv9kd"   class="fileDiv">file11</div> <div   id="vvxyksv9kd"   class="fileDiv">file12</div> <div   id="vvxyksv9kd"   class="fileDiv">file13</div> <div   id="vvxyksv9kd"   class="fileDiv">file14</div> <div   id="vvxyksv9kd"   class="fileDiv">file15</div> <div   id="vvxyksv9kd"   class="fileDiv">file16</div> <div   id="vvxyksv9kd"   class="fileDiv">file17</div> <div   id="vvxyksv9kd"   class="fileDiv">file18</div> <div   id="vvxyksv9kd"   class="fileDiv">file19</div> <div   id="vvxyksv9kd"   class="fileDiv">file20</div> <div   id="vvxyksv9kd"   class="fileDiv">file21</div> <div   id="vvxyksv9kd"   class="fileDiv">file22</div> <div   id="vvxyksv9kd"   class="fileDiv">file23</div> <div   id="vvxyksv9kd"   class="fileDiv">file24</div> <div   id="vvxyksv9kd"   class="fileDiv">file25</div> <div   id="vvxyksv9kd"   class="fileDiv">file26</div> <div   id="vvxyksv9kd"   class="fileDiv">file27</div> <div   id="vvxyksv9kd"   class="fileDiv">file28</div> <div   id="vvxyksv9kd"   class="fileDiv">file29</div> <div   id="vvxyksv9kd"   class="fileDiv">file30</div> <div   id="vvxyksv9kd"   class="fileDiv">file31</div> <div   id="vvxyksv9kd"   class="fileDiv">file32</div> <div   id="vvxyksv9kd"   class="fileDiv">file33</div> <div   id="vvxyksv9kd"   class="fileDiv">file34</div> <div   id="vvxyksv9kd"   class="fileDiv">file35</div> <div   id="vvxyksv9kd"   class="fileDiv">file36</div> <div   id="vvxyksv9kd"   class="fileDiv">file37</div> <div   id="vvxyksv9kd"   class="fileDiv">file38</div> <div   id="vvxyksv9kd"   class="fileDiv">file39</div> <div   id="vvxyksv9kd"   class="fileDiv">file40</div> <div   id="vvxyksv9kd"   class="fileDiv">file41</div> <div   id="vvxyksv9kd"   class="fileDiv">file42</div> <div   id="vvxyksv9kd"   class="fileDiv">file43</div> <div   id="vvxyksv9kd"   class="fileDiv">file44</div> <div   id="vvxyksv9kd"   class="fileDiv">file45</div> <div   id="vvxyksv9kd"   class="fileDiv">file46</div> <div   id="vvxyksv9kd"   class="fileDiv">file47</div> <div   id="vvxyksv9kd"   class="fileDiv">file48</div> <div   id="vvxyksv9kd"   class="fileDiv">file49</div> <div   id="vvxyksv9kd"   class="fileDiv">file50</div> <div   id="vvxyksv9kd"   class="fileDiv">file51</div> <div   id="vvxyksv9kd"   class="fileDiv">file52</div> <div   id="vvxyksv9kd"   class="fileDiv">file53</div> <div   id="vvxyksv9kd"   class="fileDiv">file54</div> <div   id="vvxyksv9kd"   class="fileDiv">file55</div> <div   id="vvxyksv9kd"   class="fileDiv">file56</div> <div   id="vvxyksv9kd"   class="fileDiv">file57</div> <div   id="vvxyksv9kd"   class="fileDiv">file58</div> <div   id="vvxyksv9kd"   class="fileDiv">file59</div> <div   id="vvxyksv9kd"   class="fileDiv">file60</div> <div style="float:left;width:100%;"><button onclick="showSelDiv();">getRegions</button></div>     </body>          </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章: