Enterprise Management System Development Note (2)---background main interface

First, today we mainly use the following technologies:

Jquery Easy UI

jquery Easyui is a plugin based on the UI interface of jquery, the function is relatively not extjs powerful, but the page is also pretty good, while the page supports a variety of themes to meet the user's preferences for different styles of the page. Some features are also sufficient for developers to use, with a lighter weight relative to ExtJS. jquery Easyui has the following features: 1, a collection based on the jquery user interface plugin2. Provide necessary functions for some JS applications that are currently used for interaction3, Easyui support two rendering methods are JavaScript mode (such as: $ (' #p '). Panel ({...}) ) and HTML markup methods (such as: class= "Easyui-panel") 4, Support HTML5 (via Data-options attribute) 5, the development of products can save time and resources 6, simple, but very powerful 7, support expansion, according to their own needs to expand the control 8, At present, the deficiencies are being continuously improved in the way of version incrementthe difference between jquery Easyui and jquery UI

The jquery UI is developed by the jquery development team and applies to web-style pages.
jquery Easyui is a third-party development based on jquery and applies to application-style pages.

The method invocation of the two is also slightly different:
The jquery UI is:
$ ("#divTabs"). Tabs ("Remove", index);

jquery Easyui is:
$ ("#divTabs"). Tabs ("Close", title);

Similar differences are still some, only after the specific use of attention, the basic idea is similar.

Second, the main interface building

1, page layout analysis:
We divide the page into 4 parts, namely: Top, left, right, bottom. This is typically done using an IFRAME, which uses the Easyui panel. Here's what we've done to transform the panel's official code into the format we need.

<bodyclass="Easyui-layout"> <!---------------------------top layout start--------------------------------> <div data-options="Region : ' North ', Border:false"style="height:65px; padding:10px; overflow:hidden; Background-image:url ('/content/images/bg3.png ')"> "~/content/images/logo.gif"/> </div> <!---------------------------top layout end--------------------------------> <!-------------- Start-------------left layout--------------------------------> <div data-options="Region : ' West ', Split:true,title: ' West '"style="width:150px; padding:2px;"> <divclass="easyui-accordion"data-options="multiple:true"style="Width:auto; height:auto;"> <div title="News Management"data-options="iconcls: ' Icon-ok '"style="Overflow:auto; padding:10px;"> <a href="#" class="Aonclick"Url="/adminnewslist/index"> Domestic News management </a> </div> <div title="Comment Management"style="padding:10px;"> <a href="#"> Reviews Management </a> </div> </div> </div> <!---------------------------left end of layout--    ------------------------------> <!---------------------------middle layout start--------------------------------> <div data-options="Region : ' Center ', title: ' Center '"style=""> <divclass="Easyui-tabs"style="width:700px; height:250px"fit="true"Id="TT"> <div title="Login"style="padding:10px"data-options="closable:true"> <span> Welcome to the system! </span> </div> </div> </div> <!---------------------------Middle layout end------- -------------------------> <!---------------------------bottom-side layout start--------------------------------> < Div data-options="Region : ' South ', Border:false"style="height:40px; background: #A9FACD; text-align:center; padding:10px;"> <label style="font-size:10px;"> Copyright &copy; Ypf</label> </div> <!---------------------------bottom side layout end--------------------------------></ Body>

In the left, we used the "classification panel (accordion)" in it;

In the middle, the tab (tabs) is used. What we need to note here is that when we call the tab plug-in, it also sets the width and height, but he is not all expanded in the middle of the space. To solve this problem, we need to set tabs's fit= "true". This allows the section to be covered.

　　Next, refer to the Easyui method:

The head must refer to the Easyui related styles and class libraries as well as the jquery library. Because Easyui is based on jquery.

@*easyui icon CSS style *@    <link href="~/content/themes/icon.css"Rel="stylesheet"/>    @*easyui Core Style *@    <link href="~/content/themes/default/easyui.css"Rel="stylesheet"/>    @*jquery Core Library-Compact version *@    <script src="~/scripts/jquery-1.8.2.min.js"></script>    @*easyui Core Library-Compact version *@    <script src="~/scripts/jquery.easyui.min.js"></script>    @*easyui Chinese Tips Library *@    <script src="~/scripts/easyui-lang-zh_cn.js"></script>

Note: The jquery library must be referenced before the Easyui core library, otherwise it will be an error!!!

Enterprise Management System Development Note (2)---background main interface