jQuery EasyUI plug-in

jQuery EasyUI plug-in

The list of plug-ins

Base (Basic)

• Parser parser
• Easyloader loader
• Dragable can be dragged
• Droppable can be placed
• Resizable adjusts the size
• Pagination pagination
• Searchbox search box
• Progressbar progress bar
• Tooltip prompt box

Layout (layout)

• Panel panel
• Tabs tabs/tabs
• Accordion folds the panel
• Layout layout

Menu (menu) and Button (button)

• Menu menu
• Linkbutton link button
• Menubutton menu button
• Splitbutton split button

Form (Form)

• Form form
• Validatebox verification box
• Combo combination
• Combobox combo box
• Combotree Combination Tree
• Combogrid combination grid
• Numberbox digital box
• Datebox date box
• Datetimebox date time frame
• Calendar calendar
• Spinner spinner
• Numberspinner Numerical Spinner
• Timespinner Time Spinner
• Slider slider

Window (Window)

• Window window
• Dialog dialog box
• Messager message box

DataGrid (Data Grid) and Tree (Tree)

• Datagrid data grid
• Propertygrid property grid
• Tree tree
• Treegrid tree grid

Plug - ins

Each component of easyui has properties, methods, and events. Users can easily extend these components.

Property

The property is defined at jQuery.fn. { plugin}.defaults。 For example, dialog's properties are defined on jQuery.fn.dialog.defaults.

Event

Events (callback functions) are also defined at jQuery.fn. {plugin}.defaults。

Method

The syntax of the calling method: $('selector') .plugin ('method', parameter);

Among them:

• Selector is the jquery object selector.
• Plugin is the plug-in name.
• Method is an existing method that matches the plug-in.
• Parameter is an argument object, which can be an object, a string...

The method is defined at jQuery.fn. { plugin}.methods。 E ach method has two parameters: jq and param. T he first argument 'jq' is required to refer to the jQuery object. T he second parameter 'param' refers to the actual parameters passed by the method. For example, the method to extend the dialog component is called 'mymove', and the code is as follows:

$.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 to the specified location:

$('#dd').dialog('mymove', {
    left: 200,
    top: 100
});

Get started with jQuery EasyUI

Download the library and reference EasyUI CSS and JavaScript files on 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>

Once you reference the necessary files for EasyUI, you can define an EasyUI component by tagging or using JavaScript. For example, to top a panel with collapsible functionality, you need to write the following HTML code:

<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 components by tagging, the 'data-options' property is used to support HTML5-compatible property names since version 1.3. So you can rewrite the code above 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 shows how to create a combo box that binds to 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)     
    }">