Easy UI 准备工作(搭建)
1.在WebRoot 的目录下创建js 文件夹,在文件夹中倒入一下两个包
Jquery.easyui.min.js
jquery.min.js
2.在WebRoot 的目录下复制整个themes 主题包
3.引入css文件,不限顺序(注意路径:本jsp 是放在webroot 下的html文件夹的根目录)
<link rel="stylesheet" href="../themes/default/easyui.css" type="text/css"></link>
<link rel="stylesheet" href="../themes/icon.css" type="text/css"></link>
4.引入js 文件,有顺序限制
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../js/easyui-lang-zh_CN.js"></script>
5.例子及注意事项
easyui 获取值得方法(与一般的jquery不一样)
取: $("#div的id").组件名("getValue")
设值: $("#div的id").组件名("setValue","设值的值")
组件:
一.layout 布局
布局属性:fit:trrue 使用父容器的大小
区域面板属性: href:
问题
(直接加载图片的话,是加载图片的内容)
解决方案:换成倒入一个 html 页面(期内容就是一张图片),用了绝对路径,相对路径有问题,图片显示不出来
easyui 方法调用
二.Accordion 分类器
容器属性:
selected: 默认选中 0,如果不想显示被选中,则把selected 的值设置为不在范围内
面板属性:(添加移除面板)
三.LinkButton 按钮
Class=’easyui-linkbutton’
属性 group,toggle 同用 实现 radio 的效果
四.tab 选项卡
1.可以判断选项卡是否已经打开,否则添加
2.在选项卡中引入另外一个页面,用href 属性
五.Pagination 分页栏
六 form 表单
1.validatebox 验证框
提示框默认红色,可以在validatebox.css 这把颜色修改
自定义规则(必须为中文)
2.combobx 组合框(可以写,有点类似搜索)
classs=''easy-combobox"
3.datebox 日期输入框
日期获取并且装换为指定的格式
4.numberspinner 数字微调器( 回车键触发事件)
<script type="text/javascript"> $("#ss").keyup(function(xxx){ //将浏览器产生的事件对象设置到myevent变量中 var myevent = xxx; //获取按键的unicode编码 var code = myevent.keyCode; //如果按钮是回车 if(code == 13){ //获取数字微调的当前值,因为$(this)此时表示的是文本框,直接获取value属性值即可 var value = $(this).val(); //将当前值设置到span标签中 $("#num").text(value).css("color","red"); } }); </script>
5.slider 滑动条(场景:身高)
比较少用,如果想快速改变数量,可用这个代替numberspinner
6.progressBar 进度条
<script type="text/javascript"> //获取1到9之间的随机数,包含1和9 function getNum(){ return Math.floor(Math.random()*9)+1; } </script>
//定拉按钮,同时提供单击事件
$("#startID").click(function(){
//每隔300毫秒执行update方法
timeID = window.setInterval("update()",300);
//按钮失效
$(this).attr("disabled","disabled");
});
7.window 窗口
8.dialog 对话框
主要是toolbar,buttons,毕业设计管理员端用的就是dialog
9.Messager 消息框
警告框,确认框,输入框,显示框
10.tree 树
如果是静态树,在页面加载是折叠的话,$("#数id").tree("collapseAll")
若是动态树,折叠需要在json 里添加属性 "state":"close"
一.jQueryEasyUI Messager基本使用
jQuery.messager.alert("提示", "请完成必填项","warning");
参考: http://www.cnblogs.com/libingql/archive/2011/07/17/2109020.html
//定拉按钮,同时提供单击事件$("#startID").click(function(){//每隔300毫秒执行update方法timeID = window.setInterval("update()",300);//按钮失效$(this).attr("disabled","disabled");});