jquery Easyui Document One (draft)

Jquery Easyui Document Basics

Each Easyui component has properties, methods, and events that developers can easily extend.

Property

The properties of the component are defined in Jquery.fn. {plugin}.defaults, for example, dialog properties are defined in JQuery.fn.dialog.defaults

Event

The event (callback function) is also defined in Jquery.fn. {Plugin}.defaults

Method

The syntax for calling a method is similar to the following: $ (' selector '). Plugin (' method ', parameter);

Specifically:

1. Selector is the object selector of jquery;
2. Plugin is the plugin name;
3. method is the plugin correspondence;
4. parameter is a parameter object, can be a object,string and so on;

The method is defined in Jquery.fn. {Plugin}.methods. Each method has two parameters: JQ and Param, where the first parameter JQ is required, this parameter represents the object you want to component, and the second parameter represents the parameter to be passed to the newly defined method. For example: We are going to add a method Mymove to the dialog (dialog) component, the code is as follows:

1. $.extend ($.fn.dialog.methods, {
2. Mymove:function (JQ, newposition) {
3. Return Jq.each (function () {
4. $ (This). dialog (' Move ', newposition);
5. });
6. }
7. });

After defining the Mymove, we can call the Mymove method to move the dialog component to the location we specify:

1. $ (' #dd '). Dialog (' Mymove ', {

2. left:200,

3. top:100

4.});

Jqueryeasy UI Start

Download (and Include in your development page) the corresponding JS library file and the corresponding Easyui CSS file, etc.:

1. <link rel= "stylesheet" type= "Text/css" href= "Easyui/themes/default/easyui.css" >

2. <link rel= "stylesheet" type= "Text/css" href= "Easyui/themes/icon.css" >

3. <script type= "Text/javascript" src= "Easyui/jquery.min.js" ></script>

4. <script type= "Text/javascript" src= "Easyui/jquery.easyui.min.js" ></script>

Once your page contains the Easyui required questions, you can define a Easyui component using HTML tags or JS code on your page. For example, if you want to define a panel that has a collapsed function, use HTML markup to implement the following:

1. <div id= "P" class= "Easyui-panel" style= "width:500px;height:200px;padding:10px;"

2. title= "My Panel" iconcls= "Icon-save" collapsible= "true" >

3. The Panel content

4. </div>

When creating a component using HTML markup, from the 1.3 version of Easyui: The data-options tag can support a new notation for the HTML5 property name (so you can rewrite the previous code as follows):

1. <div id= "P" class= "Easyui-panel" style= "width:500px;height:200px;padding:10px;"

2. title= "My Panel" data-options= "ICONCLS: ' Icon-save ', collapsible:true" >

3. The Panel content

4. </div>

The following code example shows how to create a combo box with a onselect event bound

1. <input class= "Easyui-combobox" name= "language"

2. data-options= "

3. URL: ' Combobox_data.json ',

4. Valuefield: ' id ',

5. TextField: ' Text ',

6. Panelheight: ' Auto ',

7. Onselect:function (record) {

8. Alert (Record.text)

9.} ">

Parser usage

1. $.parser.parse (); Parse the entire page

2. $.parser.parse (' #cc '); Resolving a specific node

Property

Name	Type	Description	Default
$.parser.auto	Boolean	Defines if to auto parse the Easyui component (defines whether the Easyui component is resolved automatically).	True

Event

Name	Parameters	Description
$.parser.oncomplete	Context	Fires when parser finishing its parse action (this event is triggered when the parser finishes parsing the action).

Method

Name	Parameter	Description
$.parser.parse	Context	Parse the Easyui component (Parse Easyui component).

Easyloader Use load Easyui module

1. easyloader.base = '.    /‘; Set the main path of the Easyui

2. Easyloader.load (' Messager ', function () {//Load concrete module, block

3. $.messager.alert (' Title ', ' load OK ');

4.});

Loading a script from an absolute path

1. Using (' Http://code.jquery.com/jquery-1.4.4.min.js ', function () {

2.//...

3.});

Loading a script from a relative path

1.//The script path relative to Easyui directory

2. Using ('./myscript.js ', function () {

3.//...

4.});

Property

