zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    Django REST framework
    容器平台自动化CI/CD流水线实操
    VUE--webpack
    vue动态路由匹配
    VUE学习---vue基础与vue-router
    MYSQL-创建测试数据
    MYSQL-主键、外键
    MYSQL-数据库、表、数据操作
    MySQL-添加环境变量 及MySQL服务启停
    MYSQL-命令行
  • 原文地址:https://www.cnblogs.com/jingfengling/p/6089964.html
Copyright © 2011-2022 走看看