easyui的学习

easyui的学习

1、官网下载插件包

https://www.jeasyui.com/

2、引入下载好的插件里面样式

因为是基于jQ实现，所以也要引入jQ，引入的是插件包里面的jQ

   <link rel="stylesheet" href="../jquery-easyui-1.10.8/demo/demo.css">
    <link rel="stylesheet" href="../jquery-easyui-1.10.8/themes/icon.css">
    <link rel="stylesheet" href="../jquery-easyui-1.10.8/themes/default/easyui.css">
 <script src="../jquery-easyui-1.10.8/jquery.min.js"></script>
    <script src="../jquery-easyui-1.10.8/jquery.easyui.min.js"></script>
    <script src="../jquery-easyui-1.10.8/jquery.easyui.mobile.js"></script>

3、HTML结构

有两种书写方式：
  1、基于HTML标签+设置类名：class=”easyui-样式名”
  2、基于编程实现

1）基于HTML标签+设置类名

设置linkbutton

<div class="easyui-linkbutton">按钮</div>

2）基于编程实现插件样式

给HTML标签设置id名，然后使用插件名方法，就可以让那个HTML标签变成插件的样子,这里使用了jQ。

<div id="btn">按钮</div>
    <script>
    $("#btn").linkbutton()
 </script>

4、设置属性的方法

同样有两种方法
1、基于HTML标签的，在行内设置data-options=””，在里面添加属性，
 data-options="iconCls:'icon-ok',width:200"
2、基于编程实现，直接在圆括号里面以对象的形式添加属性，以键值对的形式添加
  <div id="btn">按钮</div>
    <script>
    $("#btn").linkbutton({
        iconCls:'icon-ok',
         height:100         
    })
</script>

5、添加事件和方法

   要注意事件和方法是两回事，事件是由easyui提供我们的，所以我们要参照api文档去调用，下面是api文档地址
https://www.jeasyui.cn/document/index/index.html#

   方法是事件的响应，方法呢是要经过调用才能执行的，所以呢，方法一般是放在事件里面去执行的，是两回事，我们也可以通过按钮的点击事件去执行方法，做出一些响应。添加事件的方式有两种：
   1）基于HTML结构：在里面设置data-options="事件名：方法名"
   2）基于编程实现：在插件名方法的圆括号中，以键值对的形式：事件名：方法名
     也可以直接定义：onClick:function(){},
   两种方法都要注意的是事件是驼峰命名法：第二个单词首字母大写

1）基于HTML结构：在里面设置data-options="事件名：方法名"
  <div class="easyui-linkbutton" data-options="iconCls:'icon-ok',width:200,onClick:ob">按钮</div>

2)基于编程实现：在插件名方法的圆括号中，以键值对的形式：事件名：方法名
     也可以直接定义：onClick:function(){},
     div id="btn">按钮</div>
    <script>

    $("#btn").linkbutton({
        iconCls:'icon-ok',
        onClick:ob
         
    })
</script>

6、引用按钮组

  引用按钮组：是用来把需要用到的按钮放到一块，这样的话形成了一个按钮组，然后可以通过外层的div给他设置的类名来使用这个按钮组，按钮组通过tools这个属性进行添加。下面就是我们准备的一个按钮组，然后给我们准备的div.id=tt的元素绑定了一个按钮组。但是这个东西不好用，因为我们基本看不到那个按钮，所以最好还是别用了

 <div id="tt">
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">按钮</a>
    <div id="d">123456</div>
    </div>
 <script>
        $("#d").panel({ 
        //   引用按钮组
        //   tools:按钮组，使用选择器的方式引过来
          tools:"#tt",
        })
</script>

7、页面布局：panel（面板）

  这个框架是由easyui提供的，所以属性呢，也是由easyui提供，设置看api文档。
  面板作为承载其它内容的容器。这是构建其他组件的基础（比如：layout,tabs,accordion等）。它还提供了折叠、关闭、最大化、最小化和自定义行为。面板可以很容易地嵌入到web页面的任何位置。

 $("#d").panel({
          title:"你好",
          width:500,
          height:200,
          iconCls:"icon-large-shapes",
          closable:true,
          maximizable:true,
          minimizable:true,
          collapsible:true,
          titleDirection:"up",
        //   引用按钮组
        //   tools:按钮组，使用选择器的方式引过来
          tools:"#tt",

        })

8、页面布局：tabs（选项卡）

   选项卡显示一批面板。但在同一个时间只会显示一个面板。每个选项卡面板都有头标题和一些小的按钮工具菜单，包括关闭按钮和其他自定义按钮。tabs提供了一些方法，我们通过按钮的点击事件作为回应

    <button onclick="test()">exists</button>
    <button onclick="sel()">select</button>
    <button onclick="add()">add</button>
