当前位置：首页 > CMS教程 > Thinkphp > 列表

thinkPHP框架中layer.js的封装与使用方法示例

发布:smiling　来源: PHP粉丝网 　添加日期：2021-11-04 10:42:43　浏览: 评论：0　

这篇文章主要介绍了thinkPHP框架中layer.js的封装与使用方法,结合实例形式分析了thinkPHP中调用layer.js的具体操作技巧与注意事项,需要的朋友可以参考下

本文实例讲述了thinkPHP框架中layer.js的封装与使用方法。分享给大家供大家参考，具体如下：

v层：（还没实现功能的）

  1. <!DOCTYPE html> 
  2. <html lang="zh-cn"> 
  3. <head> 
  4.   <meta charset="UTF-8"> 
  5.   <title>添加</title> 
  6. </head> 
  7. <body> 
  8.   <form action="{:url('save')}" method="post"> 
  9.     <label for="name">教室名称:</label><input type="text" name="name" id="name" /> 
  10.     <label for="teacher">teacher:</label> 
  11.     <select name="teacher_id" id="teacher"> 
  12.     {volist name="teacher" id="teacher"} 
  13.       <option value="{$teacher->getData('id')}">{$teacher->getData('name')}</option> 
  14.     {/volist} 
  15.     </select> 
  16.     <button type="button" id="submit">submit</button> 
  17.   </form> 
  18. </body> 
  19. <script src="/static/js/jquery2.1.js"></script> 
  20. <script src="/static/js/dialog/layer.js"></script> 
  21. <script src="/static/js/dialog.js"></script> 
  22. <script> 
  23.   $(document).ready(function () { 
  24.    $('#submit').click(function () { 
  25.      return dialog.success(1,"jajaj"); 
  26.    }) 
  27.   }) 
  28. </script> 
  29. </html> 

首先把弹窗必要的硬件  src 进去：

其中

<script src="/static/js/dialog/layer.js"></script>

这个是一个文件包， dialog 文件包里面装了layer的部件，比如图片之类的我们引用layer这个文件就好了

<script src="/static/js/dialog.js"></script>

dialog.js是自定义的

  1. var dialog = { 
  2.   // 错误弹出层 
  3.   error: function(message) { 
  4.     layer.open({ 
  5.       content:message, 
  6.       icon:2, 
  7.       title : '错误提示', 
  8.     }); 
  9.   }, 
  10.   //成功弹出层 
  11.   success : function(message,url) { 
  12.     layer.open({ 
  13.       content : message, 
  14.       icon : 1, 
  15.       yes : function(){ 
  16.         location.href=url; 
  17.       }, 
  18.     }); 
  19.   }, 
  20.   // 确认弹出层 
  21.   confirm : function(message, url) { 
  22.     layer.open({ 
  23.       content : message, 
  24.       icon:3, 
  25.       btn : ['是','否'], 
  26.       yes : function(){ 
  27.         location.href=url; 
  28.       }, 
  29.     }); 
  30.   }, 
  31.   //无需跳转到指定页面的确认弹出层 
  32.   toconfirm : function(message) { 
  33.     layer.open({ 
  34.       content : message, 
  35.       icon:3, 
  36.       btn : ['确定'], 
  37.     }); 
  38.   }, 
  39. } 

先让他跑起来：

  1. <script> 
  2.   $(document).ready(function () { 
  3.    $('#submit').click(function () { 
  4.      return dialog.success(1,"jajaj"); 
  5.    }) 
  6.   }) 
  7. </script> 

第一部分完成

thinkphp  中使用：

在thinkphp   Common创建一个function.php 公用函数，在里面定义：

  1. function show($status,$message,$data=array()){ 
  2.   $reuslt = array( 
  3.     'status' => $status, 
  4.     'message' => $message, 
  5.     'data' => $data, 
  6.   ); 
  7.   exit(json_encode($reuslt)); 
  8. } 

在controller层直接引用这个函数就可以了

比如：

  1. if(1==0){ 
  2.    return show(0,'成功',jump_url); 
  3. }else{ 
  4.     return show(1,'错误',jump_url); 
  5. } 

是这样子的，朋友。

利用这个做 ajax 请求：

定义：

  1. var url = admin.php?cosndf&.... 
  2. var jump_url ;www.baidu.com //跳转的页面 
  3. $.post(url,postData,function(result){ 
  4.     if(result.status == 1) { 
  5.       //成功 
  6.       return dialog.success(result.message,jump_url); 
  7.     }else if(result.status == 0) { 
  8.       // 失败 
  9.       return dialog.error(result.message); 
  10.     } 
  11.   },"JSON");  //这个不要漏了

Tags: thinkPHP封装 layer js

分享到：

相关文章

推荐文章

热门文章

最新评论文章