當我們在搭建網站的時候,後端開發人員在編寫後台的管理系統的時候,往往會因為缺少一個合適的後台管理系統的模板,而必須去重新編寫一個,這幾天由於工作上的安排,需要去研究一下thinkcmf的後台管理系統,於是發現那個模式是相當不錯,感覺基本每個後台管理系統都可以套用,我把它的主題框架劃分了4個大塊,三級菜單欄、內容iframe、標簽欄、頂欄,如下圖:
是不是覺得挺可以的?是不是有種所有後台管理系統都可以套用的趕腳勒?由於整個後台過於龐大,但我們又只是要其這樣的主體UI框架,其他的都不要,於是我把它重新復制粘貼了一下,把我們需要的這個UI的實現給提取出來了,
查看效果:http://www.live086.cn/Text/(空間2015/09/23會停用,所以可以下載面的源碼,直接放在本地服務器(wampserver)就可以運行)
獲取源碼:http://pan.baidu.com/s/1gdEqUYJ 密碼:c951
這個UI比較特別的地方在,我們在選擇三級菜單欄時,右側的內容iframe會即時的更換,所選擇的菜單項也會以標簽的形式出現在標簽欄上,可以隨意切換,關閉,同時也可以點擊刷新當前的內容iframe,整個操作起來舒服簡單方便,其代碼主要從幾個方面來實現這些功能:
openapp(url, appid, appname, selectObj)
這是一個核心的函數,就是打開與菜單欄或是標簽欄相對應的iframe,url是iframe的路徑,thinkphp用U方法生成,appid是iframe的唯一標識,必傳,在切換標簽欄的時候和iframe隱藏與否有很重要的作用,否則會出現點擊菜單欄沒有效果的,具體可以下載源碼去看,appname則是標簽顯示名稱,selectObj是觸發對象
$current_iframe[0].contentWindow.location.reload();
而刷新功能則是使用到iframe的屬性contentWindow,相當於獲得iframe的window對象,於是可以達到刷新的作用
至於三級菜單怎麼實現?關閉標簽的實現?其他細節功能可以查看源碼去看!