异步方式处理--layer弹出层封装

2017-4-10 hubo php开发

    后台功能例如登录功能有时采用form表单的action提交方式，例如:

<form enctype="multipart/form-data" method="post" action="/index.php/Admin/Login/check">

    这种形式，提交的结果会直接跳转到新的页面，用户体验也不是很好，而且后台的很多功能都类似，比如后台登录功能，确定功能，取消功能，删除功能、跳转功能等。那么这时我们可以提升改进的方法可以是采用异步方式，并使用layer弹出层插件进行封装使用。这个时候页面跳转功能、确定等功能就会变得柔和些，不显得那么突然、突兀。同时我们系统其他模块，只要有使用弹出层的地方，都可以直接使用这个文件。

     步骤：

    1.layer官网：http://layer.layui.com/

    2.下载核心文件，放在ThinkPhp框架下的PUBLIC目录下

    3.然后再对系统所常用的弹出层(错误、成功、确认、跳转)进行封装，在PUBLIC目录下编写dialog.js:

var dialog = { // 错误弹出层 error: function(message) { layer.open({ content:message, icon:2, title : '错误提示', }); }, //成功弹出层 success : function(message,url) { layer.open({ content : message, icon : 1, yes : function(){ location.href=url; }, }); }, // 确认弹出层 confirm : function(message, url) { layer.open({ content : message, icon:3, btn : ['是','否'], yes : function(){ location.href=url; }, }); }, //无需跳转到指定页面的确认弹出层 toconfirm : function(message) { layer.open({ content : message, icon:3, btn : ['确定'], }); }, }

    3.封装好之后，在模板（view）中直接引入dialog.js文件，并直接使用：

<script> dialog.error("登陆失败"); </script>

    4.效果图：

    

网站备案号：京ICP备11043289号-1 北京市公安局网络备案 海1101084571

版权所有 北京育灵童科技发展有限公司 Copyright © 2002-2024 www.elight.cn, All Rights Reserved