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 相关文章推荐
用php将任何格式视频转为flv的代码
Sep 03 PHP
php使用websocket示例详解
Mar 12 PHP
Yii框架form表单用法实例
Dec 04 PHP
PHP检测用户语言的方法
Jun 15 PHP
PHP读取配置文件类实例(可读取ini,yaml,xml等)
Jul 28 PHP
Symfony核心类概述
Mar 17 PHP
Yii控制器中filter过滤器用法分析
Jul 15 PHP
php中strtotime函数性能分析
Nov 20 PHP
Yii框架数据模型的验证规则rules()被执行的方法
Dec 02 PHP
PHP二维数组实现去除重复项的方法【保留各个键值】
Dec 21 PHP
php计数排序算法的实现代码(附四个实例代码)
Mar 31 PHP
PHP实现递归的三种方法
Jul 04 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
3种平台下安装php4经验点滴
2006/10/09 PHP
PHP与MySQL开发中页面出现乱码的一种解决方法
2007/07/29 PHP
解析mysql 表中的碎片产生原因以及清理
2013/06/22 PHP
php cookie中点号(句号)自动转为下划线问题
2014/10/21 PHP
PHP面向对象精要总结
2014/11/07 PHP
thinkphp实现上一篇与下一篇的方法
2014/12/08 PHP
php+ajax制作无刷新留言板
2015/10/27 PHP
php实现mysql数据库连接操作及用户管理
2015/11/08 PHP
php日志函数error_log用法实例分析
2019/09/23 PHP
TP3.2框架分页相关实现方法分析
2020/06/03 PHP
Ext面向对象开发实践(续)
2008/11/18 Javascript
用JS判别浏览器种类以及IE版本的几种方法小结
2011/08/02 Javascript
简单实例处理url特殊符号&amp;处理(2种方法)
2013/04/02 Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
2016/04/18 Javascript
Node.js如何自动审核团队的代码
2016/07/20 Javascript
Vue.js常用指令汇总(v-if、v-for等)
2016/11/03 Javascript
js正则表达式验证密码强度【推荐】
2017/03/03 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
2019/01/23 Javascript
生产制造追溯系统之在线打印功能
2019/06/03 Javascript
vue+element加入签名效果(移动端可用)
2019/06/17 Javascript
jQuery实现的分页插件完整示例
2020/05/26 jQuery
vue将data恢复到初始状态 &amp;&amp; 重新渲染组件实例
2020/09/04 Javascript
Vue+Vant 图片上传加显示的案例
2020/11/03 Javascript
Python contextlib模块使用示例
2015/02/18 Python
Python中的下划线详解
2015/06/24 Python
python代码 输入数字使其反向输出的方法
2018/12/22 Python
centos 安装Python3 及对应的pip教程详解
2019/06/28 Python
通过python实现弹窗广告拦截过程详解
2019/07/10 Python
Python魔术方法专题
2020/06/19 Python
如何用PyPy让你的Python代码运行得更快
2020/12/02 Python
雪花秀美国官方网站:韩国著名草本护肤化妆品品牌
2016/10/19 全球购物
美国顶级品牌男士大码服装店:DXL
2017/08/30 全球购物
客服端调用EJB对象的几个基本步骤
2012/01/15 面试题
自我介绍演讲稿范文
2014/08/21 职场文书
2014年班组建设工作总结
2014/12/01 职场文书
公司财务人员岗位职责
2015/04/14 职场文书