Name	Type	Description	Default
Modules	Object	Predefined modules (pre-defined module).
Locales	Object	Predefined locales (pre-defined Localization object).
Base	String	The Easyui base directory, must end With '/'. (Easyui main path, end must take/)	The base directory will is auto setted relative to Easyload.js (Easyui's main path is automatically set to the path where Easyload.js is located by default)
Theme	String	The name of theme that defined in ' Themes ' directory (subject name defined under Theme directory)	Default
Css	Boolean	Defines if loading CSS file when loading module (loading CSS files while loading modules)	True
Locale	String	The locale name (the name of the localized object)	Null
Timeout	Number	Timeout value in milliseconds. Fires If a timeout occurs (the number of milliseconds to expire if the set number of milliseconds is reached).	2000

Pre-defined Localization objects

• Af
• Bg
• Ca
• Cs
• Cz
• Da
• De
• En
• Es
• Fr
• nl
• Tr
• ZH_CN (English)
• ZH_TW (Traditional Chinese)

Event

Name	Parameters	Description
OnProgress	Name	Fires when the A module is loaded successfully (triggered when the modules are loaded successfully).
OnLoad	Name	Fires when a module and it's dependencies is loaded successfully (triggered when a specific module and the modules on which a particular module relies on are loaded successfully).

Method

Name	Parameter	Description
Load	Module, callback	Load the specified module. When load success A callback function would be called. The module parameter valid type is: A single module name An module array A CSS file that end with '. CSS ' A JS file that end with '. JS ' (Load the specified module, if the load succeeds then call the callback function, the module parameters have the following concentration: Single module name Module array CSS file JS file)

Drag and Drop usage introduction

Create a draggable component with HTML tags

1. <div id= "dd" class= "easyui-draggable" data-options= "handle: ' #title '" style= "width:100px;height:100px;" >
2. <div id= "title" style= "background: #ccc;" >title</div>
3. </div>

Using JS to create a draggable component

1. <div id= "dd" style= "width:100px;height:100px;" >
2. <div id= "title" style= "background: #ccc;" >title</div>
3. </div>

4. $ (' #dd '). Draggable ({
5. Handle: ' #title '
6. });

Property

Name	Type	Description	Default
Proxy	string,function	A Proxy element to being used when dragging, when set to ' clone ', A-clone element is used as proxy. If a function is specified, it must return a JQuery object. The example below shows how to create a simple proxy object. $ ('. Dragitem '). Draggable ({         proxy:function (source) {                var p = $ (' <div Style= "border:1px solid #ccc; width:80px" ></div> ");                p.html (source). html ()). AppendTo (' body ');                return p;        } }) (not seen)	Null
Revert	Boolean	If set to True, the element would return to its start position whenever dragging stops (if set to true, then the dragged object will go back to the origin once the drag is stopped).	False
Cursor	String	The CSS cursor when dragging (not quite understand).	Move
DeltaX	Number	The dragged element position x corresponding to current cursor (the distance between the dragged element and the currently cursor on the horizontal axis)	Null
DeltaY	Number	The dragged element position y corresponding to current cursor (the distance between the dragged element and the active cursor on the vertical axis)	Null
Handle	Selector	The handle that start the draggable (start a push-pull handle).	Null
Disabled	Boolean	True to stop draggable (true for Stop dragging).	False
Edge	Number	The drag width in which can start draggable (the range of widths that can be dragged).	0
Axis	String	Defines the axis which the dragged elements moves on, available value was ' V ' or ' h ', when set to null would move across ' V ' and ' H ' direction (defines the axis in which the element moves during the drag process, which can be either V or H. If set to null, the direction of both V and H will be crossed.	Null

Events

Name	Parameters	Description
Onbeforedrag	E	Fires before dragging, return False to cancel the this dragging (drag before triggering, if return false then cancel drag).
Onstartdrag	E	Fires when the target object start dragging (fires when the destination objects begin to be dragged).
Ondrag	E	Fires during dragging. Return false will isn't do dragging actually (triggered during drag, if return false won't produce a drag effect).
Onstopdrag	E	Fires when the dragging stops (triggered when drag stops).

Method

name	Parameter	Description
Options	None	Return the Options property (Options Properties).
Proxy	None	Return the Drag proxy If the Proxy property is setted (returns the drag-and-drop agent if there is a proxy attribute set)).
Enable	None	Enable the Drag action (Enable drag-and-drop).
Disable	None	Disable T He drag action. (Disabled with drag and drop)

jquery Easyui Document One (draft)