easyUI set up and use

1 easyUI Introduction

        easyui is a front-end framework, JQuery EasyUI is a set of jQuery based UI plug-in collection, and jQuery EasyUI goal is to help web developers to more easily create feature-rich and beautiful UI interface. Developers do not need to write complex javascript , under normal circumstances you only need to use some html tags to define the user interface. easyui provide the necessary functionality to establish a modern interactive applications of javascript.

        In simple terms, easyui can simply create a common web page on some dynamic plug-ins, as if the realization of a drag control, we do not need to use javascript complex arithmetic functions to manipulate static elements, let it dynamic. And, easyui also provide operation of the database. Therefore, it easyui very simple, but very powerful.

2 easyUI use

        easyUI API User Guide: http: //www.jeasyui.net/plugins

        Step One: Download easyUI plug-in, download address: http: //www.jeasyui.net/download. And unpack the archive and web directory into the project. Figure 2-1.

Figure 2-1

        Step two: Quote easyUI CSS files and JavaScript files in the paging file. Shown, we refer to a basic document in FIG. 2-2, if desired easyUI other controls necessary to introduce a separate address packet.

Figure 2-2

           Step 3: Check easyUI control manual for easyUI provides those controls, and references in HTML. There are two ways, one is to use directly in the HTML tags, one way is to use HTML + JS. Figure 2-3, using the former way, we have created a login screen.

Figure 2-3

        Here is easyUI to use a text box control as an input, the Login button is easyUI link button controls, and add a ICON icon. The results shown in Figure 2-4.

Figure 2-4

Reproduced in: https: //www.jianshu.com/p/144bd2ee94d8