easy ui 框架

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");});