Easy UI 入门

Easy UI常用于企业级开发的UI和后台开发的UI，比较重。

1.Draggable(拖动)组件不依赖其他组件

1.1加载方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="JS/Demo.JS"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
</head>
<body>
    <div id="box" style="width :400px;height: 200px;background:orange;" >
        内容部分
    </div>
</body>
</html>

div box

$(function(){

 $('#box').draggable();

});

1.2属性列表

$(function(){
 $('#box').draggable({
  revert:true,//设置为true,则拖动停止时返回起始位置
  cursor:'move',//拖动时CSS指针样式 move指针为移动的样式 text为文本样式
  disabled：true，//false无法拖动
  edge:50,//拖动容器宽度
  axis:'v',//v垂直拖动，h水平拖动
  proxy:'clone',//克隆一个元素代替拖动
  proxy:function(source){//拖动时看不见元素
   var p=$('<div style="width:400px;height:200px;border:5px;dashed:#ccc">')
   p.appendTo('body')
   return p;
  }
    });
});

属性列表

1.3事件列表

$(function(){
 $('#box').draggable({
   onBeforeDrag:function(e)
   {
   alert("拖动前触发!");
   }
   onStartDrag:function(e)
   {
   alert("拖动开始触发!");
   }
    onDrag:function(e)
   {
   alert("拖动过程触发!");
   }
   onStopDrag:function(e)
   {
   alert("拖动过程触发!");
   }
    });
});

事件列表

1.4方法列表

$('#box').draggable('disable');
$('#box').draggable('enable');
$('#box').draggable('options');
$('#box').draggable('proxy');//运行在拖到事件中可以看

方法列表

2.Droppable（放置组件）

$(function(){
$('#dd').droppable({//放置的组件
accept:'#box',//接受的组件
// disabled:true,//其拖动无效 一般不写
onDragEnter:function(e,source)
{
$(this).css('background','blue');
},
onDragOver:function(e,source)//会不停的触发 Enter只会触发一次
{
$(this).css('background','orange');
},
onDrop:function(e,source)//放入到位置区，松开鼠标左键，丢下的操作
{
$(this).css('background','white');
},

});
$('#box').draggable({});
});

Droppable

3.Resizable(调整大小)组件

猜你喜欢