Knockout + SignalR 實現FB的聊天功能(二) - 暖身用的jQuery

Knockout + SignalR 實現FB的聊天功能(二) - 暖身用的jQuery

這一篇的內容十分的無聊,只是為了頁面上的 Tab 切換寫一點點的jQuery

從附檔所附的原始碼可以看到版面的設計如下:

image

 

說明一下UI的設計:All 這個 Tab 是擺放所有 User 的列表,而 Chat 這個 Tab 是放目前正在對話中的User

這樣的設計跟 Line 有些類似,這篇的內容就是將切換的效果做出來。

 

以下是我的作法,因為做 Tab 的方式很多,所以我的不見得是好的。

 

一、將上方 All 跟 Tab 的 li 元素加上一個屬性,我取作 data-tab,其值就是對應到的 Div 的 ID。

image

 

二、下方內容的 Div 加上 ID

image

 

三、頁面上掛載 jQuery

image

 

四、開始寫jQuery

image

 

寫的有點太長,之後再回過頭來修改這一塊吧。

 

範例檔案下載