Easy UI 入门
Easy UI常用于企业级开发的UI和后台开发的UI，比较重。
以下组件中的加载方式，属性和事件，方法和组件种类并不全，只是作为参考和入门学习。
1.Draggable(拖动)组件 不依赖其他组件
1.1加载方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<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.min.js"></script>
<script type="text/javascript" src="JS/Demo.JS"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
</head>
<body>
<div id="box" style="width :400px;height: 200px;background:orange;" >
内容部分
</div>
</body>
</html>
div box
$(function(){
$('#box').draggable();
});
1.2属性列表
$(function(){
$('#box').draggable({
revert:true,//设置为true,则拖动停止时返回起始位置
cursor:'move',//拖动时CSS指针样式 move指针为移动的样式 text为文本样式
disabled：true，//false无法拖动
edge:,//拖动容器宽度
axis:'v',//v垂直拖动，h水平拖动
proxy:'clone',//克隆一个元素代替拖动
proxy:function(source){//拖动时看不见元素
var p=$('<div style="width:400px;height:200px;border:5px;dashed:#ccc">')
p.appendTo('body')
return p;
}
});
});
属性列表
1.3事件列表
$(function(){
$('#box').draggable({
onBeforeDrag:function(e)
{
alert("拖动前触发!");
}
onStartDrag:function(e)
{
alert("拖动开始触发!");
}
onDrag:function(e)
{
alert("拖动过程触发!");
}
onStopDrag:function(e)
{
alert("拖动过程触发!");
}
});
});
事件列表
1.4方法列表
$('#box').draggable('disable');
$('#box').draggable('enable');
$('#box').draggable('options');
$('#box').draggable('proxy');//运行在拖到事件中可以看
方法列表
2.Droppable（放置组件）不依赖其他组件
$(function(){
$('#dd').droppable({//放置的组件
accept:'#box',//接受的组件
// disabled:true,//其拖动无效 一般不写
onDragEnter:function(e,source)
{
$(this).css('background','blue');
},
onDragOver:function(e,source)//会不停的触发 Enter只会触发一次
{
$(this).css('background','orange');
},
onDrop:function(e,source)//放入到位置区，松开鼠标左键，丢下的操作
{
$(this).css('background','white');
},
});
$('#box').draggable({});
});
Droppable
3.Resizable(调整大小)组件 不依赖其他组件
$(function(){
$('#rr').resizable({
minWidth:,//最小宽200 类似的是maxWidth
minHeight:,//最小高200 类似的是maxHeight
edge:,//接触面
onStartResize:function(e){
console.log('开始改变大小时！');
},
onResize:function(e){
console.log('调整期间触发！');
},
onStopResize:function(e){
console.log('停止调整大小触发！');
},
});
});
Resizable
4.Tooltip(提示框)组件 不依赖其他组件
$(function(){
$('#box').tooltip({
content:'<strong>这里是内容提示框</strong>',//提示内容可以加html
position:'top',//消息框位置
trackMouse:true,//跟随鼠标
showEvent:'click',//触发提示框 (单机)
hideEvent:'dblclick',//隐藏提示框(双击)
onShow:function(e){
alert('显示的时候触发');
console.log($('#box').tooltip('tip'));
},
onHide:function(e){
alert('隐藏的时候触发');
},
onUpdate:function(e){
alert('内容改变时');
},
});
$('#box').click(function()
{
$(this).tooltip('update','改变了!');//更新提示框内容
});
console.log($('#box').tooltip('options'));
$('#box').tooltip('show');//默认显示
$('#box').tooltip('hide');//默认隐藏
});
Tooltip
5.LinkButton(按钮)组件
$(function () {
$.fn.linkbutton.defaults.iconCls='icon-add';//设置默认图标
$('#box').linkbutton({
// id:'pox',//改变id
// disabled:true,
// toggle:true,//是否被选中
// selected:true,//默认选中
group: 'sex',
text:'点我呀',//改变文本内容
// iconCls:'icon-add',//修改图标样式
// iconAlign:'right',//修改图标位置
});
$('#pox').linkbutton({
// id:'pox',//改变id
// disabled:true,
// toggle:true,//是否被选中
group: 'sex',
});
console.log($('#box').linkbutton('options'));
$('#box').linkbutton('disable');//禁用
$('#box').linkbutton('enable');//启动
$('#box').linkbutton('select');//选中
$('#box').linkbutton('unselect');//选中
});
LinkButton
6.ProgressBar(进度条)组件
$(function () {
$.fn.progressbar.defaults.value = ;
$('#box').progressbar({
width: ,
height: ,
value: ,
text: '{value}%',//一般不去改它的默认值
onChange: function (newValue, oldValue) {
console.log('新：' + newValue + '，旧：' + oldValue);
},
});
setTimeout(function(){//定时器
$('#box').progressbar('setValue','');
},);
setInterval(function(){
$('#box').progressbar('setValue',$('#box').progressbar('getValue')+);
}, );//每个1秒执行一次，getValue获取当前进度 s实现动画效果
console.log($('#box').progressbar('options'));
});
ProgressBar
7.Panel(面板)组件
$(function () {
$('#box').panel({
title: "面板",
// id:'pox',
width: ,
height: ,
iconCls: 'icon-search',//查找图标
left: ,
top: ,
cls: 'a',//定一个CSS类ID到面板
headerCls: 'b',//定一个CSS类ID到面板头部
bodyCls: 'c',//定一个CSS类ID到面板body部分
fit: true,//自适应父容器
border: false,//显示边框
doSize: true,//重置大小和重新布局
noheader: true,//创建标题
content: '修改',//修改内容
collapsible: true,//是否添加折叠按钮
minimizable: true,//最小化按钮 display:none
maximizable: true,//最大化按钮
closable: true,//关闭按钮
tools: [{
iconCls: 'icon-help',
handler: function () {
alert('help');
},//查询图标点击功能
}, {
iconCls: 'icon-add',
handler: function () {
alert('add');
},//添加图标点击功能
}],
collapsed: true,//默认折叠
minimized: true,//默认最小化
maximized: true,//默认最大化
href: null,//远程文本
loadingMessage: '加载中...',
extractor: function (data) {
alert(data);
},
onBeforeLoad: function () {
alert('远程加载之前触发!');
return false;//取消远程加载
},
onLoad: function () {
alert('远程加载之后触发!');
},
onBeforeOpen: function () {
alert('打开之前触发!');
return false;//取消打开 页面还是会显示
},
onOpen: function () {
alert('打开之后触发!');
},
onBeforeClose: function () {
alert('关闭之前触发!');
return false;//取消关闭
},
onClose: function () {
alert('关闭之后触发!');
},
onBeforeDestroy: function () {
alert('销毁之前触发!');
return false;//取消销毁
},
onDestroy: function () {
alert('销毁之后触发!');
},
onBeforeCollapse: function () {
alert('折叠之前触发!');
return false;//取消折叠
},
onCollapse: function () {
alert('折叠之后触发!');
},
onBeforeExpand: function () {
alert('展开之前触发!');
return false;//取消展开
},
onExpand: function () {
alert('展开之后触发!');
},
onMaximize: function () {
alert('窗口最大化后触发!');
},
onMinimize: function () {
alert('窗口最小化后触发!');
},
onRestore: function () {
alert('窗口还原时触发!');
},
onResize: function (width, height) {
alert(width + '|' + height);
},
});
//方法
// $('#box').panel('panel').css('position','absolute');
//$('#box').panel('destrpy');
$('#box').panel('resize', {//改变大小
'width': ,
'hegiht': ,
});
$('#box').panel('move', {//移动
'left': ,
'top': ,
});
$('#box').panel('setTitle','标题');
$('#box').panel('refresh');//刷新
$('#box').panel('maximize');//最大化
$('#box').panel('restore');//恢复
$('#box').panel('minimize');//最小化
});
Panel
8.Tabs(选项卡)组件 此组件依赖于Panel组件和LinkButton组件
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<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.min.js"></script>
<script type="text/javascript" src="JS/Demo.JS"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
</head> <body>
<div id="box" style="width:500px;height: 600px;">
<div title="table1">table1</div>
<div id="table2" title="table2">table2</div>
<div title="table3">table3</div>
</div> </body> </html>
Tabs Html
$(function () {
$('#box').tabs({
width: ,
height: ,//优先级比Css高
plain: false,//设置背景
fit: true,//全屏布满
border:false,//边框
tabWidth: ,//tab宽度
scrollIncrement: ,//tab滚动像素值
scrollDuration:,//单位ms 每次滚动动画持续的时间
tools: [{
iconCls: 'icon-add',
handler: function () {
alert('add');
},
}, {}],//添加图标和图标点击动作
toolPosition: 'left',//工具位置
tabPosition: 'right',//tab位置
onSelect: function (title, index) {
alert(title + '|' + index);
},
onUnSelect: function (title, index) {
alert(title + '|' + index);
},
onBeforeClose: function (title, index) {
alert(title + '|' + index);
},
onClose: function (title, index) {
alert(title + '|' + index);
},
onContextMenu: function (e, title, index) {
alert(e.type + '|' + title + '|' + index);
},
});
//新增选项卡
$('#box').tabs('add', {
id: 'bbbb',
content: 'table4',
title: '新选项卡',//标题
href: 'content.html',//连接文本
iconCls: 'icon-add',//图标
closable: true,//关闭按钮
});
$('#box').tabs('close', );//关闭第一个选项卡
$('#box').tabs('select', );//显示第二个选项卡
console.log($('#box').tabs('exists', ));//是否存在选项卡
$('#box').tabs('update', {
tab: $('#table2'),//选取第二标签ID 进行操作
options: {
title: '修改标题',
},
});
$('#box').tabs('disableTab', );//Tab不可用
});
Tabs
9.Accordion(分类)组件 此组件依赖于Panel组件
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<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.min.js"></script>
<script type="text/javascript" src="JS/Demo.JS"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
</head> <body>
<div id="box" style="width:500px;height: 600px;">
<div title="accrodion1">accrodion1</div>
<div id="accrodion2" title="accrodion2">accrodion2</div>
<div title="accrodion3">accrodion3</div>
</div> </body> </html>
accrodion html
$(function () {
$('#box').accordion({
width: ,
height: ,
fit: false,
border: true,
animate: false,//动画效果
multiple: true,//同时打开多个分类
selected: ,//选中第几个分类卡
onSelect: function (title, index) {
alert(title + '|' + index);
},
onUnselect: function (title, index) {
alert(title + '|' + index);
},
});
$('#box').accordion('add',{//panel的属性和方法都可以使用
title:'新面板',
closable:true,
});
});
accrodion
10.Layout(布局)组件 依赖于Panel组件和resizable组件
页面架构
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<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.min.js"></script>
<script type="text/javascript" src="JS/Demo.JS"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
</head> <body>
<div id="box" class="easyui-layout" style="width:600px;height:400px;">
<div data-options="region:'north',title:'上北'" style="height:100px;"></div>
<div data-options="region:'south',title:'下南'" style="height:100px;"></div>
<div data-options="region:'west',title:'左西'" style="width:100px;"></div>
<div data-options="region:'east',title:'右东'" style="width:100px;"></div>
<div data-options="region:'center',title:'中间'" "></div>
</div>
</body> </html>
layout
11.Message消息组件
$(function () {
$.messager.alert('警告框', '这是一个提示!', 'info', function () {
alert('!!!');//标题 内容 图标 回调函数
});
$.messager.confirm('确认框', '你真的要删除吗？', function (flag) {
if (flag) {
alert('删除成功');
}
});
$.messager.prompt('提示框', '请输入你的名字', function (content) {
if (content) {
alert(content);
}
});
$.messager.progress({ //进度条
title: '执行中',
msg: '努力上传中',
interval: ,//进度更新时间
});
$.messager.show({
title: '我的消息',
msg: '消息在五秒后关闭',
timeout: ,
});
});
Message
12.pagination分页组件
$(function(){
$('#box').pagination({
total:,
pageSize:,
pageNumber:,
pageList:[,],
buttons:[{
iconCls:'icon-add',
},'-',{
iconCls:'icon-edit',
}],
onSelectPage:function(pageNumber,pageSize)
{
},
showPageList:false,
});
});
pagination
13.Calender日历组件 (date box与之相似 不占空间 具体到时间可以用DateTime Box)
$('#box').calendar({
width:,
height:,
fit:false,
border:true,
firstDay:,
onSelect:function(date)
{
alert(date);
},
});
calendar
14.DataGrid数据表格
$(function () {
$('#box').datagrid({
width: ,
// url://远程请求
title: '用户列表',
iconCls: 'icon-search',
columns: [[
{ // field: 'user',//数据库字段
// title: "账号",//字段名
width: ,
},
// {
// // field: 'mail',//数据库字段
// // title: '邮件',//字段名
// width: 200,
// },
]],
pagination: true,
pageSize: ,
pageList: [, , ],
});
});
DataGrid
Easy UI 入门的更多相关文章
- ASP.MVC EASY UI 入门之 —— Tree & ComboTree
1.常规的EASY UI的tree和comboTree代码基本是官方的DEMO都有的,虽然很简单,但是还是要实践的做一次,才能更清晰的了解和使用它!先上效果图 因为用的是code first,所以数据 ...
- Struts2 easy UI插件
一.easy UI是类似于jQuery UI的插件库,它提供了丰富的各种常用插件:tree.datagrid... tree插件: 语法:$(selector).tree([settings]); 常 ...
- Easy UI常用插件使用
一.easy UI是类似于jQuery UI的插件库,它提供了丰富的各种常用插件:tree.datagrid... tree插件: 语法:$(selector).tree([settings]); 常 ...
- easy ui插件
简介: easy UI是类似于jQuery UI的插件库 注意:多脚本同时使用时,注意脚本冲突问题. 常用插件: 1.tree插件(tree插件实现动态树形菜单) 2.datagrid插件(datag ...
- easy ui 框架
Easy UI 准备工作(搭建) 1.在WebRoot 的目录下创建js 文件夹,在文件夹中倒入一下两个包 Jquery.easyui.min.js jquery.min.js 2.在WebRoot ...
- 解决easy ui 1.4datebox控件不能清空的问题
用easy ui遇到这个问题,在网上找到了解决方案,不过是1.3.6版本的.现提供1.4版本的修改的具体位置和代码. 我们用的是这个 修改位置:12739行,添加代码: , { text: funct ...
- easy ui 1.4的NumberBox，失去焦点后不能再次输入小数点
这也是1.4版本的bug,现在1.4.1也发布了,经验证,该问题在新版本中已经解决了 在网上找到的解决办法,地址:http://www.jeasyui.com/forum/index.php?topi ...
- 关于ExtJS、JQuery UI和easy UI的选择问题
转自百度知道. 问:做企业级应用,比如***管理系统,不需要华丽的特效,只希望简单,风格统一.能用到的只有messagebox.tree.grid大概这几个,其他特效不要,忘大神根据自己的见解以及我这 ...
- Jquery easy UI 上中下三栏布局 分类： ASP.NET 2015-02-06 09:19 368人阅读 评论(0) 收藏
效果图: 源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
随机推荐
- web代码审计题
@题名:code i春秋https://www.ichunqiu.com/battalion wp:https://www.ichunqiu.com/writeup/detail/4139
- windows下的句柄利用
什么是句柄 维基百科:在程序设计中,句柄(handle)是Windows操作系统用来标识被应用程序所建立或使用的对象的整数.其本质相当于带有引用计数的智能指针.当一个应用程序要引用其他系统(如数据库. ...
- 如何查看Nginx安装了哪些模块
当你要编译安装Nginx时,在你执行完./configure之后,会在这个目录生成一个objs这个目录. 进入objs目录下,会看到有一个ngx_modules.c这个文件,这个文件里都是要编译进Ng ...
- python 输出对齐
几种不同类型的输出对齐总结: 先看效果: 采用.format打印输出时,可以定义输出字符串的输出宽度,在 ':' 后传入一个整数, 可以保证该域至少有这么多的宽度. 用于美化表格时很有用. >& ...
- web - code/flash
trace 来源: 1. http://traces.cs.umass.edu/index.php/Storage/Storage 源代码: 1.sourceforge 2.github.github ...
- xtrabackup备份失败（error writing file 'UNOPENED'）
xtrabackup备份失败 解决了,是因为limit open files值设置太小了 (3)修改资源限制参数 vi /etc/security/limits.conf nproc:用户创建进程数限 ...
- P1417 烹调方案（思维+01背包）
(点击此处查看原题) 题意 有n种食材,每种食材有三个属性,ai,bi和ci,如果在t时刻完成第i样食材则得到ai-t*bi的美味指数,用第i件食材做饭要花去ci的时间.问在T时间内,什么样的烹调方案 ...
- spring 的工厂类
spring 的工厂类 1. 工厂类 BeanFactory 和 ApplicationContext 的区别. ApplicationContext 是 BeanFactory 的子接口,提供了比父 ...
- 啥叫K8s？啥是k8s？
•Kubernetes介绍 1.背景介绍 云计算飞速发展 - IaaS - PaaS - SaaS Docker技术突飞猛进 - 一次构建,到处运行 - 容器的快速轻量 - 完整的生态环境 2.什么是 ...
- 27-Perl 进程管理
1.Perl 进程管理Perl 中你可以以不同的方法来创建进程.本教程将讨论一些进程的管理方法. 你可以使用特殊变量 $$ 或 $PROCESS_ID 来获取进程 ID. %ENV 哈希存放了父进程, ...