Knockout + SignalR 實現FB的聊天功能(二) - 暖身用的jQuery
這一篇的內容十分的無聊,只是為了頁面上的 Tab 切換寫一點點的jQuery
從附檔所附的原始碼可以看到版面的設計如下:
說明一下UI的設計:All 這個 Tab 是擺放所有 User 的列表,而 Chat 這個 Tab 是放目前正在對話中的User
這樣的設計跟 Line 有些類似,這篇的內容就是將切換的效果做出來。
以下是我的作法,因為做 Tab 的方式很多,所以我的不見得是好的。
一、將上方 All 跟 Tab 的 li 元素加上一個屬性,我取作 data-tab,其值就是對應到的 Div 的 ID。
二、下方內容的 Div 加上 ID
三、頁面上掛載 jQuery
四、開始寫jQuery
寫的有點太長,之後再回過頭來修改這一塊吧。