easyUI入门--1
来源:互联网 发布:天府商品交易软件 编辑:程序博客网 时间:2024/06/05 17:32
easyUI笔记
easyUI介绍
什么是 jQuery EasyUI
jQuery EasyUI 框架提供了创建网页所需的一切,帮助您轻松建立站点。
easyui 是一个基于 jQuery 的框架,集成了各种用户界面插件。
easyui 提供建立现代化的具有交互性的 javascript 应用的必要的功能。
使用 easyui,您不需要写太多 javascript 代码,一般情况下您只需要使用一些 html 标记来定义用户界面。
HTML 网页的完整框架。
easyui 节省了开发产品的时间和规模。
easyui 非常简单,但是功能非常强大。
easyUI快速入门
easyui-resizable展示可变拖动变化效果
导入easyUI
复制easyUI到项目静态资源下即可
引入easyUI
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</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="../easyui/jquery.easyui.min.js"></script></head>
使用 easyui-resizable
<div style="width: 100px;height: 200px;background-color: red;" class="easyui-resizable"></div>
为resizable控件添加属性-html
data-options="maxWidth:400,maxHeight:400"
js中设置resizable中的属性
$("div").resizable({ maxWidth: 400, maxHeight: 400, minWidth: 10, minHeight: 10, edge: 30});
设置easyUI的事件
$("div").resizable({ onStartResize: function() { $("span").html("开始改变大小了"); }, onStopResize: function() { $("span").html("停止改变大小了"); }, onResize: function() { $("span").html("大小在一直改变"); }});
设置easyUI的方法
$("#bt1").click(function(){ $("div").resizable("disable"); }); $("#bt2").click(function(){ $("div").resizable("enable");});
快速入门总结:
- 对于easyUI中两个属性以,隔开
- 大小不写单位
- 键值对以 key:value形式进行书写
- 事件调用该class类型,执行事件
LinkButton
效果演示
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">添加</a><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">删除</a><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">提交</a><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-no'">删除</a><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'">取消</a><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cut'">剪切</a><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'">保存</a><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">搜索</a><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help'">帮助</a>
js中设置按钮
$("#a").linkbutton({ iconCls: 'icon-search'});
禁用和启用按钮(调用按钮中方法)
$("#a1").click(function(){ $("#a").linkbutton("disable");});$("#a1").click(function(){ $("#a").linkbutton("enable");});
ProgressBar 进度条
效果展示
<div id="p" class="easyui-progressbar" data-options="value:60" style="width:400px;"></div>
js代码操作
$("#p").progressbar({ width:700, height:23, value: 60, text: "正在下载中"});
动态修改进度
var progress = 0;var interval;$(function() { //点击下载按钮开始下载 $("#download").click(function() { //启动定时任务 interval = window.setInterval(download, 50); }); function download() { //设置progressbar的value值 $("#p").progressbar("setValue", progress++) } $("#p").progressbar({ onChange: function(value) { //当value值==100时,还原 if(value == 100) { $("#p").progressbar("setValue", 0) window.clearInterval(interval); alert("下载成功"); } } });})
Panel(面板)
效果演示
<div style="height:150px;width:300px;" title="标题文件" class="easyui-panel">文本内容</div>
panel属性展示
$(function() { $("#myId").panel({ width: 300, height: 200, title: '我是标题', collapsible: true, minimizable: true, maximizable: true, closable: true, href: 'http://www.baidu.com', loadingMessage: '伦家正在努力加载' }); //用程序设置id为myId的DOM节点的定位方式为绝对定位--如果不设置,没有效果 $("#myId").panel("panel").css("position", "absolute");});
自定义效果演示
$("#myId2").panel({ width: 300, height: 200, title: '我是标题', href: 'http://www.baidu.com', loadingMessage: '伦家正在努力加载', tools: [{ iconCls: 'icon-add', handler: function() { alert("添加"); } }, { iconCls: 'icon-remove', handler: function() { alert("移除"); } }, { iconCls: 'icon-edit', handler: function() { alert("编辑"); } }] });
Window效果
效果演示
<div id="win"></div>$('#win').window({ width:600, height:400, modal:true });
window方法测试
$("#hcenter").click(function() { $("#win").window("hcenter"); }); $("#vcenter").click(function() { $("#win").window("vcenter"); }); $("#center").click(function() { $("#win").window("center"); }); $("#open").click(function() { $("#win").window("open"); }); $("#close").click(function() { $("#win").window("close");});
Messager(消息窗口)
消息窗口提供了不同的消息框风格,包含alert(警告框), confirm(确认框), prompt(提示框), progress(进度框)等。所有的消息框都是异步的。用户可以在交互消息之后使用回调函数去处理结果或做一些自己需要处理的事情。
- 效果演示
警告框
$.messager.alert
确认输入框
$.messager.confirm
输入框
$.messager.prompt
广告框
$.messager.show
进度条框
基本效果展示
$.messager.progress({ text: "正在下载", interval: 2000, title: "下载框"});
获取进度条对象 bar
var progressbar = $.messager.progress("bar");
案例:当进度到100时,让进度条框消失
$("#bt1").click(function() { $.messager.progress({ interval: 1000, title: "下载框" }); var p = $.messager.progress("bar"); p.progressbar({ onChange: function(value) { if(value == 100) { $.messager.progress("close"); } } });});
Dialog(对话框窗口)
js效果演示
$("#dd").dialog({ title: "员工管理系统", collapsible: true, minimizable: true, content: "我是管理内容", maximizable: true, toolbar: [{ text: "添加", iconCls: "icon-add", handler: function() { $("#dd").append("哈哈哈"); } }, { text: "删除", iconCls: "icon-remove", handler: function() { alert("删除"); } }]});
Tabs(选项卡)
选项卡效果演示
<div id="tt" class="easyui-tabs" style="width:500px;height:250px;"> <div title="Tab1" style="padding:20px;display:none;"> tab1 </div> <div title="Tab2" style="overflow:auto;padding:20px;display:none;"> tab2 </div> <div title="Tab3" style="padding:20px;display:none;"> tab3 </div></div>
监听选项卡选中
$('#tt').tabs({ border:false, onSelect:function(title){ alert(title+' is selected'); } });
添加操作按钮
$('#tt').tabs({ tools: [{ iconCls: 'icon-add', handler: function() { alert('添加') } }, { iconCls: 'icon-save', handler: function() { alert('保存') } }]});
选中某个选项卡
$("#bt1").click(function() { $("#tt").tabs("select",1);});
Layout(布局) 重点
accordion
阅读全文
0 0
- easyUI入门--1
- EasyUI 入门教材1:如何引入EasyUI
- EasyUi入门
- EasyUI入门
- easyui入门
- EasyUI入门
- easyUI入门
- easyui 入门
- easyUI入门
- easyui--easyui的快速入门
- EasyUI入门---如何导入easyUI
- easyui入门指南—01 easyui入门
- easyUI的布局入门
- easyui 入门指南
- easyui入门(一)
- easyui入门(二)
- easyui入门(三)
- 1.1 easyui入门
- activit 单元测试
- 第十一篇:Bug管理系统UML2.0建模实例(三)
- Hello Kotlin
- jquery选择器
- Servlet 什么时候用页面重定向,什么时候用请求转发。
- easyUI入门--1
- Roman to Integer 罗马数字转化成整数
- vs编译器cl使用
- ARP
- C语言实现身份证查询系统
- 做人,赢在格局 ,输在计较!
- 关于HTTP协议
- 虚拟内存(占坑)
- Android开发之获取手机通讯录