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 ...
随机推荐
- realpython教程之机器学习之Windows下的环境配置
不得不说,realPython的教程确实写的仔细,准确,有逻辑.果然高质量的学习材料还是更利于学的. 反观我们学校,似乎就有些急功近利了.连Python语言基础都没学,就直接讲深度学习.完全不符合学习 ...
- PHP读取TXT中文乱码的解决方法
//$fname文件名称 if ($fname = $_FILES['nickname']['tmp_name']) { //file_get_contents() 函数把整个文件读入一个字符串中. ...
- My life
突然想到的好笑的: 1. 世界上一共有10种人,一种是男人,另一种是女人 2. 吐槽一个网站的域名: 你这网站域名取得,跟色情网站似的 明知这是一场意外,你要不要来,明知这是一场重伤害,你会不会来: ...
- vue项目自动构建工具1.0，支持多页面构建
该工具适用于超多项目开发,每个项目不用都安装依赖,所有依赖都安装在ffk命令项目中,对于多分支拉到本地进行开发,亦有益处.对于多页面开发,也是相当便利,不用手动撸entry和plugin. git: ...
- Redis二进制反转算法分析
在 redis 源码中 dictScan 算法中用到了用到了非常经典的二进制反转算法,该算法对二进制的反转高效而实用,同时对于理解位运算也有非常大的帮助.先呈现源码: /* Function to r ...
- Hadoop_常用命令（hdfs上）
Hadoop_常用命令(hdfs上) hadoop fs所有文件系统都可以使用 hdfs dfs仅针对于hdfs文件系统 - 1 - 查看所有目录(文件夹)及文件 hdfs dfs -ls / - ...
- mysql5.6 Centos6.6安装
1.检查防火墙 是否关闭service iptables status service iptables stopchkconfig iptables off 2. SELINUXvim /etc/s ...
- Centos yum 安装 rabbitmq-server
安装rabbitmq-server yum install -y rabbitmq-server 开启后台管理 rabbitmq-plugins enable rabbitmq_managemen ...
- Elastic Search中filter的理解
在ES中,请求一旦发起,ES服务器是按照请求参数的顺序依次执行具体的搜索过滤逻辑的.如何定制请求体中的搜索过滤条件顺序,是一个经验活.类似query(指search中的query请求参数),也是搜索的 ...
- MYSQL---触发器简单了解
触发器 trigger 1.触发器是指事先为某张表绑定一段代码,当表中某些内容发生改变(增insert.删delete.改update)时,系统自动触发绑定的那段代码并执行.比如 一旦订单表里插入新订 ...