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

转载于:https://www.cnblogs.com/sufi/p/5572355.html