Easyui Getting Started Guide

@ Author YHC

All easyui components include attributes, methods, and events. You can simply extend them.

Attribute

The attribute is defined in jQuery. fn. {plugin}. defaults. For example, the attribute of the [dialog] component of the dialog box is defined in jQuery. fn. dialog. defaults.

Event
The event (callback function) is also defined in jQuery. fn. {plugin}. defaults.

Method
Call method Syntax: $ ('selector '). plugin ('method', parameter); I believe that everyone in $ ('selector ') Should Know About 'selector' as long as they have used jQuery. If you do not know it, we suggest you read jQuery first.

Where:

Selector is a jquery selector object.
Plugin is the plug-in name.
Method is the existing method corresponding to the plug-in.
Parameter is a parameter object. It can be an object, a string...
The method is defined in jQuery. fn. {plugin }. in methods, all methods have two parameters: jq and param. The first parameter 'jq' is required. This indicates the jQuery object, the second parameter 'param' refers to the real parameters of the input method. For example, to extend a method for the dialog component and name it 'mymove ', the code is like this:

 

 

$. Extend ($. fn. dialog. methods ,{
Mymove: function (jq, newposition ){
Return jq. each (function (){
$ (This). dialog ('move ', newposition );
});
}
});

Now you can call the 'mymove 'method to move the dialog box to the specified position .:

$ ('# Dd'). dialog ('mymove ',{
Left: 200,
Maximum: 100
});

JQuery EasyUI getting started
Download the js library and introduce the easyui CSS and Havascript files to your page.

<Link rel = "stylesheet" type = "text/css" href = "easyui/themes/default/easyui.css">
<Link rel = "stylesheet" type = "text/css" href = "easyui/themes/icon.css">
<Script type = "text/javascript" src = "easyui/jquery-1.7.2.min.js"> </script>
<Script type = "text/javascript" src = "easyui/jquery. easyui. min. js"> </script>

After you introduce the files required by EasyUI, you can define an EasyUI component from the tag or JS. For example, you can define a panel and collapse function and write HTML code like this:

<Div id = "p" class = "easyui-panel" style = "width: 500px; height: 200px; padding: 10px ;"
Title = "My Panel" iconCls = "icon-save" collapsible = "true">
The panel content
</Div>

When creating a component from the tag, you can use the 'data-options' attribute to support HTML5. The attribute names compatible with version 1.3 are as follows:

<Div id = "p" class = "easyui-panel" style = "width: 500px; height: 200px; padding: 10px ;"
Title = "My Panel" data-options = "iconCls: 'icon-save', collapsible: true">
The panel content
</Div>

The following code creates a component and binds the 'onselect' event.

<Input class = "easyui-combobox" name = "language"
Data-options ="
Url: 'combobox _ data. json ',
ValueField: 'id ',
TextField: 'text ',
PanelHeight: 'auto ',
OnSelect: function (record ){
Alert (record. text)
} "/>