ASP. NET MVC Rapid Development Framework clean and simple interface design, interested can imitate reference

The user experience of the software is important, and to capture the user's heart, this blog post shares the UI design of a recent project.

I do UI design is from the user's point of view, to try to figure out the user's habits.

Most of the users are using the Windows operating system, so the style of my software is also made of Windows-style.

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

First look at the home navigation menu

This navigation menu is actually made by the Div, in addition to the CSS style to tune it, let's look at the code to load the menu

function Initstartmenu () {$ ('#overlay_startmenu'). Click (function () {if($('#start_menu_panel: Visible'). Length) {$ ('#overlay_startmenu'). Hide (); $('#start_menu_panel'). Slideup (1); $('. Nicescroll-rails'). Hide ();            }            }); $('#start_menu'). Click (function () {if($('#start_menu_panel: Visible'). Length) {$ ('#overlay_startmenu'). Hide (); $('#start_menu_panel'). Slideup (1); $('. Nicescroll-rails'). Hide (); }                //Mask layer position and display$('#overlay_startmenu'). Show (); //menu Panel Position                varTop = $ ('#start_menu'). Offset (). Top-$ ('#start_menu_panel'). Outerheight ()-1; $('#start_menu_panel'). css ({top:top}); $('#start_menu_panel'). Show (); $('. Nicescroll-rails'). Show ();        }); }        //Navigation level Menu        varStartmenujson =""; function Getstartmenu () {varindex =0; varHTML =""; Getajax ("/home/loadstartmenu","", function (data) {Startmenujson= eval ("("+ Data +")"); $.each (Startmenujson, function (i) {if(Startmenujson[i]. ParentID = ='9f8ce93a-fc2d-4914-a59c-a6b49494108f') {HTML+="<li>"; if(Index = =0) {HTML+="<div class= ' main_menu leftselected ' onclick=\ ' GetSubMenu ('"+ Startmenujson[i]. ModuleID +"') \ ">"; GetSubMenu (Startmenujson[i].                        ModuleID); } Else{html+="<div onclick=\ "GetSubMenu ('"+ Startmenujson[i]. ModuleID +"') \ ">"; } HTML+=""+ Startmenujson[i]. Icon +"' width= ' height= ' >"+ Startmenujson[i]. FullName +""; HTML+="</div>"; HTML+="</li>"; Index++;            }                }); })            $("#htmlMenu"). append (HTML); varMenuheight = $ ('. Main_Menu Div'). Height () * $ ('. Main_Menu Li'). Length + $ ('. Main_Menu Li'). Length +1; if(Menuheight <= the) {Menuheight= the            }            $(". Panel-menu"). Height (menuheight); $("#main_menu"). Height (menuheight); $("#Submenu"). Height (menuheight); Divnicescroll ("#Submenu");        Readyindex (); }        //Navigation Sub-menufunction GetSubMenu (ModuleID) {$ ("#Submenu"). HTML (""); varHTML =""; $.each (Startmenujson, function (i) {if(Startmenujson[i]. ParentID = =ModuleID) {                    varIcon =""; if(Startmenujson[i]. Icon! ="") {Icon=Startmenujson[i].                    Icon; }                    if(Isbelowmenu (startmenujson[i). ModuleID) >0) {HTML+="<div title= '"+ Startmenujson[i]. FullName +"' class=\ ' shortcuticons\ "onclick=\" GetSubMenu ('"+ Startmenujson[i]. ModuleID +"') \ ' >"+ Icon +"' ><br/>"+ Startmenujson[i]. FullName +"</div>"; } Else{html+="<div title= '"+ Startmenujson[i]. FullName +"' class=\ ' shortcuticons\ "onclick=\" Addtabmenu ('"+ Startmenujson[i]. ModuleID +"', '"+ rootpath () + startmenujson[i]. Location +"', '"+ Startmenujson[i]. FullName +"', '"+ Startmenujson[i]. Icon +"' , ' true '); \ ">"+ Icon +"' ><br/>"+ Startmenujson[i]. FullName +"</div>";            }                }            }); $("#Submenu"). HTML (HTML); }        //determine if there are child nodesfunction Isbelowmenu (moduleid) {varCount =0; $.each (Startmenujson, function (i) {if(Startmenujson[i]. ParentID = =ModuleID) {Count++; return false;            }            }); returncount; }

The above is the page to load the menu code, the background to write something? To get the menu information, we put the menu icon, name, path are in the database, the background to write a method to take out to turn to JSON to let the above JS method to call the good.

Here is the list page, the table plug-in with the Jqgrid, looks good loading speed is pretty fast

The following is a pop-up window that looks like a Windows window.

Here is a different way to display the personnel information, with pictures and data display details. In fact, here is the first to take out the data, and then make up a div,div good control, picture text can be put.

The following is the same reason, after clicking on the update of the div icon, we saw the following small tick

Yes, learned to use div typesetting really is very convenient, this container can put anything, left a tree out

Look at one side of the drop-down box, in fact, is also dynamically loaded out, using the Div+css+ajax interface can really be done very flexible, the user experience is very good.

ASP. NET MVC Rapid Development Framework clean and simple interface design, interested can imitate reference