jQuery EasyUI简述

来源:互联网 发布:apache kylin 安装 编辑:程序博客网 时间:2024/05/17 08:04

1.什么是 jQuery EasyUI
1).jQuery EasyUI 框架提供了创建网页所需的一切,帮助您轻松建立站点。
2).easyui 是一个基于 jQuery 的框架,集成了各种用户界面插件。
3).easyui 提供建立现代化的具有交互性的 javascript 应用的必要的功能。

2.EasyUI的基本用法
1).Draggable(拖动)的实现

注释:使用标签,增加属性class=”easyui-draggable” data-options=”handle:’#title’”,这个div就可以被拖动。
扩展:关于拖放控件属性的扩展(如下图API)。
这里写图片描述
2).Resizable(可随意调整大小)

注释:使用标签,增加属性 class=”easyui-resizable” data-options=”maxWidth:800,maxHeight:600”,这个div就可以随意想拖多大就拖多大。
这里写图片描述
注解:也可以通过disabled属性设置为不可以调整大小。
3).Pagination(分页)(效果图如下)
这里写图片描述
使用标签创建分页控件。
这里写图片描述
分页控件属性:
这里写图片描述
4).SearchBox(搜索框)
搜索框提示用户需要输入搜索的值。它可以结合一个菜单,允许用户选择不同的搜索类别。在用户按下回车键或点击组件右边的搜索按钮的时候会执行搜索操作。
这里写图片描述
使用标签创建。添加’easyui-searchbox’类ID到标签。
这里写图片描述
这样就可以实现简易查询。
5).ProgressBar(进度条)

这里写图片描述
使用HTML标签或程序创建进度条组件。从标签创建更加简单,添加’easyui-progressbar’类ID到标签.
这里写图片描述
6).Tooltip(提示框)(效果图)
这里写图片描述
当用户将鼠标移动到元素上的时候,将会显示一个消息提示框。提示框的内容可以是页面中任何一个HTML元素或者通过Ajax发送后台请求以获取提示框内容。
通过标签创建提示框,给元素添加一个”easyui-tooltip”的类名,无需任何Javascript代码。
这里写图片描述
大家觉得简单吗? 有兴趣吗?如果有兴趣的话,我们明天继续往下学习EasyUI,欢迎大家哦。

原创粉丝点击