EaeyUI

时间:2023-03-08 23:39:20
EaeyUI

基础  定义  一个轻量级的JavaScript框架

    基本用法  $(function(){代码})  相当于window.load()(当窗口加载完毕后触发)

          选择器是jQuery的根基  通过选择器选中元素之后再操作

                       调用方法要使用 function(){方法的代码}

选择器  基本选择器  id选择器  $(“#id”)

                  根据id匹配一个元素,返回单个元素组成的集合

            标签选择器  $(“标签”)

                  根据标签名匹配元素,返回匹配该标签的元素的集合

            类选择器  $(“.类名”)

                  根据class匹配元素,返回匹配该class的元素的集合

     层次选择器  根据元素之间的层次关系获取相关的元素

            子元素

            相邻元素

            兄弟元素

            后代元素

     过滤选择器  基本过滤器  :first  首个元素

                   :last  最后一个元素

                   :even  索引是偶数的元素

                   :odd  索引是奇数的元素

            内容过滤器  通过子元素和文本内容过滤

            可见性过滤器  根据元素的可见和不可见状态过滤

            属性过滤器  通过元素的属性过滤

            子元素过滤器

            表单过滤器

            表单对象属性过滤器

对象转换  Dom对象转成jQuery对象  $(Dom对象)

      jQuery对象转成Dom对象  jQuery对象是数组对象  jQuery对象[索引]

                                jQuery对象.get[索引]

配置  jQuery的js包  <script type="text/javascript" src="jquery-easyui-1.4.4/jquery.min.js"></script>

    主css文件  <link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/default/easyui.css">

    图标css文件  <link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/icon.css">

    easyui的js包  <script type="text/javascript" src="jquery-easyui-1.4.4/jquery.easyui.min.js"></script>

    本地语言的js包  <script type="text/javascript" src="jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"></script>

消息框  弹出  $.messager.alert(“aaa”,“bbb”,“error”,function(){代码} )  警告消息框显示警告窗口  

           参数:title:在头部面板显示的标题文本。

              msg:显示的消息文本。

              icon:显示的图标图像。可用值有:error(错误),question(问题),info(信息),warning(警告)。

              fn: 在窗口关闭的时候触发该回调函数。  function(){代码}

     确认  $.messager.confirm  确定返回true,取消返回false

         参数:标题

            内容

            回调函数function(r){if(r){确定之后执行的代码}}

     输入框  $.messager.prompt  确定返回输入的内容,取消无任何返回

          参数:标题

             内容

             回调函数function(val){if(val){输入不为空执行的代码}}

     消息框  $.messager.show

          参数:showType:定义将如何显示该消息。可用值有:null,slide,fade,show。默认:slide。

          showSpeed:定义窗口显示的过度时间。默认:600毫秒。  

          width:定义消息窗口的宽度。默认:250px。

          height:定义消息窗口的高度。默认:100px。

          title:在头部面板显示的标题文本。

          msg:显示的消息文本。

          style:定义消息窗体的自定义样式。

          timeout:消息窗体将在超时后自动关闭。定义为0,不自动关闭。默认:4000毫秒。      

     进度条  $.messager.progress

          options参数:title:在头部面板显示的标题文本。默认:空。

                 msg:显示的消息文本。默认:空。

                 text:在进度条上显示的文本。默认:undefined。

                 interval:每次进度更新的间隔时间。默认:300毫秒。

          method参数:bar:获取工具条

                 close:关闭工具条

窗口框 window  必须有<div id="xx"></div>

   创建  标签方式  class=“easyui-window”

             title=“标题”

             style=“样式名:样式值;……”

             data-options=“属性名:属性值,……”

       js方式  $(“#id”).window({属性名:属性值,……})

   调用  $(“#id”).window(“方法名”)

       $(“#id”).window(“方法名”,参数)

对话框窗口 dialog

   依赖于  window

        linkbutton  <a id="ID" href=“#”></a>

               text=“按钮文字”

               iconCls=“图标”  

   属性  toolber  [{text:“按钮文本”,iconCls:“图标”,handler:function(){点击发生的动作}}]

       buttons  同toolber

布局  panel  承载其他内容的容器,构建其他组件的基础

          title=“标题”

          iconCls=“图标”

          fit=“true”  true是自适应容器,默认是false

          closed=“true”  初始化时是否关闭

          href=“url”  从url读取远程数据并显示

          方法  open  打开

              close  关闭

              refresh  刷新

    layout  布局方式  局部  <div

               整体

               嵌套

         属性(区域面板)  region  定义布局面板位置,可用的值有:north, south, east, west, center

                   split  为true时用户可以通过分割栏改变面板大小

                   href  用于读取远程站点数据的URL链接

    accordion  定义方式  <div class=“easyui-accordion”><div></div></div>

           容器属性  fit=“true/false”  是否自适应

                 selected=初始时默认展开的索引

           面板属性  selected=“true”  当前面板是否展开,会覆盖容器的展开属性

           方法  add  添加面板

               remove  移除面板

    tabs  定义方式  <div class=“easyui-accordion”><div></div></div>

        容器属性  fit=“true/false”  是否自适应

              selected=初始时默认展开的索引

        面板属性  selected=“true”  当前面板是否展开,会覆盖容器的展开属性

              closable=“true”  是否显示关闭按钮

        方法  add  添加面板

            remove  移除面板

            exists  判断是否存在标签

表单  validatebox  基础的验证组件

            属性  required=“true/false”  是否必填

                validType  字段验证类型,可同时设置多个类型

    textbos  文本框

          属性  prompt=“框内提示”

              type=“text/password”  显示的类型,只有文本和密码两种

              editable=“true/false”  是否可以直接编辑

              readonly=“true/false”  是否只读

              buttonText=“按钮文本”

    numberbox  属性  min=“最小值”

                max=“最大值”

                precision=“小数点后精度”  默认是精确到个位,自动四舍五入

    datebox  属性  readonly=“true”  不能更改日历

              editable=“false”  不能手动编辑日期,只能点击日历更改

    datetimebox  日期和时间框

            属性  showSeconds=“true/false”  是否显示秒数

    combobox  下拉列表框

           属性  url=“远程加载数据的地址”

               valueField=“基础数据值名称”

               textField=“基础数据显示名称”

               editable=“true/false”  默认允许编辑

           方法  clear  清除显示内容

               reload  重新加载列表项,可以用新的url重写原始的

           事件  onSelect  选中时触发

    form  方法  submit  url  提交的地址

                  onSelect  提交前触发的回调函数,如果返回false阻止表单提交

                  siccess  成功提交后的回调函数,接收响应数据。是典型的json相应数据格式

                        {‘success’:true,‘message’:‘相应内容’}  使用eval(“(”+json+“)”) 解析json数据

            validate  返回表单内的验证组件验证是否通过

表格  datagrid  准备  <table id=""></table>  

              属性  datagrid  columns  列的定义的数组

                        url  访问远程数据的地址{“total”:总记录条数,row:[{行对象}]}

                        toolbar  工具栏

                        pagination=“true/false”  是否显示分页栏

                  列  field  列对应的属性名

                     title  表头标题

                     checkbox=“true/false”  是否是复选框列,必须同时设置field