1. 拖动
一般基础功能的实现由两种方式。
<1>通过标签形式
在div中增加一个class样式:
<div style="width:300px;height:200px;background:pink" class="easyui-draggable" data-options="handle:'#title'" ></div>
<2>用javascript实现
<script type="">
//$("#mydd").draggable(); 错误的方式? why? 这段代码没有得到执行的机会
$(function(){
$("#mydd").draggable();
});
</script>
<div style="" id="mydd"></div>
2. 分页
<1>通过标签形式
在div中增加一个class样式:
<div id="pp" class="easyui-pagination" data-options="total:2000,pageSize:10" style="background:#efefef;border:1px solid #ccc;">
</div>
<2>用javascript实现
<div id="pp" style="background:#efefef;border:1px solid #ccc;"></div>
$('#pp').pagination({
total:2000,
pageSize:10
});
3. 进度条
使用HTML标签或程序创建进度条组件。从标签创建更加简单,添加’easyui-progressbar’类ID到<div/>
标签 。
<div id="p" class="easyui-progressbar" data-options="value:60" style="width:400px;">
</div>
4. 提示框
通过标签创建提示框,给元素添加一个”easyui-tooltip”的类名,无需任何Javascript代码。
<a href="#" title="This is the tooltip message." class="easyui-tooltip">
Hover me
</a>
5. 菜单
<1> 通过标签创建菜单,给<div/>标签添加一个名为’easyui-menu’的类ID。每个菜单项都通过<div/>标签创建。我们可以添加’iconCls’属性来给菜单项定义一个图标显示到菜单项的左侧。添加’menu-sep’类ID菜单项将会生成一个菜单分割线。
<2> 在菜单被创建的时候它是隐藏和不可见的。调用’show’方法显示菜单。
<3> 使用Javascript创建菜单项并监听’onClick’事件。
6. 按钮
<!--通过标签创建-->
<a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">easyui</a>
7. 菜单按钮
依赖关系
<a href="javascript:void(0)" id="mb" class="easyui-menubutton"
data-options="menu:'#mm',iconCls:'icon-edit',plain:true,duration:100">Edit</a>
<div id="mm" style="width:150px;">
<div data-options="iconCls:'icon-undo'">Undo</div>
<div data-options="iconCls:'icon-redo'">Redo</div>
<div class="menu-sep"></div>
<div>Cut</div>
<div>Copy</div>
<div>Paste</div>
<div class="menu-sep"></div>
<div data-options="iconCls:'icon-remove'">Delete</div>
<div>Select All</div>
</div>
8. 总结
总结:<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").方法名({});
方法名是有规律的:
$("#mydd").tree({k1:v1,k2:v2});
$("#mydd").menu({});
$("#mydd").draggable({});
总结:<3>
如何加事件
$("#mydd").draggable({
事件名1:function(){},
事件名2:function(){},
});