模擬 windows 操作的 ctrl 跟 shift 選取

張貼者： 日期：
select

最近因為有需求，所以自己寫了一個模擬windows操作的行為，一般web的操作行為大概就是click, hover那些比較單純的行為，而這次是要做類似windows可以用ctrl跟shift選取的行為。

首先準備簡單的ul, li結構的列表，並寫簡單的css樣式。

view plaincopy to clipboardprint
  1. li{   
  2.     padding:10px;   
  3.     cursor:pointer;   
  4.     border-bottom:1px solid #7ebade;   
  5. }   
  6. li:hover{   
  7.     background:#e3f5ff;   
  8. }   
  9. li.selected{   
  10.     background:#c4e9ff;   
  11. }  

開始寫js，如果點擊某一個li，則選取並取消其他的選取。
view plaincopy to clipboardprint
  1. var that = $(this);   
  2. that.addClass("selected").siblings().removeClass();  

用ctrl控制複選的行為
view plaincopy to clipboardprint
  1. if (e.ctrlKey)   
  2. {   
  3.     if(that.hasClass("selected")){   
  4.         that.removeClass("selected")   
  5.     }else{   
  6.         that.addClass("selected")   
  7.     }   
  8. }  

最後判斷shift點擊後，用變數儲存點擊的li的次序，把中間的li標記起來。
先改寫一下剛單選的部分，紀錄目前點的li
view plaincopy to clipboardprint
  1. $begin=$(this).index();  

view plaincopy to clipboardprint
  1. var that = $(this);   
  2. that.addClass("selected").siblings().removeClass();  

紀錄終點，並將中間的li都標記起來
view plaincopy to clipboardprint
  1. if(e.shiftKey){   
  2.             e.stopPropagation();   
  3.                 $end=$(this).index();   
  4.                 console.log($begin+", "+$end);   
  5.                 if($end<=$begin){   
  6.                     $start=$end;   
  7.                     $end=$begin;   
  8.                 }else{   
  9.                     $start=$begin;   
  10.                 }   
  11.                 $("li").removeClass();   
  12.                 for($i=$start;$i<=$end;$i++){   
  13.                     $("li").eq($i).addClass("selected");   
  14.                 }  

Demo

這是我自己寫的，也有看到別的文章，只是程式不夠好，這個用法看不大懂，有興趣也可以參考看看。
Snippet: Shift + Click List Items with jQuery

留言

張貼留言