jQuery EasyUI致力于帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。jQuery EasyUI提供了基于当下流行的jQuery core和HTML5的控件，助您打造适合当今网络的应用程序。

easyui的每个组件都具有属性，方法和事件。用户可以轻松扩展它们。

属性

这些属性在jQuery.fn。{plugin} .defaults中定义。例如，对话框的属性在jQuery.fn.dialog.defaults中定义。

事件

事件（回调函数）在jQuery.fn。{plugin} .defaults中定义。

方法

调用方法的语法：$（'selector'）。plugin（'method'，parameter）;

位置：

• selector是jQuery对象选择器。
• plugin是插件名称。
• method是插件对应的现有方法。
• parameter是参数对象，可以是对象，字符串，...

这些方法在jQuery.fn。{plugin} .methods中定义。每种方法都有两个参数：jq和param。第一个参数'jq'是必需的，它引用该jQuery对象。第二个参数“ param”是指通过方法的真正参数。例如，为对话框组件扩展名为“ mymove”的方法，代码如下所示：

$.extend($.fn.dialog.methods, {
    mymove: function(jq, newposition){
        return jq.each(function(){
            $(this).dialog('move', newposition);
        });
    }
});

现在，您可以调用“ mymove”方法将对话框移至指定位置：

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

jQuery EasyUI入门

下载该库，并在页面上包含EasyUI CSS和JavaScript文件。

<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.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

包含EasyUI必需的文件后，您可以通过标记或使用JavaScript定义EasyUI组件。例如，要定义具有可折叠功能的面板，可以编写如下的HTML代码：

<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>

从标记创建组件时，从1.3版开始，“data-options”属性可用于支持HTML5兼容属性名称。因此，您可以将上面的代码重写为：

<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>

下面的代码显示了如何创建绑定“ onSelect”事件的组合框。

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

现慧都隆重推出“软件国产化服务季”，拥有当下最流行，最全面的UI开发组件！点击下方“了解更多”即可查看！