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 相关文章推荐
用Socket发送电子邮件
Oct 09 PHP
提升PHP速度全攻略
Oct 09 PHP
php mysql索引问题
Jun 07 PHP
PHP生成网页快照 不用COM不用扩展.
Feb 11 PHP
PHP三元运算符的结合性介绍
Jan 10 PHP
解析php中curl_multi的应用
Jul 17 PHP
PHP通过反射动态加载第三方类和获得类源码的实例
Nov 27 PHP
PHP文件上传问题汇总(文件大小检测、大文件上传处理)
Dec 24 PHP
thinkphp修改配置进入默认首页的方法
Feb 07 PHP
PHP实现批量清空删除指定文件夹所有内容的方法
May 30 PHP
PHP基于关联数组20行代码搞定约瑟夫问题示例
Nov 07 PHP
php7 错误处理机制修改实例分析
May 25 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
laravel安装zend opcache加速器教程
2015/03/02 PHP
javascript 命名空间以提高代码重用性
2008/11/13 Javascript
JavaScript接口实现代码 (Interfaces In JavaScript)
2010/06/11 Javascript
JavaScript将XML转成JSON的方法
2015/03/12 Javascript
使用jspdf生成pdf报表
2015/07/03 Javascript
js 弹出对话框(遮罩)透明,可拖动的简单实例
2016/07/11 Javascript
NodeJS整合银联网关支付(DEMO)
2016/11/09 NodeJs
JS类的定义与使用方法深入探索
2016/11/26 Javascript
jQuery开源组件BootstrapValidator使用详解
2017/06/29 jQuery
JS获取子、父、兄节点方法小结
2017/08/14 Javascript
VueJS事件处理器v-on的使用方法
2017/09/27 Javascript
dropload.js插件下拉刷新和上拉加载使用详解
2017/10/20 Javascript
vue 1.x 交互实现仿百度下拉列表示例
2017/10/21 Javascript
Angular开发实践之服务端渲染
2018/03/29 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
2018/08/20 Javascript
小程序开发基础之view视图容器
2018/08/21 Javascript
基于vue实现简易打地鼠游戏
2020/08/21 Javascript
[01:11:32]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
深度定制Python的Flask框架开发环境的一些技巧总结
2016/07/12 Python
用Python写脚本,实现完全备份和增量备份的示例
2018/04/29 Python
如何基于python生成list的所有的子集
2019/11/11 Python
Python FFT合成波形的实例
2019/12/04 Python
Python TKinter如何自动关闭主窗口
2020/02/26 Python
pandas创建DataFrame的7种方法小结
2020/06/14 Python
工地安全检查制度
2014/02/04 职场文书
后勤主管岗位职责
2014/03/01 职场文书
开门红主持词
2014/04/02 职场文书
领导干部学习“三严三实”思想汇报
2014/09/15 职场文书
政府领导干部个人对照检查材料思想汇报
2014/09/24 职场文书
鼋头渚导游词
2015/02/05 职场文书
保送生自荐信范文
2015/03/26 职场文书
2016年十一促销广告语
2016/01/28 职场文书
详解Python牛顿插值法
2021/05/11 Python
SQLServer中JSON文档型数据的查询问题解决
2021/06/27 SQL Server
Go 通过结构struct实现接口interface的问题
2021/10/05 Golang
MySQL 分区表中分区键为什么必须是主键的一部分
2022/03/17 MySQL