easyui 入门指南
所有easyui组件都有,属性,方法,事件,用户可以简单的对其扩展.
属性
属性定义在 jQuery.fn.{plugin}.defaults中.例如, 对话框组件[dialog]的属性定义在jQuery.fn.dialog.defaults.
事件
事件(回调函数)也定义在jQuery.fn.{plugin}.defaults.
方法
调用方法语法: $('selector').plugin('method', parameter);相信$('selector')中的'selector'大家只要使用过jQuery的都应该知道,如果你不知道,建议你去先看jQuery
Where:
selector 是jquery选择器对象.
plugin 是插件名称.
method 是对应插件现有的方法.
parameter 是参数对象,可以是一个对象,字符串...
方法定义在 jQuery.fn.{plugin}.methods中,所有方法都有两个参数 jq和param,第一个参数 'jq' 是必须的,这个指的是jQuery对象,第二个参数'param'指的是传入方法的真正的参数,例如:为dialog组件扩展一个方法,命名为'mymove',代码像这样:
$.extend($.fn.dialog.methods, {
mymove: function(jq, newposition){
return jq.each(function(){
$(this).dialog('move', newposition);
});
}
});
现在你可以调用 'mymove' 方法去移动dialog对话框到指定的位置.:
$('#dd').dialog('mymove', {
left: 200,
top: 100
});
jQuery EasyUI入门指南
下载js库和引入easyui CSS和Havascript文件至你的页面
<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>
你引入EasyUI必须的文件之后,你可以从标记或者JS定义一个EasyUI组件.例如,定义一个panel以及折叠功能 你可以像这样写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>
当从标记创建一个组件, 可以使用'data-options' 属性去支持HTML5,从1.3版本开始兼容的属性名称, 所以你可以重写以上代码为:
<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)
}" />
