1.JqueryEasyUI是什么？
基于Jquery基础之上的一堆插件.
非常容易实现页面的常见效果 tree draggable datagrid tab
2.JqueryEasyUI目录结构介绍
demo:案例
locale:国际化
plugins:各种插件的实现
src:JqueryEasyUI源码
jquery.min.js jquery文件
jquery.easyui.min.js EasyUI主文件
3.正确的引入JqueryEasyUI
学会正确的找到对应的文件
<!--引入Jquery主文件-->
<script type="text/javascript" src="../easyui/jquery.min.js"></script>
<!--引入JqueryEasyUI主文件-->
<script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
<!--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">
4.拖动
1.将div中增加一个class样式: class="easyui-draggable"
<div style="width:300px;height:200px;background:pink" class="easyui-draggable"></div>
2.用js实现
<script type="">
//$("#mydd").draggable(); 错误的方式? why? 这段代码没有得到执行的机会
$(function(){
$("#mydd").draggable();
});
</script>
<div style="" id="mydd"></div>
原理: jqueryEasyUI.js 这个js文件,他会去页面上寻找判断每一个元素.看元素中的class属性是否
是以easyui开头.那么这个js文件中的程序会将这个元素将其渲染为对应的组件.
结论1:几乎每一种插件都有2种方式来实现.一种是通过纯html标签来实现 class="easyui-**"
通过html标签+js代码来实现
如果内容变化不大,不需要经常改变: html来实现
如果内容经常变化,js+html来实现
结论2: 今天学习的html标签多了data-options="k1:v1,k2:v2" ,让easyUI来识别.
通过识别data-options中的各种属性和属性值为当前组件增加各种属性.
class data-options
$("#mydd").方法名({});
方法名是有规律的:
渲染成tree：
$("#mydd").tree({k1:v1,k2:v2});
渲染成menu：
$("#mydd").menu({});
拖动：
$("#mydd").draggable({});
方法中传递的是一个对象. 对象中的属性是 以键值对的形式存在,多个属性之间用,分割.
例子（单属性）：
①以html标签完成
div id="dd" class="easyui-draggable"
data-options="handle:'#title'"
style="width:100px;height:100px;background:red">
注意：id为title的div一定要写上文本，不然页面不会展示出来到
<div id="title" style="background:#ccc;"> title</div>
</div>
②用js完成
<div id="dd" style="width:100px;height:100px;background:red">
<div id="title" style="background:#ccc;">title</div>
</div>
$(function(){
$("#dd").draggable( {handle:'#title'});
});
例子（多属性）：
①以html标签完成
<div id="dd" class="easyui-draggable"
在html的属性中，多个属性值用双引号套住，用逗号分隔
data-options=" handle:'#title',revert:true,cursor:'help'"
style="width:100px;height:100px;background:red">
<div id="title" style="background:#ccc;">title</div>
</div>
②用js完成
<div id="dd" style="width:100px;height:100px;background:red">
<div id="title" style="background:#ccc;">title</div>
</div>
$(function(){
在js中，属性是键值对，用{}括住作为一个对象传递给方法，多个属性用逗号分隔
$("#dd").draggable( {handle:'#title',revert:true,cursor:'help'});
});
结论3: 如何加事件
$("#mydd").draggable({
事件名1:function(){},
事件名2:function(){},
});
例子：
JS：
$(function(){
$("#dd").draggable({
handle:'#title',
revert:true,
cursor:'help',
onStartDrag:function(){
alert("在拖动开始触发")
}});
});
HTML：
<div id="dd" style="width:100px;height:100px;background:red">
<div id="title" style="background:#ccc;">title</div>
</div>
结论4:如何使用方法
//使用disable方法，使div不能拖动
$("#mydd").draggable("disable");