<!-- tbs选项卡
        选项卡显示一批面板。
        但在同一个时间只会显示一个面板。每个选项卡面板都有头标题和一些小的按钮工具菜单，包括关闭按钮和其他自定义按钮。

 -->
    <!-- 基于html的样式 -->
    <div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
        <div title="用户信息" data-options="closable:true,collapsible:true,iconCls:'icon-large-clipart'">
          
            是否框事件 
            
        </div>
        <div title="班级管理">
            <div>爱神的箭</div>

        </div>
    </div>

    <br><br>
    <!-- 第二种基于编程 -->
    <div id="tab">
        <div title="用户信息">div1</div>
        <div title="班级管理"></div>
    </div>

    <script>

        $("#tab").tabs({
            // tabs主要用到的属性
            // title标题
            // icoCls图标
            // closeable：是否关闭

            height: 200,
            width: 600,
            // 设置等宽
            justified: true,

            // tabs常用方法
            // exists：表明指定的面板是否存在，'which'参数可以是选项卡面板的标题或索引。

            // select：选择执行选项卡的面板，并进行展示

            // add:添加页面，所在的选项卡页面

        })
        function test() {
            var r = $("#tt").tabs('exists', '用户信息')
            console.log(r);
        }

        function sel() {
            // 选中
            $("#tt").tabs('select', '班级管理')

        }

        function add() {
               // 添加新页面
            $("#tt").tabs('add', {
                title: "新页面",
                href: '25-表单.html'
            })

        }

    </script>

9、页面布局：accordion（分类）

  accordion也叫作折叠面板，分类空间允许用户使用多面板，但在同一时间只会显示一个。每个面板都内建支持展开和折叠功能。点击一个面板的标题将会展开或折叠面板主体。面板内容可以通过指定的'href'属性使用ajax方式读取面板内容。用户可以定义一个被默认选中的面板，如果未指定，那么第一个面板就是默认的。

 <!-- ul>li*3>a[class=easyui-linkbutton] -->
    <!-- 手风琴效果 -->
    <!-- 和tabs效果很像 -->
 
    <div id="acd">
        <div data-options="title:'系统功能'">菜单1</div>
        <div data-options="title:'用户信息'">菜单2</div>
    </div>
    <script>
        $("#acd").accordion({
            height: 200,
            width: 300,
            width: 300,          
            // fit:子元素完全填满父元素
            // fit: true,
            // 是否显示动画
            // animate:false

        })

10、页面布局：layout（布局）

   layout可以布置全局面板。有5个区域：北、南、东、西和中间。中间区域面板是必须的，边缘的面板都是可选的。每个边缘区域面板都可以通过拖拽其边框改变大小，也可以点击折叠按钮将面板折叠起来。布局可以进行嵌套，用户可以通过组合布局构建复杂的布局结构。title是标题，region表示区域，href可以引入其他的组件

 <!-- 布局插件 -->
   <!-- 是用来布局的插件 -->
   <div id="cc" class="easyui-layout" data-options="width:1450,height:1200">
    <!-- 上边的设置高度 -->
    <div data-options="title:'标题',region:'north',height:300, href:'19_Tabs标签.html'">上</div>
    <div data-options="title:'标题',region:'south',height:300">下</div>
    <div data-options="title:'标题',region:'east',width:300">右</div>
    <div data-options="title:'标题',region:'west',width:300 ,href:'16_Accordion可折叠标签_2.html'">左

      
    </div>
    <div data-options="title:'标题',region:'center',height:300">中</div>


   </div>
    <script>
   $('#cc').layout('resize', {
    width:'100%',
    height:300
})

11、表单组件：form

   form提供了各种方法来操作执行表单字段，比如：ajax提交, load, clear等等。当提交表单的时候可以调用validate方法检查表单是否有效。注意：表单是用来提交数据的，然后我们在easyui框架和vue框架里面都是将它设置为对话框、弹出层出现的；dialog，所以呢，我们要给包裹表单的外层设置id名，然后通过jQ的选择器使用dialog方法，让他变成对话框。

 <div id="fmdiv">

        <form action="#" id="frm1">
            <!-- 加圈文字 -->
            <fieldset>
                <legend>添加用户信息</legend>
                <table>
                    <tr>
                        <td>用户名：</td>
                        <td><input type="text" name="uname" id="username"></td>
                    </tr>
                    <tr>
                        <td>年龄：</td>
                        <td><input type="text" name="age" id="age"></td>
                    </tr>

                    <tr>
                        <td>性别：</td>
                        <td><input type="text" id="sex">

                        </td>
                    </tr>
                   

                </table>
            </fieldset>

        </form>
    </div>

    <script>
        // 让外层div变成dialog效果
        $("#fmdiv").dialog({
            title: "用户添加",
            buttons:'#adduserBtn',
            iconCls:'icon-man'

        })
 </script>

