雷林鹏分享:jQuery EasyUI 插件
jQuery EasyUI 插件
jQuery EasyUI 提供了用于创建跨浏览器网页的完整的组件集合,包括功能强大的 datagrid(数据网格)、treegrid(树形表格)、 panel(面板)、combo(下拉组合)等等。 用户可以组合使用这些组件,也可以单独使用其中一个。
插件列表
Base(基础)
Parser 解析器
Easyloader 加载器
Draggable 可拖动
Droppable 可放置
Resizable 可调整尺寸
Pagination 分页
Searchbox 搜索框
Progressbar 进度条
Tooltip 提示框
Layout(布局)
Panel 面板
Tabs 标签页/选项卡
Accordion 折叠面板
Layout 布局
Menu(菜单)与 Button(按钮)
Menu 菜单
Linkbutton 链接按钮
Menubutton 菜单按钮
Splitbutton 分割按钮
Form(表单)
Form 表单
Validatebox 验证框
Combo 组合
Combobox 组合框
Combotree 组合树
Combogrid 组合网格
Numberbox 数字框
Datebox 日期框
Datetimebox 日期时间框
Calendar 日历
Spinner 微调器
Numberspinner 数值微调器
Timespinner 时间微调器
Slider 滑块
Window(窗口)
Window 窗口
Dialog 对话框
Messager 消息框
DataGrid(数据网格)与 Tree(树)
Datagrid 数据网格
Propertygrid 属性网格
Tree 树
Treegrid 树形网格
插件
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" rel="nofollow" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" rel="nofollow" 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)
}">
本文转载自:w3cschool(编辑:雷林鹏 来源:网络 侵删)
雷林鹏分享:jQuery EasyUI 插件的更多相关文章
- 分享JQuery动画插件Velocity.js的六种列表加载特效
分享JQuery动画插件Velocity.js的六种列表加载特效.在这款实例中给中六种不同的列表加载效果.分别为从上飞入.从右侧飞入.从左侧飞入.和渐显.一起看下效果图: 在线预览 源码下载 实现 ...
- 雷林鹏分享:jQuery EasyUI 数据网格 - 创建列组合
jQuery EasyUI 数据网格 - 创建列组合 easyui 的数据网格(DataGrid)可以创建列组合,如下所示: 在本实例中,我们使用平面数据来填充数据网格(DataGrid)的数据,并把 ...
- 雷林鹏分享:jQuery EasyUI 树形菜单 - 树形菜单添加节点
jQuery EasyUI 树形菜单 - 树形菜单添加节点 本教程向您展示如何附加节点到树形菜单(Tree).我们将创建一个包含水果和蔬菜节点的食品树,然后添加一些其他水果到已存在的水果节点. 创建食 ...
- 雷林鹏分享:jQuery EasyUI 树形菜单 - 树形菜单拖放控制
jQuery EasyUI 树形菜单 - 树形菜单拖放控制 当在一个应用中使用树(Tree)插件,拖拽(drag)和放置(drop)功能要求允许用户改变节点位置.启用拖拽(drag)和放置(drop) ...
- 雷林鹏分享:jQuery EasyUI 树形菜单 - 创建带复选框的树形菜单
jQuery EasyUI 树形菜单 - 创建带复选框的树形菜单 easyui 的树(Tree)插件允许您创建一个复选框树.如果您点击一个节点的复选框,这个点击的节点信息将向上和向下继承.例如:点击 ...
- 雷林鹏分享:jQuery EasyUI 树形菜单 - 树形菜单加载父/子节点
jQuery EasyUI 树形菜单 - 树形菜单加载父/子节点 通常表示一个树节点的方式就是在每一个节点存储一个 parentid. 这个也被称为邻接列表模型. 直接加载这些数据到树形菜单(Tree ...
- 雷林鹏分享:jQuery EasyUI 表单 - 创建异步提交表单
jQuery EasyUI 表单 - 创建异步提交表单 本教程向您展示如何通过 easyui 提交一个表单(Form).我们创建一个带有 name.email 和 phone 字段的表单.通过使用 e ...
- 雷林鹏分享:jQuery EasyUI 表单 - 表单验证
jQuery EasyUI 表单 - 表单验证 本教程将向您展示如何验证一个表单.easyui 框架提供一个 validatebox 插件来验证一个表单.在本教程中,我们将创建一个联系表单,并应用 v ...
- 雷林鹏分享:jQuery EasyUI 数据网格 - 设置冻结列
jQuery EasyUI 数据网格 - 设置冻结列 本实例演示如何冻结一些列,当用户在网格上移动水平滚动条时,冻结列不能滚动到视图的外部. 为了冻结列,您需要定义 frozenColumns 属性. ...
随机推荐
- Stanford CS231n实践笔记(课时14卷积神经网络详解 上)
本课我们主要来研究一个"浏览器中的卷积神经网络" 这只是一个展示项目,但是能够帮助直观地看到一些东西 地址:https://cs.stanford.edu/people/karpa ...
- QT5下的caffe项目属性
TEMPLATE = app CONFIG += console c++11 CONFIG -= app_bundle CONFIG -= qt SOURCES += /home/aimhabo/ca ...
- topcoder srm 663 div1
problem1 link 每次枚举$S$的两种变化,并判断新的串是否是$T$的子串.不是的话停止搜索. problem2 link 首先考慮增加1个面值为1的硬币后,$ways$数组有什么变化.设原 ...
- Flutter学习指南:UI布局和控件
Flutter学习指南:UI布局和控件 - IT程序猿 https://www.itcodemonkey.com/article/11041.html
- extjs使用笔记-21
yii是后台php框架 而yui是前端界面框架,是ajax框架 Extjs是建立在yui基础上的.不要搞混了. jquery的ready方法,是在文档已经加载完毕\图像完全显示后, 才载入执行的. 由 ...
- Python, pandas: how to sort dataframe by index// Merge two dataframes by index
pd.concat([df1, df2], axis=1) df.sort_index(inplace=True) https://stackoverflow.com/questions/404680 ...
- hihoCoder week4 Trie图
ac自动机 题目链接 https://hihocoder.com/contest/hiho4/problem/1 参考:https://blog.csdn.net/baidu_30541191/art ...
- oracle 之 连接查询
where 连接 select * from a,b //使用的是笛卡尔乘积 显示 a.count*b.count 条数 select * from a,b where a.id=b.id 其实只是 ...
- Javascript 日期格式化 相关操作
1.相关扩展函数 //--------------------------------------------------- // 判断闰年 //--------------------------- ...
- HDU 4557 Tree(可持久化字典树 + LCA)
http://acm.hdu.edu.cn/showproblem.php?pid=4757 题意: 给出一棵树,每个结点有一个权值,现在有多个询问,每次询问包含x,y,z三个数,求出在x到y的路径上 ...