ASP. net mvc background management system exquisite UI design, mvc Background Management System

ASP. net mvc background management system exquisite UI design, mvc Background Management System

More and more systems are built on the BS architecture. What kind of interface style is more atmospheric, beautiful, and practical?

Let's take a look at my own background system style, and then talk about several main interfaces.

Address: http: // 121.40.148.178: 8080/, Username: guest, password: 123456

 

I. Overall Department

Nowadays, the management system is popular, and the interface is very similar to the CS application. At a glance, people think that it is a CS program. It looks very elegant indeed.

In the past, only one function page can be displayed in the workspace. When a new function is opened, the page jumps. When you need to enable both functions at the same time, it hurts, therefore, I used a multi-tab layout in my development framework and implemented it using easyui and other UIS. For better control, I did not use third-party plug-ins. The effect is shown in:

The principle is: When you click a menu item, I add a div in the workspace, and then open the page in the form of iframe IN THE div. The switching function is actually to change which div is displayed, the core code is as follows:

 

Function AddTabMenu (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";} var tabs_container = top. $ ("# tabs_container"); var ContentPannel = top. $ ("# ContentPannel"); if (IsReplace = 'true') {top. removeDiv (ta Bid);} if (top.doc ument. getElementById ("tabs _" + tabid) = null) {// if the current tabid already exists, directly display the opened tab Loading (true); VisitorModule (tabid, name ); if (tabs_container.find ('lil '). length> = 10) {top.jBox.info ("to ensure system efficiency, only 10 function windows can be run simultaneously. close some windows and try again! ", 'Information shares'); return false;} tabs_container.find ('lil '). removeClass ('selected'); ContentPannel. find ('iframe '). hide (); if (Isclose! = 'False ') {// determine whether the tab tabs_container.append ("<li id = \" tabs _ "+ tabid +" \ "class = 'selected' win_close = 'true'> <span title = '"+ name +" 'onclick = \ "AddTabMenu ('" + tabid + "', '"+ url +"', '"+ name +"', 'true ') \ "> <a>  </span> <a class = \ "win_close \" title = \ "close current window \" onclick = \ "RemoveDiv ('" + tabid + "') \ "> </a> </li> ") ;} Else {tabs_container.append ("<li id = \" tabs _ "+ tabid +" \ "class = \" selected \ "onclick = \" AddTabMenu ('"+ tabid + "', '"+ url +"', '"+ name +"', 'false ') \ "> <a>  </li> ");} contentPannel. append ("<iframe id = \" tabs_iframe _ "+ tabid +" \ "name = \" tabs_iframe _ "+ tabid +" \ "height = \" 100% \ "width = \ "100% \" src = \ "" + ur L + "\" frameBorder = \ "0 \"> </iframe> ");} else {VisitorModule (tabid); tabs_container.find ('lil '). removeClass ('selected'); ContentPannel. find ('iframe '). hide (); tabs_container.find ('# tabs _' + tabid ). addClass ('selected'); top.doc ument. getElementById ("tabs_iframe _" + tabid ). style. display = 'block';} $ ('iframe # '+ tabiframeId ()). load (function () {Loading (false) ;}); LoadrightMenu (". tab-nav li ");} // close when Previous tabfunction ThisCloseTab () {var tabs_container = top. $ ("# tabs_container"); top. removeDiv (tabs_container.find ('. selected '). attr ('id '). substr (5);} // close all tabfunction AllcloseTab () {top. $ (". tab-nav "). find ("[win_close = true]"). each (function () {RemoveDiv ($ (this ). attr ('id '). substr (5)});} // close the tabfunction othercloseTab () {var tabs_container = top. $ ("# tabs_container"); var id = tabs_container.fi Nd ('. 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 ))}});}

In the navigation menu, I use the Accordion style.

In addition, add quick navigation to add common functions to make operations faster.

2. Functional page design

The function page mainly introduces the list and forms. Generally, a list is displayed on the function page. The list is a toolbar, and common operations are performed on the toolbar.

The query here is also customized, saving the previous one-by-one write query conditions. Each interface can be used in a universal manner, and the user control is flexible.

When a form is added or deleted, a window is usually displayed, and a mask is used around it.

 

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