12、表单组件：ValidateBox（验证框）

  validatebox(验证框)的设计目的是为了验证输入的表单字段是否有效。如果用户输入了无效的值，它将会更改输入框的背景颜色，并且显示警告图标和提示信息。该验证框可以结合form(表单)插件并防止表单重复提交。

 <form action="#">
        验证框: <input type="text" name="" id="text">
    </form>
    <script>
        $('#text').validatebox({
            required: true,
            validType: 'length[5,10]',
            missingMessage:'长度满足5-10',

        });
    </script>

13、表单组件：TextBox（文本框）

     TextBox(文本框)是一个增强的输入字段组件， 它允许用户非常简单的创建一组表单。它是一个用于构建其他组合控件的基础组件，如：combo，databox、spinner等.

$("#text").textbox({
    // 要求必填
    required:true,
    // 提示信息
    prompt:"请输入",

    // 设置提示信息;
    missingMessage:"用户名必须输入",

    // 验证规则：
    // 1、如果验证规则只有一个，通过给值
    // 字符串：内置{‘url email length}
//    比如说邮箱
    // validType:'email',

    // 要求有长度
//    validType:'length[12,20]',


2、 要求有多个值，使用数组格式,必须是字符串格式
   validType:['email','length[20,30]'],



    
    })


    $("#search").textbox({
        // 文本框附加按钮显示的文本内容。
        required:true,
       
        buttonText:"搜索",

        // 设置按钮,
        buttonIcon:'icon-ok',
        // 给按钮绑定事件
        onClickButton:function(){
            //1、 拿到这个内容，然后去做一些事情、
            // console.log($(this).val());


            // 2、设置默认值
            // $("#search").textbox('setValue',"你好") 
            
            
            // 3、验证规则是否通过
            if($(this).textbox("isValid")){
                alert("搜索成功");
                
            }else{
               alert("您的格式输入错误");
            }
        }
        

    })

14、表单组件：NumberBox（数值输入框）

   数值输入框是用来限制用户只能输入数值型数据的。他可以转换一个输入的元素到其他类型，比如：数字、百分比、货币等。更多的输入类型定义依赖于'formatter'和'parser'函数。

 <form action="#">
        <label>
            <!-- 必须是文本框 -->
            年龄：<input type="text" id="nbtext">
        </label><br><br>
        <label>
            价格：<input type="text" id="price">
        </label>
    </form>
    <script>
        $("#nbtext").numberbox({
            // 默认保留3位小数
            precision: 3,
            // 设置最大值
            max: 6666,

        })

        $("#price").numberbox({
            // 追加符号
            suffix:'$'

        })

15、表单组件：DateBox（日期输入框）

   日期输入框结合了一个可编辑的文本框控件和允许用户选择日期的下拉日历面板控件。选择的日期会自动转变为一个有效的日期然后填充到文本框中。选定的日期也可以被格式化为预定格式。

 <!-- 标签：text -->
    <!-- 插件：元素.datebox -->
    <form action="#">
        <label>
            <!-- 必须是文本框 -->
            日期：<input type="text" id="date">
        </label><br><br>

    </form>
    <script>

        $("#date").datebox({
            
            required:true,

//       定义用户是否可以直接输入文本到字段中。
            editable:false,
           
        })
    </script>

16、表单组件：ComboBox（下拉列表框）

  下拉列表框显示一个可编辑文本框和下拉式列表，用户可以选择一个值或多个值。用户可以直接输入文本到列表顶部或选择一个或多个当前列表中的值。

<!-- combox：下拉列表框：select -->
    <!-- 单选钮：【下拉列表+单选】 复选框【下拉列表+多选】-->
    <!-- 基于编程的方式 -->
    <select id="sex">
        <option value="1">女</option>
        <option value="2">男</option>
    </select>

    <select id="hobby" >
        <option value="0">跳舞</option>
        <option value="1">唱歌</option>
        <option value="2">干饭</option>
    </select>
    <script>

        // 模拟单选框
        $("#sex").combobox({
            width: 50,
            height: 30,
            panelHeight:60,



        })

        // 模拟复选框

    $("#hobby").combobox({
          width: 250,
            height: 30,
            panelHeight:150,
            multiple:true,

    })

17、窗口组件：Window（窗口）

    窗口控件是一个浮动和可拖拽的面板可以用作应用程序窗口。默认情况下,窗口可以移动,调整大小和关闭。它的内容也可以被定义为静态html或要么通过ajax动态加载。

