初次接触easyUI的记录贴

【如何编写一个简易的EasyUI界面】

1.下载程序库并导入EasyUI的CSS和Javascript文件到您的页面。

2.引入文件
<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-1.7.2.min.js"></script>   
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> 

3.当您写完这些配置文件就可以进行EasyUI的编写

4.简单的界面的展示——

其中 【data-options="handle:'#title',revert:'true',axis:'v'"】
这段代码是此页面的核心
handle属性 是指定从哪里可以开始拖动
revert属性 如果设置为true，在拖动停止时元素将返回起始位置。
axis属性 此属性可以定义元素移动的方向，v上下、h左右，若没有设置此属性则随意移动

【使用Javascript实现一个简易的进度条】

<div id="pb" style="width:400px;"></div> 

$('#pb').progressbar({ 
value: 60 
}); 

【两种不同的写法实现panel的收缩（collapsible=true）】

【EasyUI中 Draggable拖动属性的设置】

如何通过html标签创建一个可拖动的元素

<div id="dr"class="easyui-draggable"data-options="handle:'#title'"style="width:100px;height:100px;">

<div id="title"style="background:#ccc;">title</div>

</div>

如何通过Javascript设置一个可拖动元素，这里的标签不设置data-options属性

<divid="dd"style="width:100px;height:100px;">

<divid="title"style="background:#ccc;">title</div>

</div>

JS代码：$('#dd').draggable({handle:'#title'});   

Draggable拥有那些事件

onBeforeDrag  在拖动之前触发，返回false将取消拖动。 
onStartDrag  在目标对象开始被拖动时触发。 
onDrag  在拖动过程中触发，当不能再拖动时返回false。 
onStopDrag  在拖动停止时触发。

【Draggable小总结】

draggable      作用：生成一个可自由拖动的块。
      属性如下:
              1)handle：选择"#id"进行拖动。
              2)disabled：当值为true时停止自由拖动。默认值为false。
              3)revert属性 如果设置为true，在拖动停止时元素将返回起始位置。
              4)axis：当拖动块移动时定义轴，可选值是'v'或者'h',当超出'v'和'h'的方位时将设置为null。
     事件如下：

      1)onBeforeDrag  在拖动之前触发，返回false将取消拖动。
              2)onStartDrag：当目标对象开始拖动时激活。
              3)onDrag：在拖动过程中激活。返回false将不能拖动它
              4)onStopDrag：当目标对象停止拖动时激活。