LayUi页面框架-事件和方法.pptx

事件和方法LayUi 页面开发基础 三、综合应用二、加载模块一、LayUi的底层方法目录 一、LayUi的底层方法在之前的内容中，我们着重看到了LayUi为我们提供的显示效果，接下来我们简单了解一下组件运行时底层API对于操作的支持。1.加载模块方法：layui.use([mods], callback)Layui的内置模块并非默认就加载的，他必须在你执行该方法后才会加载。它的参数跟上述的 define方法完全一样。 另外请注意，mods里面必须是一个合法的模块名，不能包含目录。实例（导航）：layui.use(element, function(){ var element = layui.element; element.on(nav(demo), function(elem){ layer.msg(elem.text()); });}); 一、LayUi的底层方法1.主要应用模块layui中提供了针对页面操作的各种模块，以支撑页面组件的常见操作。组件模块按钮btnjquery导航navelement选项卡tab表格table弹出层layer表单form 二、加载模块LayUi的组件涉及到页面操作的，大多需要加载相应的模块以完成对操作的响应。 选项卡和菜单依赖element模块；表单依赖form模块；弹窗依赖layer模块；表格依赖table模块；1.按钮事件在LayUi中组件事件的绑定都是通过加载模块实现的；事件涉及的模块需要在页面打开时显式加载；layui.use(模块名,回调匿名函数); 二、加载模块1.按钮事件在该例子中我们加载了两个模块layer，jquery；layer作为LayUi的弹层模块， 至今仍是 layui 的代表作，其涵盖了弹窗，提示框等众多弹层操作；LayUi也封装了jquery的内容，但并非核心，仅是用于方便DOM操作，在此我们也需要方便的DOM访问，所以加载jQuery； layui.use([layer,jquery],function(){ var layer=layui.layer, $=layui.jquery; ……绑定事件…… });加载获得了两个模块对象——layer，$； 二、加载模块1.按钮事件绑定事件：获取元素，调用模块操作绑定点击事件；HTMLbutton class=layui-btn layui-btn-normal id=btn1弹出/buttonbutton class=layui-btn layui-btn-normal id=btn2弹出/buttonJS layui.use([layer,jquery],function(){ …… $(#btn1).click(function(){ layer.msg(hello); }); $(#btn2).click(function(){ layer.alert(hello); }); }); 二、加载模块2.动态表格动态表格就是说表格的数据是在页面响应以后动态加载的数据；与前面的操作类似，这样的加载也需要特定模块的支持——table；由于数据动态加载，所以HTML就仅需要最基本的标记； table id=bookgrid/table加载table模块： layui.use(table,function(){ var table=layui.table; ……生成数据表格…… }); 二、加载模块2.动态表格生成表格； table.render({ elem:#bookgrid, height:280, url:showBookJson.do, cols:[[ {field:bookName,title:书名,width:180}, {field:author,title:作者,width:180}, {field:press,title:出版社,width:180}, {field:price,title:价格,width:180} ]] });我们可以看到，在静态表格中表头的定义已经被cols描述了；url代表数据源； 二、加载模块2.动态表格数据源格式（json）：{code:0,msg:bookgrid,count:8,data:[……]}code整型；msg字符型 count整型data数组定义对象：grid用于封装显示数据；public class Grid { private Integer code; private String msg; private Integer count; private List data; ……} 二、加载模块3.导航操作导航中包含了大量