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

  • 相关阅读:
    nginx安装
    redis安装配置
    阿里云试用总结
    Starting MySQL....The server quit without updating PID file错误解决办法
    mysql du-master配置
    Centos6.5上的iptables
    Swift 函数提前返回
    Google 推出新搜索引擎以查找数据集
    为用户设计的产品,就应该用用户熟悉的语言
    「工具」三分钟了解一款在线流程绘制工具:Whimsical
  • 原文地址:https://www.cnblogs.com/sufi/p/5572355.html
Copyright © 2020-2023  润新知