❮ Jeasyui Datagrid Datagrid17 Plugins Form Validatebox ❯

jQuery EasyUI Plugins

jQuery EasyUI provides a complete set of components for creating cross-browser web pages, including powerful datagrids, treegrids, panels, combos, and more. Users can combine these components or use them individually.

Plugin List

Base

Layout

Menu and Button

Form

Window

DataGrid and Tree

Plugins

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, dialog properties are defined in jQuery.fn.dialog.defaults.

Events

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

Methods

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

Where:

selector is the jQuery object selector.
plugin is the plugin name.
method is the existing method matching the plugin.
parameter is the parameter object, which can be an object, string, etc.

Methods are defined in jQuery.fn.{plugin}.methods. Each method has two parameters: jq and param. The first parameter 'jq' is required and references the jQuery object. The second parameter 'param' references the actual parameters passed to the method. For example, to extend the dialog component with a method named 'mymove', the code would be:

$.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 reference the EasyUI CSS and JavaScript files in 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 have referenced the necessary EasyUI files, you can define an EasyUI component either through markup or using JavaScript. For example, to define a collapsible panel, you would 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 through 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:

<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 that binds to the 'onSelect' event.

&lt;input class="easyui-combobox" name="language"
    data-options="
    url:'combobox_data.json',
    valueField:'id',
    textField:'text',
    panelHeight:'auto',
    onSelect:function(record){
    alert(record.text)
    }">

❮ Jeasyui Datagrid Datagrid17 Plugins Form Validatebox ❯