一.引入jquery,jquery_easyui，jquery_easyui css,图标css,本地语言
二.通过学习jquery_easyui 手册，用简单的js代码来实现(按钮、表单、表格、弹出框)等各种效果
1.Parser（解析器）
2.Draggable（拖动）
<body>
<div id="box" style="width:400px; height:200px; background:orange">
<span id="pox">内容文本</span>
</div>
</body>
<script type="text/javascript">
$(function(){
$.fn.draggable.defaults.cursor = 'text';//所有的鼠标拖动样式为text;
$("#box").draggable({
//revert:true, //如果设置为true，在拖动停止时元素将返回起始位置。
//cursor:"text",//拖动时的CSS指针样式。
//handle:"#pox",//设置那块地方能拖动(开始拖动的句柄)。
//disabled:false,//true不能拖动,false能拖动。
//edge:10,//上下左右有10px的位置不能实现拖动
//axis:"v",//‘v’只能垂直拖动,'h'水平拖动,默认为null,垂直水平都可以。
//delay:500,//定义元素在多少毫秒后开始移动。（该属性自1.4.2版开始可用）
//proxy:"clone",
//deltaX:50,//配合proxy,拖动时,鼠标固定在元素左边50px的地方。
//deltaY:50,
/*proxy: function(source){ //拖动时在代理对象内获取元素的html内容
var p = $('<div style="border:1px solid #ccc;width:80px"></div>');
p.html($(source).html()).appendTo('body');
return p;
},*/
/*proxy: function(source){ //创建一个简单的代理对象。
var p = $('<div style="border:1px solid #ccc;width:400px;height:200px"></div>');
p.appendTo('body');
return p;
}*/
/*onBeforeDrag:function(e){
$("#box").css("background","green");//在拖动之前触发，返回false将取消拖动。
},
onStartDrag:function(e){
$("#box").css("background","black");//在目标对象开始被拖动时触发。
},
onDrag:function(e){
$("#box").css("background","#CF3");//在拖动过程中触发，当不能再拖动时返回false。
},
*/
/* onStopDrag:function(e){
//$("#box").css("background","red");//在拖动停止时触发。
console.log($("#box").draggable('proxy'));//在触发是才可以调用,如果代理属性被设置则返回该拖动代理元素。
},*/
});
//$("#box").draggable('disable');//禁止拖动,另起draggable方法
//$("#box").draggable('able');//恢复拖动,另起draggable方法
//console.log($("#box").draggable('options'));//可以输出属性,类似var_dump($a),另起draggable方法;
})
</script>
</html>
3.Droppable（放置）：data-options="accept:'#box,#pox'"设置接收#box,#pox元素进来
<body>
<div id="dd" style="width:600px; height:400px; background-color:#000"></div>
<div id="box" style="width:100px; height:100px; background:#ccc">
<span id="pox">内容文本</span>
</div>
</body>
<script type="text/javascript">
$(function(){
$.fn.droppable.defaults.disabled = true;//设置页面都禁止放置,#dd里面单独设置disable:false后，可以放置,只在$("#dd").droppable({})里面可以
$("#dd").droppable({
accept:'#box',//确定哪些可拖拽元素将被接受。
disabled:false,//如果为true，则禁止放置。
onDragEnter:function(e,source){//在被拖拽元素到放置区内的时候触发，source参数表示被拖拽的DOM元素。
$(this).css('background','blue');
//$("#box").css('background','orange');
//alert('enter');
},
onDragOver:function(e,source){//在被拖拽元素经过放置区的时候触发，source参数表示被拖拽的DOM元素。
$(this).css('background','green');
//$("#box").css('background','red');
//alert('over');
},
//onDragEnter值触发一次,onDragOver在不停拖动的过程中不停被触发
onDragLeave:function(e,source){//在被拖拽元素离开放置区的时候触发，source参数表示被拖拽的DOM元素。
$(this).css('background','red');
},
onDrop:function(e,source){//onDrop是把元素放入到放置区，松开鼠标左键后触发的事件
$(this).css('background','yellow');
},
})
})
</script>
</html>
4.Resizable（调整大小）
<body>
<div id="dd" style="width:100px; height:100px; border:3px solid #C39"></div>
</body>
<script type="text/javascript">
$(function(){
$("#dd").resizable({
//disabled:true,
//handles:'e,s,se',
//minwidth:200,
//minheight:200,
//maxwidth:400,
//maxheigth:400,
//edge:50,//拖拉的接触面
onStartResize:function(e){//在开始改变大小的时候触发。
$("#dd").css('background','yellow');
},
onResize:function(e){//在调整大小期间触发。当返回false的时候，不会实际改变DOM元素大小。
$("#dd").css('background','blue');
return false;
},
//onStartResize只触发一次,onResize不停的被触发
onStopResize:function(e){//在停止改变大小的时候触发。
$("#dd").css('background','black');
},
});
console.log($('#dd').resizable('options'));//打印默认值
})
</script>
</html>
5.Tooltip（提示框）
<body style="margin:200px">
<a href="###" id="box">Hover Me</a>
</body>
<script type="text/javascript">
$(function(){
$('#box').tooltip({
content:'<strong>这里可以输入提示内容</strong>',
position:'top',//提示框在哪里出现
trackMouse:true,//提示框跟随鼠标
//showEvent:'click',//单击显示
//hideEvent:'dblclick',//双击隐藏
showDelay:1000,//延时多少秒显示提示框。
hideDelay:1000,//延时多少秒隐藏提示框。
/*onShow:function(e){
alert('显示的时候触发');
},*/
/*onHide:function(e){
alert('隐藏的时候触发');
},*/
/*4.onUpdate:function(content){
alert('内容改变了为:'+content);
},*/
/*onPosition:function(left,top){
alert('内容改变了');
},*/
onPosition:function(left,top){
alert('内容改变了');
},
});
/*4.$("#box").click(function(){
$(this).tooltip('update','改变了！');
})*/
})
</script>
</html>