JQuery Easyui Quick Start Practical Tutorial (i)-Getting Started

1. JQuery Easyui Overview

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 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's official address is: http://www.jeasyui.com/

Features of JQuery Easyui:

1. Easyui is a jquery-based user interface plug-in collection

2. Easyui provides the necessary functionality for creating modern, interactive, JavaScript applications

3. With Easyui you don't have to write a lot of code, you just need to write some simple HTML tags to define the user interface

4. Easyui is a perfect framework for supporting HTML5 Web pages

5. Easyui saves you time and scale of web development

6. Easyui is simple but powerful

2, the directory structure of JQuery Easyui

650) this.width=650; "Src=" Http://upload-images.jianshu.io/upload_images/5376572-08e2dd5d8668cac8.png?imageMogr2 /auto-orient/strip%7cimageview2/2/w/1240 "style=" Border:0px;vertical-align:middle;height:auto; "alt=" 1240 "/>

Examples of the various components used in Demo:easyui
Demo-mobile:easyui example for each component on a mobile terminal
Locale: is an internationalized Support folder
SRC: Is the source of some Easyui plug-ins
Plugins: is the plugin used by Easyui
Themes:easyui-based theme

The installation of JQuery Easyui only needs to be downloaded, and the JS and CSS you need to use will be introduced into the page. The files that are typically introduced include:

Themes/default/easyui.css
Themes/icon.css
Jquery.min.js
Jquery.easyui.min.js
Locale/easyui-lang-zh_cn.js

3. The development steps of JQuery Easyui

1. The CSS and JS resources required to import Easyui on the JSP page

650) this.width=650; "Src=" Http://upload-images.jianshu.io/upload_images/5376572-94b96df5799a9577.png?imageMogr2 /auto-orient/strip%7cimageview2/2/w/1240 "style=" Border:0px;vertical-align:middle;height:auto; "alt=" 1240 "/>

Copy the above files to the project

<!-- 1. Import the CSS file  --><link rel= "stylesheet"  type= "Text/css"  href= ". /easyui/themes/default/easyui.css "><link rel=" stylesheet " type=" Text/css " href=" ... /easyui/themes/icon.css "><!-- 2. Import js file  --><script type=" Text/javascript " src=" .. /easyui/jquery.min.js "></script><script type=" Text/javascript " src=". /easyui/jquery.easyui.min.js "></SCRIPT> 

2. design a div to add the Easyui class

<div class= "Easyui-dialog" style= "width:400px;height:200px" data-options= "title: ' Hello Easyui ', collapsible:true , Iconcls: ' Icon-ok ', Onopen:function () {} "> this is content!!! </div>

3. Final Effect

Browser access page, the effect is as follows:

650) this.width=650; "Src=" Http://upload-images.jianshu.io/upload_images/5376572-7e37211ff48b5a30.png?imageMogr2 /auto-orient/strip%7cimageview2/2/w/1240 "style=" Border:0px;vertical-align:middle;height:auto; "alt=" 1240 "/>

PS, this tutorial companion video:
Http://edu.51cto.com/course/10138.html

This article starts in the personal blog (http://www.xushifeng.net), if need to reprint, please contact the author.

This article from "God Code small Wind Blog" blog, reproduced please contact the author!

JQuery Easyui Quick Start Practical Tutorial (i)-Getting Started