1.背景
不知不覺中jQuery EasyUI已經發布到1.6.8,在1.6之后也多了三個組件,雖然在API上還是顯得很匱乏,但帶來的便利卻是不可忽視。出於對新組件的好奇,也花了些時間研究了下。
2.現狀
不得不說jQuery EasyUI在API文檔這塊還是做得不錯的,不僅全還簡單易懂。但主鍵的應用場景上,卻顯得有些不足。對於SideMenu官方只給出了怎么創建這個組件,但卻沒有給出怎么來把這個嵌入到整個系統中。
官方對於SideMenu的展示。有了新的主鍵當然第一時間想應用到自己的項目上,在運用的過程中也遇到了各種各樣的問題,特此記錄。
3.SideMenu的運用
最初的實現:將SideMenu放在了Layout的left,只能實現左側菜單的顯示和隱藏,無法發揮SideMenu的兩種狀態的切換(當然也可能是我的技術還不到家)。
當前的實現:Step 1. 經過一番琢磨,得出的結論的就是現有主鍵無法直接實現,那么就自己動手吧,自己來實現一個左側面板。仔細一分析好像也挺簡單的左側面板不就是一個panel嗎,只是這個panel在右上角有個展開和折疊的按鈕,但這個折疊並不是真正意義上的折疊,只是將panel放大和縮小而已,同時把SideMenu的狀態進行切換。
Step 2. 現在就是SideMenu和Tag的聯動了,聯動的話必須實現隨着SideMenu選中改變,Tab的激活面板也要相應改變,反過來Tab的激活面板改變也要可以觸發SideMenu的選中改變。當然在實現的過程中也了解到了SideMenu狀態切換的實現原理,其實SideMenu的展開和折疊其實是兩個組件,通過狀態的切換來觸發組件的顯示和隱藏。具體的實現細節就不贅述,感興趣的可以下載源碼去了解。
4.源碼地址
碼雲地址:https://gitee.com/huaiXH/Easyui.SideMenu.Demo/tree/master
GitHub地址:https://github.com/zqb971/Easyui.SideMenu.Demo