• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

jQuery EasyUI 插件

原作者: [db:作者] 来自: [db:来源] 收藏 邀请
pre { white-space: pre-wrap; }

jQuery EasyUI 插件

jQuery EasyUI提供了用于创建跨浏览器网页的完整的组件集合,包括功能强大的datagrid(数据网格)、treegrid(树形表格)、 panel(面板)、combo(下拉组合)等等,这些组件能够组合使用,也可以单独使用。

插件列表

Base(基础)

Layout(布局)

Menu(菜单)与 Button(按钮)

Form(表单)

Window(窗口)

DataGrid(数据网格)与 Tree(树)

插件

easyui的每个组件都有属性、方法和事件。用户可以很容易地对这些组件进行扩展。

属性

属性是定义在jQuery.fn.{plugin}.defaults。比如,dialog的属性是定义在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'引用方法传递的实际参数。比如,要扩展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

下载库,并在您的页面中引用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-1.7.2.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>

当通过标记创建组件,'data-options'属性被用来支持自版本1.3以来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)     
    }">

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
jQuery EasyUI 扩展发布时间:2022-01-28
下一篇:
jQuery EasyUI 表单 – 过滤下拉数据网格(ComboGrid)发布时间:2022-01-28
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap