初次接触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.简单的界面的展示——

初次接触easyUI的记录贴

其中【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="title" style="background:#ccc;">title</div>

</div>

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

<div id="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：当目标对象停止拖动时**。

初次接触easyUI的记录贴

相关推荐