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


Posted in PHP onJanuary 18, 2019

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

v层:(还没实现功能的)

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <title>添加</title>
</head>
<body>
  <form action="{:url('save')}" method="post">
    <label for="name">教室名称:</label><input type="text" name="name" id="name" />
    <label for="teacher">teacher:</label>
    <select name="teacher_id" id="teacher">
    {volist name="teacher" id="teacher"}
      <option value="{$teacher->getData('id')}">{$teacher->getData('name')}</option>
    {/volist}
    </select>
    <button type="button" id="submit">submit</button>
  </form>
</body>
<script src="/static/js/jquery2.1.js"></script>
<script src="/static/js/dialog/layer.js"></script>
<script src="/static/js/dialog.js"></script>
<script>
  $(document).ready(function () {
   $('#submit').click(function () {
     return dialog.success(1,"jajaj");
   })
  })
</script>
</html>

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

其中

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

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

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

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 : ['确定'],
    });
  },
}

先让他跑起来:

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

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

第一部分完成

thinkphp  中使用:

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

function show($status,$message,$data=array()){
  $reuslt = array(
    'status' => $status,
    'message' => $message,
    'data' => $data,
  );
  exit(json_encode($reuslt));
}

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

比如:

if(1==0){
   return show(0,'成功',jump_url);
}else{
    return show(1,'错误',jump_url);
}

是这样子的,朋友。

利用这个做 ajax 请求:

定义:

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

希望本文所述对大家基于ThinkPHP框架的PHP程序设计有所帮助。

PHP 相关文章推荐
PHP5/ZendEngine2的改进
Oct 09 PHP
CURL的学习和应用(附多线程实现)
Jun 03 PHP
php获取$_POST同名参数数组的实现介绍
Jun 30 PHP
php解析xml提示Invalid byte 1 of 1-byte UTF-8 sequence错误的处理方法
Nov 14 PHP
php 批量替换html标签的实例代码
Nov 26 PHP
php中的filesystem文件系统函数介绍及使用示例
Feb 13 PHP
destoon实现首页显示供应、企业、资讯条数的方法
Jul 15 PHP
PHP中Fatal error session_start()错误解决步骤
Aug 05 PHP
PHP的serialize序列化数据以及JSON格式化数据分析
Oct 10 PHP
Thinkphp3.2.3整合phpqrcode生成带logo的二维码
Jul 21 PHP
PHP分享图片的生成方法
Apr 25 PHP
php7中停止php-fpm服务的方法详解
May 09 PHP
PHP内置函数生成随机数实例
Jan 18 #PHP
Laravel框架基于中间件实现禁止未登录用户访问页面功能示例
Jan 17 #PHP
Laravel框架基于ajax实现二级联动功能示例
Jan 17 #PHP
Laravel框架基于ajax和layer.js实现无刷新删除功能示例
Jan 17 #PHP
strpos() 函数判断字符串中是否包含某字符串的方法
Jan 16 #PHP
Laravel框架实现的批量删除功能示例
Jan 16 #PHP
Laravel框架实现的rbac权限管理操作示例
Jan 16 #PHP
You might like
php学习之数据类型之间的转换介绍
2011/06/09 PHP
PHP获取文件的MD5值并判断是否被修改的例子
2014/06/19 PHP
Yii隐藏URL中index.php的方法
2016/07/12 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
在IE中调用javascript打开Excel的代码(downmoon原作)
2007/04/02 Javascript
JavaScript 创建对象和构造类实现代码
2009/07/30 Javascript
JavaScript中window、doucment、body的解释
2013/08/14 Javascript
jqeury-easyui-layout问题解决方法
2014/03/24 Javascript
jQuery实现渐变下拉菜单的简单方法
2015/03/11 Javascript
jQuery的基本概念与高级编程
2015/05/14 Javascript
Bootstrap教程JS插件弹出框学习笔记分享
2016/05/17 Javascript
jQuery特殊符号转义的实现
2016/11/30 Javascript
vue2.0多条件搜索组件使用详解
2020/03/26 Javascript
Bootstrap响应式导航由768px变成992px的实现代码
2017/06/15 Javascript
利用HBuilder打包前端开发webapp为apk的方法
2017/11/13 Javascript
JS运动改变单物体透明度的方法分析
2018/01/23 Javascript
vue-cli 首屏加载优化问题
2018/11/06 Javascript
实现高性能javascript的注意事项
2019/05/27 Javascript
nodejs中各种加密算法的实现详解
2019/07/11 NodeJs
JS Array.from()将伪数组转换成数组的方法示例
2020/03/23 Javascript
python 爬取微信文章
2016/01/30 Python
用Python做一个久坐提醒小助手的示例代码
2020/02/10 Python
浅谈如何使用python抓取网页中的动态数据实现
2020/08/17 Python
python 监控logcat关键字功能
2020/09/04 Python
如何利用Python 进行边缘检测
2020/10/14 Python
丝绸和人造花卉、植物和树木:Nearly Natural
2018/11/28 全球购物
介绍一下Ruby的多线程处理
2013/02/01 面试题
工程建设实施方案
2014/03/14 职场文书
合作协议书范本
2014/04/17 职场文书
企业职业病防治方案
2014/05/29 职场文书
个人查摆问题自查报告
2014/10/16 职场文书
机关干部作风建设剖析材料
2014/10/23 职场文书
2014年卫生保健工作总结
2014/12/08 职场文书
2015年科研工作总结范文
2015/05/13 职场文书
新年寄语2016
2015/08/17 职场文书
mysql数据库隔离级别详解
2022/06/16 MySQL