模擬 windows 操作的 ctrl 跟 shift 選取

最近因為有需求，所以自己寫了一個模擬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();  

$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