jQuery EasyUI Plugins


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

Plugin List

Base

Layout

Menu and Button

Form

Window

DataGrid and Tree

Plugins

Each easyui component 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 the dialog are defined in jQuery.fn.dialog.defaults.

Events

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

Methods

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

Where:

  • selector is the jQuery object selector.
  • plugin is the plugin name.
  • method is an existing method that matches the plugin.
  • parameter is the parameter object, which can be an object, 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 parameters passed to the method. For example, to extend the dialog component with a method named 'mymove', 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 a specified position:

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

Getting Started with jQuery EasyUI

Download the library and include EasyUI CSS and JavaScript files in your page.

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

Once you have included the necessary EasyUI files, you can define an EasyUI component via markup or using JavaScript. For example, to define 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-compatible attribute names since version 1.3. 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 following code demonstrates how to create a combobox bound with 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)
    }">
Other Extensions