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 ...
随机推荐
- kubeadm快速安装k8s
1.安装net-tools [root@localhost ~]# yum install -y net-tools 2.关闭firewalld [root@localhost ~]# systemc ...
- 修改umask后apache报错：because search permissions are missing on a component of the path,
0.修改umask后apache报错:because search permissions are missing on a component of the path, 1.ls -lrth ./h ...
- AGC040 Task C. Neither AB Nor BA
Observations 对一个长为 $2N$ 的序列重复下述操作:取走两个相邻且不同的元素.最后能把序列取空的充要条件是序列中不存在出现超过 $N$ 次的元素. 证明:必要性,取 $N$ 次最多能取 ...
- 洛谷 P1266 速度限制 题解
题面 这道题可以理解为是一个分层图,也可以理解为是二维的SPFA dis[i][j]表示到达i这个点速度为j的最短路 然后跑已经死了的SPFA就好了: #include <bits/stdc++ ...
- linux lkm rootkit常用技巧
简介 搜集一下linux lkm rootkit中常用的一些技巧 1.劫持系统调用 遍历地址空间 根据系统调用中的一些导出函数,比如sys_close的地址来寻找 unsigned long ** g ...
- 一篇文章理解JS继承——原型链/构造函数/组合/原型式/寄生式/寄生组合/Class extends
说实在话,以前我只需要知道"寄生组合继承"是最好的,有个祖传代码模版用就行.最近因为一些事情,几个星期以来一直心心念念想整理出来.本文以<JavaScript高级程序设计&g ...
- 大数据学习（2）- export、source(附带多个服务器一起启动服务器)
linux环境中, A=1这种命名方式,变量作用域为当前线程 export命令出的变量作用域是当前进程及其子进程. 可以通过source 脚本,将脚本里面的变量放在当前进程中 附带自己写的tomcat ...
- python读写增删修改ini配置文件
一,百度百科 .ini 文件是Initialization File的缩写,即初始化文件,是windows的系统配置文件所采用的存储格式,统管windows的各项配置,一般用户就用windows提供的 ...
- dev listbox使用
private void Init() { List<Funcation> data = new List<Funcation>(); data.Add(new Funcati ...
- 搭建自己的框架WedeNet（五）
WedeNet2018.WedeWcfServices-WCF服务层:结构如下: 就是定义了服务契约接口和服务类,以OrderServices为例,如下: using System; using Sy ...