22, "Lightweight open source framework" EFW framework web front-end development of the Jqueryeasyui

Back to the "open source" EFW Framework Series article index

EFW Framework Source code Download V1.2:http://pan.baidu.com/s/1hcnua

EFW Framework Instance source code download: Http://pan.baidu.com/s/1o6MAKCa

        Preface : EFW framework is mainly used for industry software software development, so the interface needs to embody professional, beautiful, style unified effect; In the Web convenient interface framework is still a lot, such as the powerful ext, Based on the jQueryUI of jquery, there are also some domestic are more beautiful, and the EFW framework recommended is Jqueryeasyui, why choose it, ; previously useful in the project ExtJS do interface development, to tell the truth used more painful, it kind of encoding is not generally acceptable, the interface is written with JS code, it does not look very intuitive, especially the code is not too standard, the last page JS is also the old long, Finally, the corresponding closing symbol is not all to look for half a day; Now the project is to use Jqueryeasyui development, it is called a comfortable ah, of course, if you still think Jqueryeasyui is not strong enough, you can easily in the EFW framework to expand your own interface framework;

This article highlights:

1.JqueryEasyUI Introduction

2.JqueryEasyUI Common Controls use detailed

Coding styles developed in the 3.EFW framework using Jqueryeasyui

4. Custom controls on Jqueryeasyui basis

1.JqueryEasyUI Introduction

The jquery Easyui is a set of jquery-based UI plug-ins, and the goal of jquery Easyui is to make it easier for web developers to create a feature-rich and beautiful UI interface. Developers do not need to write complex JavaScript, and do not need to have a deep understanding of CSS styles, developers need to understand only a few simple HTML tags. JQuery Easyui provides us with the use of most UI controls, such as Accordion,combobox,menu,dialog,tabs,validatebox,datagrid,window,tree, and so on. jquery Easyui is a plugin based on the UI interface of jquery, which is relatively not extjs powerful, but the page is also pretty good. Some features are also sufficient for developers to use, with a lighter weight relative to ExtJS.

Characteristics

1 collection based on the jquery user interface plug-in

2 provides the necessary functions for some JS applications that are currently used for interaction

3 using Easyui you don't have to write a lot of JavaScript code, usually just write HTML tags to define the user interface.

4 Support HTML5

5 Save time and resources when you develop your product

6 simple, but very powerful

7 support extensions to extend the control to your needs

8 The current deficiencies are being updated in a way that continues to improve

2.JqueryEasyUI Common Controls use detailed

We will then combine the EFW framework to explain in detail how the Jqueryeasyui control is used, and select several representative controls based on their own understanding of it, and a few Jqueryeasyui files must be referenced before using the controls in the page;

1) Layout control

The first thing to learn a set of controls is the layout control, respectively, up and down, center, and so on, as well as nested layout, such as in the center panel and then divided into the upper and lower layout; The layout is good for the later interface adjustment is very convenient, the code also looks more clear and beautiful; write a <div> tag and class= " Easyui-layout ", which means that the div layer becomes a layout control, and all other controls are written in this way;

2) DataGrid Table control

The table control has the most use of a control in the system, there is a DataGridView table control in the WinForm, just to bind the DataTable data to DataGridView can display the data is very simple, and the DataGrid is BS, certainly not so convenient, But the EFW framework also encapsulates it very conveniently, first writing the DataGrid Interface Code, defining the Display column, and then specifying the request address in the JS code for the control's URL property, and using JQuery's Ajax to send an HTTP request to invoke the backend Webcontroller, Returns the JSON data displayed in the DataGrid control;

3) Dialog Pop-up window control

This control is also used a lot of, such as new, modify the operation of the time more inclined to pop up a small interface to operate;

Learn more about other controls reference: Http://www.jeasyui.com

coding styles developed in the 3.EFW framework using Jqueryeasyui

Jqueryeasyui code writing has two styles, one is to use HTML tags to write interface code, there is a way to write JS code dynamically generated interface, from the above control example can be seen, the individual insisted that the first way to write the interface code, JS code is just some data request operation;

4. Custom controls on Jqueryeasyui basis

the introduction of two of their own two controls, is based on the extension of the Jqueryeasyui, to the need to develop the control of the two samples, there is a reference to something; an extended control on a date control, can be checked monthly, quarterly, according to the second half of the search, annual check The other is to show the table control in the form of a card; The code is placed in the Webplugin directory in the Efwweb project.

22, "Lightweight open source framework" EFW framework web front-end development of the Jqueryeasyui