When we are building a website, back-end developers often write the back-end management system. Due to the lack of a suitable template for the backend management system, I have to rewrite one. Due to work arrangements these days, I need to study the backend management system of thinkcmf, so I found that the model is quite good, and I feel that basically every It can be applied to any background management system. I divided its theme framework into four large blocks, three-level menu bar, content iframe, tab bar, and top bar, as shown below:
Do you think it’s okay? Is there a trick that can be applied to all backend management systems? Since the entire backend was too huge, but we only wanted the main UI framework and nothing else, I copied and pasted it again and extracted the implementation of the UI we needed,
View the effect: http://www.live086.cn/Text/ (The space will be deactivated on 2015/09/23, so you can download the source code and put it directly on the local server (wampserver) to run)
Get source code: http://pan.baidu.com/s/1gdEqUYJ Password: c951
The special thing about this UI is that when we select the third-level menu bar, the content iframe on the right will be replaced instantly, and the selected menu item will also appear in the form of a label on the label bar, which can be switched at will. , close, and you can also click to refresh the current content iframe. The entire operation is comfortable, simple and convenient. The code mainly implements these functions from several aspects:
openapp(url, appid, appname, selectObj)
This is a core function, which is to open the iframe corresponding to the menu bar or tab bar. The url is the path of the iframe. Thinkphp uses the U method to generate it. The appid is the unique identifier of the iframe. It must be passed when switching the tab bar. It plays a very important role in whether the iframe is hidden or not. Otherwise, clicking the menu bar will have no effect. You can download the source code to see the details. appname is the label display name, and selectObj is the trigger object
$current_iframe[0].contentWindow.location.reload();
The refresh function uses the attribute contentWindow of the iframe, which is equivalent to obtaining the window object of the iframe, so the refresh function can be achieved
As for how to implement the third-level menu? Implementation of closing tag? You can view the source code for other detailed functions!