easyui--1.基础入门

1      概述

1.1  JqueryEasyUI是什么？

 基于Jquery基础之上的一堆插件.

 非常容易实现页面的常见效果tree draggable datagrid tab

 

 

1.2  目录结构

 

2      引入

  学会正确的找到对应的文件

<!--easyui的各种主题文件-->
<link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css">
<!--easyui的各种图标-->
<link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css">
<!--引入Jquery主文件-->
<script type="text/javascript"src="../easyui/jquery.min.js"></script>
<!--引入JqueryEasyUI主文件-->
<script type="text/javascript"src="../easyui/jquery.easyui.min.js"></script>

3      拖动实现

3.1  法一 html

  1.将div中增加一个class样式:class="easyui-draggable"

 <div style="width:300px;height:200px;background:pink"class="easyui-draggable"></div>

 

3.2  法二 js

  2.用js实现

<script type="">
    //$("#mydd").draggable(); 错误的方式? why? 这段代码没有得到执行的机会
    $(function(){
        $("#dd").draggable();
    });
</script>
 <!-- 方式二 -->
<div id="dd" style="width:100px;height:100px;background:green">
    <div id="title" style="background:#ccc;">title</div>
</div>
 

 

   原理:jqueryEasyUI.js 这个js文件,他会去页面上寻找判断每一个元素.看元素中的class属性是否

     是以easyui开头.那么这个js文件中的程序会将这个元素将其渲染为对应的组件.

 

4      常见概念

4.1  两种实现方式

         几乎每一种插件都有2种方式来实现.

 

4.2  属性data-options

  结论2: 今天学习的html标签多了data-options="k1:v1,k2:v2",让easyUI来识别.

          通过识别data-options中的各种属性和属性值为当前组件增加各种属性.

          class data-options

          $("#mydd").方法名({});

 

        方法名是有规律的: 

            $("#mydd").tree({k1:v1,k2:v2});

            $("#mydd").menu({});

            $("#mydd").draggable({});

      

        方法中传递的是一个对象. 对象中的属性是以键值对的形式存在,多个属性之间用,分割.

          

4.3  事件

  如何加事件

      $("#mydd").draggable({

           事件名1:function(){},

           事件名2:function(){},

      });

 

4.4  方法