jQuery EasyUI plug-in

jQuery EasyUI provides a complete set of components for creating cross-browser web pages, including powerful datagrid (data grid), treegrid (tree table), panel (panel), combo (drop-down combination) )etc. Users can use these components in combination or use one of them individually.

Plug-in list

Base (base)

• Parser parser

• Easyloader loader

• Draggable Draggable

• Droppable Placeable

• Resizable Resizable

• Pagination Pagination

• Searchbox Search box

• Progressbar Progress bar

• Tooltip prompt box

Layout

• Panel panel

• Tabs tab page/ Tab

• Accordion Accordion Panel

• Layout Layout

Menu (menu) and Button ( Button)

• Menu Menu

• Linkbutton Link button

• Menubutton Menu button

• Splitbutton split button

Form (form)

• Form form

• Validatebox Validation box

• Combo combination

• Combobox combo box

• Combotree combination tree

• Combogrid combination grid

• Numberbox number box

• Datebox date box

• Datetimebox Datetimebox

• Calendar Calendar

• Spinner Spinner

• Numberspinner Numeric spinner

• Timespinner Time spinner

• Slider Slider

Window

• Window Window

• Dialog Dialog box

• Messager Message box

DataGrid (data grid) and Tree (tree)

• Datagrid Data Grid

• Propertygrid Property Grid

• Tree Tree

• Tregrid Tree Grid

Plug-in

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

Properties

Properties are defined in jQuery.fn.{plugin}.defaults. For example, the properties of dialog are defined in jQuery.fn.dialog.defaults.

Events

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

Method

Syntax for calling a method: $('selector').plugin('method', parameter);

Among them:

• selector is a jquery object selector.

• plugin is the plug-in name.

• method is an existing method that matches the plugin.

• parameter is a parameter object, which can be an object or a string...

Methods are defined in jQuery.fn.{plugin}.methods. Each method has two parameters: jq and param. The first parameter 'jq' is required and refers to the jQuery object. The second parameter 'param' refers to the actual parameter passed to the method. For example, to extend the method named 'mymove' of the dialog component, 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 box (dialog) to the specified position:

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

Get started with jQuery EasyUI

Download the library and reference the EasyUI CSS and JavaScript files in your pages.

<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 have referenced the necessary files for EasyUI, you can define an EasyUI component through markup 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 via markup, the 'data-options' attribute is used to support HTML5 compatibility since version 1.3 Property name. So you can rewrite the above code 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 code below demonstrates how to create a combo box that 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)
    }">