<div id="tt">
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'"></a>
    </div>
    <div id="wd" class="easyui-window">

    </div>
    <script>

        // window继承与panel，panel的属性事件都可以用

        $("#wd").window({
            title: "明月沟渠照",
            width: 600,
            height: 400,
            shadow: true,
            // 引入其他页面
            href: "index.html",
            // 灯罩，
            // modal:true,

            // 可拖拽
            // draggable:false
            tools: "#tt"

        })

18、窗口组件：Messager（消息窗口）

    消息窗口提供了不同的消息框风格，包含alert(警告框), confirm(确认框), prompt(提示框), progress(进度框)等。所有的消息框都是异步的。用户可以在交互消息之后使用回调函数去处理结果或做一些自己需要处理的事情。

<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok', onClick:test">正确</a>

<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel' , onClick:test1">错误</a>

<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save', onClick:test2 ">保存</a>


<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-print', onClick:test3">打印</a>

<body>
    <!-- 这个插件和其他的插件不一样 -->

    <!-- $.messager.show({}) -->





    <script>

        //    继承window的所有属性
        // 用户操作完毕之后的提示

        // 通过绑定事件弹出消息框

        // 测试1：消息框

        function test() {
            $.messager.show({
                title: "输入正确",
                width: 250,
                height: 200,
                showSpeed:1000,
                msg:"您输入了正确答案，请继续"

            });
        }

        // 测试2：提示框
        function test1() {
            $.messager.alert({
                title: "操作提示",
                icon:"error",//提示框图标
               msg:"您的余额已经不足", //消息提示文字
            //    fn: 在窗口关闭的时候触发该回调函数。
              fn:function(){
                console.log(456);
              }
            });
        }


        // 测试3 确认框
        function test2(){
            $.messager.confirm({
                title:"确认框",
                msg:"您确定继续执行吗",
                fn:function(r){
                    console.log(r);
                }
            }) 
        }
// 测试4：进度框
        function test3(){
            $.messager.progress({
                title:"进度框"
            })
        }
    </script>

18、Tree（树）

   树控件在web页面中一个将分层数据以树形结构进行显示。它提供用户展开、折叠、拖拽、编辑和异步加载等功能。

 <!-- 树控件在web页面中一个将分层数据以树形结构进行显示。
    它提供用户展开、折叠、拖拽、编辑和异步加载等功能。 -->
    <!-- 展示类别信息 -->
    <!-- 呈现树形结构 -->
    <ul id="classify">
        <li><span>图书</span>
            <ul>
                <li>活着</li>
                <li>朝花夕拾</li>
                <li>饥饿游戏</li>
            </ul>

        </li>
        <li>
            <span>电子产品</span>
            <ul>
                <li>
                    <span>手表</span>

                    <ul>
                        <li>
                            <span>小天才手表</span>
                             <ul>
                                <li>儿童手表</li>
                             </ul>
                        </li>
                        <li>电子手表</li>
                    </ul>



                </li>
                <li>手机</li>
                <li>电脑</li>
            </ul>

        </li>
        <li>
            <span>衣服</span>
            <!-- <ul>
                <li>大衣</li>
                <li>裤子</li>
            </ul> -->

        </li>
    </ul>




    
    <script>
        $("#classify").tree({
            // 显示动画效果
            // animate:false,
            // 节点显示复选框
            // checkbox:true,
            // 显示连接之间的虚线
            // lines:true,
        })



    </script>

    事件和方法是由easyui提供给我们的，所以呢我们要参照api文档去使用，下面是api文档的一个地址
    https://www.jeasyui.cn/document/index/index.html#
    然后要记得，事件和方法是两回事，我们可以把事件当做属性直接添加，但是方法要经过调用才能执行，所以呢，在easyui里面，方法通常是用来按钮的点击事件执行时调用的，

添加事件的方法两种：
  1、基于HTML结构的，他和属性的添加方式是一样的，都是在data-options里面添加，然后呢，它的响应函数是自己去定义一个函数方法，到时候可以直接运行,注意的是事件是驼峰命名法，第二个单词首字母大写，然后和传统的事件注册方式不一样，没有圆括号。因为添加事件的方法两种都用到了自定义函数方法ob，所以ob单独提出来

 <div class="easyui-linkbutton" data-options="iconCls:'icon-ok',width:200,onClick:ob">按钮</div>

添加事件的方法两种：
  2、基于编程的，同样的是以对象的形式把事件以键值对的形式写在插件名方法中，可以以直接写响应函数，也可以用键值对的形式指向响应的函数方法