2011年9月20日 星期二

製作dropbox的file list效果

Dropbox web版有一種很棒的檔案複選效果,選擇一個檔案的時候底下會有反白的效果。
292052_2337517087162_1750341806_n
選取後
315037_2337517207165_993200162_n

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

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

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

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

首先我會在點擊後去判斷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其實蠻醜的,同事也說,很多外掛都寫得超好,我們這樣都是硬寫的,等級還是有差.. 反正就繼續往那個方向努力就好囉。
反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...