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 ...
随机推荐
- 逆序对 -- cogs1438 火柴排队
题目链接:http://cogs.pro:8081/cogs/problem/problem.php?pid=vimiQkqjU [题目描述] 样例一输入: 4 2 3 1 4 3 2 1 4 样例二 ...
- Java中简单测试FastDFS的文件上传
pom.xml文件内容如下: <dependencies> <!-- fastdfs --> <dependency> <groupId>org.cso ...
- C语言Ⅰ博客作业10
这个作业属于那个课程 C语言程序设计II 这个作业要求在哪里 https://edu.cnblogs.com/campus/zswxy/CST2019-3/homework/10097 我在这个课程的 ...
- [转帖]AMD第三代锐龙处理器首发评测：i9已无力招架
AMD第三代锐龙处理器首发评测:i9已无力招架 Intel 从之前的 CCX 到了 CCD 增加了缓存 改善了 ccx 之间的延迟. https://baijiahao.baidu.com/s?id= ...
- RabbitMQ 的安装配置
环境:Ubuntu16 linux系统,ERlang语言的源码包 :otp_src_22.0.tar.gz,rabbitMQ安装包:rabbitmq-server-generic-unix-3.7.1 ...
- Elastic Search的聚合搜索
就是使用ES提供的aggs语法结果,使用DSL搜索的语法,实现聚合数据的统计,查询.ES中,如果新增document数据的时候,对应的index和type不存在,则自动创建. 1 准备源数据 PUT ...
- T100——按xls格式批量导入数据
弹出File Browser窗口 PRIVATE FUNCTION cxrt020_open_file() DEFINE l_dir LIKE type_t.chr500 DEFINE r_succe ...
- T100——P处理程序显示进度明细
IF g_bgjob <> "Y" THEN #更新交易對像信用餘額檔: LET ls_value = cl_getmsg('axm ...
- 怎样解决在执行 vue init 时提示 "vue : 无法加载文件" 的问题?
注意, 以下操作需要 以管理员身份 在 PowerShell 中进行, 不能是 CMD / Git Bash 等. 1. 以 管理员身份 运行 PowerShell 2. 执行 get-Executi ...
- mybatis 主键自增异常
org.springframework.jdbc.UncategorizedSQLException: Error getting generated key or setting result t ...