首页
会员中心
到顶部
到尾部
jQuery EasyUI教程

jQuery EasyUI 插件

时间:2020/11/2 21:25:07  作者:  来源:  查看:0  评论:0
内容摘要:pre {white-space: pre-wrap;}jQuery EasyUI 插件jQuery EasyUI 提供了用于创建跨浏览器网页的完整的组件集合,包括功能强大的 datagrid(数据网格)、treegrid(树形表格)、 panel(面板)、combo(下拉组合)...

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)    }">


相关评论
广告联系QQ:45157718 点击这里给我发消息 电话:13516821613 杭州余杭东港路118号雷恩国际科技创新园  网站技术支持:黄菊华互联网工作室 浙ICP备06056032号