LayUi面框架事件和方法.ppt

事件和方法,LayUi页面开发基础,三、综合应用,二、加载模块,一、LayUi的底层方法,目录,一、LayUi的底层方法,在之前的内容中，我们着重看到了LayUi为我们提供的显示效果，接下来我们简单了解一下组件运行时底层API对于操作的支持。1.加载模块方法：layui.use(mods,callback)Layui的内置模块并非默认就加载的，他必须在你执行该方法后才会加载。它的参数跟上述的define方法完全一样。另外请注意，mods里面必须是一个合法的模块名，不能包含目录。实例（导航）：layui.use(element,function()varelement=layui.element;element.on(nav(demo),function(elem)layer.msg(elem.text();););,一、LayUi的底层方法,1.主要应用模块layui中提供了针对页面操作的各种模块，以支撑页面组件的常见操作。,二、加载模块,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()varlayer=layui.layer,$=layui.jquery;绑定事件);加载获得了两个模块对象layer，$；,二、加载模块,1.按钮事件绑定事件：获取元素，调用模块操作绑定点击事件；HTML弹出弹出JSlayui.use(layer,jquery,function()$(#btn1).click(function()layer.msg(hello););$(#btn2).click(function()layer.alert(hello);););,二、加载模块,2.动态表格动态表格就是说表格的数据是在页面响应以后动态加载的数据；与前面的操作类似，这样的加载也需要特定模块的支持table；由于数据动态加载，所以HTML就仅需要最基本的标记；加载table模块：layui.use(table,function()vartable=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用于封装显示数据；publicclassGridprivateIntegercode;privateStringmsg;privateIntegercount;privateListdata;,二、加载模块,3.导航操作导航中包含了大量的超链接，这些链接中有的将导致引发跳转，有的则是展开；考虑到目前的应用形式，菜单的跳转页不会是简单刷新，一般都是使用异步的方式局部刷新；导航事件：课程管理学生管理新生登记学籍管理,二、加载模块,3.导航操作导航事件：预设元素属性：我们通过自定义元素属性来作为元素的功能参数，他们一般配置在容器外层；element定义导航事件；定位导航：filter为t1的nav；layui.use(element,layer,function()varelement=layui.element,layer=layui.layer;element.on(nav(t1),function(elem)layer.msg(elem.text();););,二、加载模块,4.选项卡操作众所周知选项卡通常都是伴随着用户操作不断改变，所以选项卡的定义分为静态和动态两种：静态的我们前面已经介绍过了，使用标记直接定义其中的每项卡片；动态的定义则是在tab中动态的创建卡片（最外层仍然是）；tab的主要操作依赖element：element.on(filter,callback)：用于元素的一些常见组件的基本事件监听；element.tabAdd(filter,options)：用于新增一个Tab选项；element.tabDelete(filter,layid)：用于删除指定的Tab选项；element.tabChange(filter,layid);用于外部切换到指定的Tab项上；,二、加载模块,4.选项卡操作动态添加选项卡：HTML选项卡可以没有卡片，但title和content必须完整；,二、加载模块,4.选项卡操作动态添加选项卡：操作按钮：addjavascript；layui.use(element,layer,function()varelement=layui.element,layer=layui.layer;$(#addbtn).click(function()/单独引入的jqueryvarid=Math.random();/随机数唯一element.tabAdd(tab1,title:tab+id,content:+id+,id:id+id);element.tabChange(tab1,id+id);););,三、综合应用,1.导航基本应用“后台管理”页面实现点击导航在右侧“工作空间”添加选项卡，显示数据页面；页面布局：,三、综合应用,1.导航基本应用基本处理过程；菜单点击：element.on(nav(filter),function(elem);选项卡增加：element.tabAdd(filter,);加载页面：layui中对于页面的加载缺少明确的定义，或者说没有给出任何倾向性的建议；在此我们使用jquery的ajax方法完成异步加载；$.post(url,function(data);注意：layui中嵌入了jQuery核心，可以调用，也可以自行引入jquery；,三、综合应用,1.导航基本应用前面罗列了导航打开页面涉及的操作，考虑到各对象的结构，它们实际的操作过程是这样的；导航点击异步获取响应创建Tab用响应填充数据要求：导航要给异步访问提供请求地址；导航要给Tab提供Id标识；教材管理,三、综合应用,1.导航基本应用操作过程：导航点击异步获取响应创建Tab用响应填充结构要求：在操作中，我们要确保响应数据获取以后再去创建Tab；错误：$.post(url,function(data);element.tabAdd(desktop,);正确：$.post(url,function(data)element.tabAdd(desktop,););,三、综合应用,1.导航基本应用完整实现：需加载页面：从控制器（showBook.do）跳转的一个静态表格；书名作者出版社价格$book.bookName$book.author$book.press$book.price,三、综合应用,1.导航基本应用完整实现：菜单事件；layui.use(element,jquery,function()varelement=layui.element,$=layui.jquery;/引用内嵌jqueryelement.on(nav(menu),function()varmenuitem=$(this);vardid=menuitem.attr(data-id);varurl=menuitem.attr(data-url);$.post(url,function(data)element.tabAdd(desktop,title:hello,content:data,id:did);element.tabChange(desktop,did););););,三、综合应用,2.异步加载页面的注意事项需要注意的是，被异步加载的页面无需也不能再自行加载环境；尤其是layui.js；单页开发测试，可以环境集中定义，集成发布时应取消；解决方案；（1）环境统一书写段，不科学但实用；（2）页面响应时，筛选关键信息，过滤无用文本；functionpageFilter(data)varstart=data.indexOf();returndata.substring(start,end);,三、综合应用,3.弹窗页面熟悉了前述的异步加载，下面我们考虑将异步页面加载到弹出的窗口中；弹窗模块：layer方法：layer.open(窗口选项)返回窗口Indexlayer.close(窗口Index)关闭指定窗口选项：title:标题文本窗口标题栏content:String|DOM填充内容可以是文本或dom对象btn:按钮组定义按钮名数组maxWidth:number宽度，默认360；,三、综合应用,3.弹窗页面导航页：登录退了；简单示例：触发弹窗显示“登录页”；,三、综合应用,3.弹窗页面登录页；用户名密码登录撤销,三、综合应用,3.弹窗页面异步加载页面的原则是，要保证响应完成再去完成渲染（填充）；菜单事件：varwinIndex;layui.use(element,layer,jquery,function()varelement=layui.element,layer=layui.layer,$=layui.jquery;element.on(nav(tree1),function(elem)varurl=test1/login.jsp;$.post(url,function(txt)winIndex=layer.open(title:登录,content:txt,btn:,maxWidth:430);););,三、综合应用,4.表单提交基于之前的经验我们发现，使用LayUi完成页面设计，很难在使用同步的方式完成提交操作；表单的提交按钮：layui中提交按钮具有特定定义；lay-submit指定提交按钮；lay-filter定义标识用于选中登录撤销,三、综合应用,4.表单提交提交操作；异步提交（jquery）；$.post(url,参数,function(txt);参数：json格式的请求参数，表单提交事件：form.on(submit(login),function(data);data.field将表单域的name和value信息序列化成