製作dropbox的file list效果

Dropbox web版有一種很棒的檔案複選效果，選擇一個檔案的時候底下會有反白的效果。

選取後


這個的好處是你可以很清楚的知道你選了什麼東西，這個在Windows上就有做到，這個對UX來說已經變成一種很必要的條件了。

複選也會反白。

另外在Dropbox上還有一些更進一步的做法，就是如果選取的檔案是相連的，他們反白的框框也會連在一起。


取消選取後，如果檔案沒有連在一起，就又變成各自的框框。


看起來很酷，不過我實際在寫卻花了不少時間，當然寫出來後就很單純了。

首先我會在點擊後去判斷list_on這個class是否存在，不存在的話就增加這個class，存在的話就移除這個class。
$(".list").click(function(){
if($(this).hasClass("list_on")){
$(this).removeClass("list_on");
}else{
$(this).addClass("list_on");
}
然後去判斷點選的檔案前後是否有list_on這個class
$(this).prev().hasClass("list_on")
$(this).next().hasClass("list_on")
判斷後再依據條件去改變css就可以了。

觀看效果

今天做出來是很開心，不過code其實蠻醜的，同事也說，很多外掛都寫得超好，我們這樣都是硬寫的，等級還是有差.. 反正就繼續往那個方向努力就好囉。