ASP. NET MVC background Management system beautiful UI design

Now more and more systems are BS architecture, what kind of interface style is more atmospheric, beautiful, practical?

First of all, I'll show you my own background system style, and then talk about a few major interfaces

Address: http://121.40.148.178:8080/, user name: Guest, Password: 123456

First, the whole department

Now the management system is more popular to make the interface with CS application very much like, let a person at a glance to think is CS program, indeed that looks very atmosphere, very beautiful.

In the past, usually in the workspace can only display a function page, open a new function after the page jumps, when the user needs to open two features at the same time it is very painful, so I in my own development framework with a multi-page layout, with Easyui and other UI can be achieved, in order to better control, I did it myself. No third-party plugins are used, as shown in the effect:

The principle is: when clicked on a menu item, I added a div in the work area, and then in the div to open the page in the form of IFRAME, switching function is actually changing which div is displayed, the core code is as follows

functionaddtabmenu (tabid, URL, Name, IMG, Isclose, isreplace) {$ (' #overlay_startmenu '). Hide (); $ (' #start_menu_panel '). Hide (); $ (' #start_menu_panel. Nicescroll-rails '). Show (); $ ('. Nicescroll-rails ')). Hide (); if(url = = "" | | url = = "#") {URL= "/error/error404"; }    varTabs_container = top.$ ("#tabs_container"); varContentpannel = top.$ ("#ContentPannel"); if(Isreplace = = ' true ') {top.    Removediv (TabID); }    if(Top.document.getElementById ("Tabs_" + tabid) = =NULL) {//if the current tabid exists, a direct display of the tab that is already openLoading (true);        Visitormodule (tabid, name); if(Tabs_container.find (' Li '). Length >= 10) {Top.jBox.info ("To ensure system efficiency, only 10 function windows are allowed to run at the same time, please close some windows and try again!" ", ' Informational warning '); return false; } tabs_container.find (' Li '). Removeclass (' selected '); Contentpannel.find (' IFrame '). Hide (); if(Isclose! = ' false ') {//Determine if the tab is closed withTabs_container.append ("<li id=\" Tabs_ "+ tabid +" \ "class= ' selected ' win_close= ' true ' ><span title= '" + Name + "' Onclick=\ "Addtabmenu ('" + tabid + "', '" + URL + "', '" + name + "', ' true ') \" ><a> "+ name +" </a></span><a class=\ "win_close\" title=\ "close current window \" on Click=\ "Removediv ('" + TabID + "') \" ></a></li> "); } Else{tabs_container.append ("<li id=\" Tabs_ "+ tabid +" \ "class=\" selected\ "onclick=\" Addtabmenu (' "+ tabid +" ', ' "+ URL +" ', ' "+ name +" ', ' FA LSE ') \ "><a> ' + name + ' </a>< /li> "); } contentpannel.append ("<iframe id=\" tabs_iframe_ "+ tabid +" \ "name=\" tabs_iframe_ "+ tabid +" \ "height=\" 100%\ "width=\" 100%\ "src=\" "+ U RL + "\" frameborder=\ "0\" ></iframe> "); } Else{visitormodule (tabid); Tabs_container.find (' Li '). Removeclass (' selected '); Contentpannel.find (' IFrame '). Hide (); Tabs_container.find (' #tabs_ ' + tabid). AddClass (' selected ')); Top.document.getElementById ("Tabs_iframe_" + tabid). style.display = ' block '; }    $(' iframe# ' + Tabiframeid ()). Load (function() {Loading (false);    }); Loadrightmenu (". Tab-nav Li");}//Close the current tabfunctionThisclosetab () {varTabs_container = top.$ ("#tabs_container"); Top. Removediv (Tabs_container.find ('. Selected '). attr (' id '). substr (5));}//Close Tab AllfunctionAllclosetab () {top.$ (". Tab-nav"). Find ("[Win_close=true]"). each (function() {Removediv ($ ( This). attr (' id '). substr (5))    });}//close tab except for currentfunctionOtherclosetab () {varTabs_container = top.$ ("#tabs_container"); varid = Tabs_container.find ('. Selected '). attr (' id '). substr (5); top.$ (". Tab-nav"). Find ("[Win_close=true]"). each (function () {        if($( This). attr (' id '). substr (5)! =ID) {removediv ($ ( This). attr (' id '). substr (5))        }    });}

Navigation menu I'm using accordion style.

Add quick navigation, add common functions, and make the operation faster.

Second, the function page design

Function page, the main introduction of the following tables and forms, general into the function page first display a list, the list above the toolbar, common operations in the toolbar to execute

The query here is also customized, eliminating the previous one to write query conditions, each interface can be universal, user control is also very flexible.

When a form is added and deleted, it is usually a pop-up window that surrounds the effect of a mask.

The above is the UI style I used in the development framework, I hope you can get some inspiration.

ASP. NET MVC background Management system beautiful UI design