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中路径问题的解决方案
Oct 09 PHP
PHP简洁函数小结
Aug 12 PHP
php读取txt文件组成SQL并插入数据库的代码(原创自Zjmainstay)
Jul 31 PHP
php实现自动获取生成文章主题关键词功能的深入分析
Jun 03 PHP
php调用Google translate_tts api实现代码
Aug 07 PHP
PHP中实现接收多个name相同但Value不相同表单数据实例
Feb 03 PHP
php的crc32函数使用时需要注意的问题(不然就是坑)
Apr 21 PHP
PHP批量生成图片缩略图的方法
Jun 18 PHP
PHP数组函数array_multisort()用法实例分析
Apr 02 PHP
PHP框架Laravel插件Pagination实现自定义分页
Apr 22 PHP
浅谈PHP中pack、unpack的详细用法
Mar 12 PHP
laravel-admin 实现在指定的相册下添加照片
Oct 21 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 数组的合并、拆分、区别取值函数集
2010/02/15 PHP
PHP中的生成XML文件的4种方法分享
2012/10/06 PHP
php使用imagick模块实现图片缩放、裁剪、压缩示例
2014/04/17 PHP
php开发工具有哪五款
2015/11/09 PHP
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
2013/12/19 Javascript
jQuery学习笔记之2个小技巧
2015/01/19 Javascript
简单的jQuery banner图片轮播实例代码
2016/03/04 Javascript
解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题
2017/03/09 Javascript
Vue DevTools调试工具的使用
2017/12/05 Javascript
vue-cli3搭建项目的详细步骤
2018/12/05 Javascript
JS实现获取数组中最大值或最小值功能示例
2019/03/02 Javascript
layUI实现三级导航菜单效果
2019/07/26 Javascript
Node.js实现批量下载图片简单操作示例
2020/01/18 Javascript
node.js制作一个简单的登录拦截器
2020/02/10 Javascript
js实现登录时记住密码的方法分析
2020/04/05 Javascript
vue-cli —— 如何局部修改Element样式
2020/10/22 Javascript
[11:27]《一刀刀一天》之DOTA全时刻20:TI4总奖金突破920W TS赛事分析
2014/06/18 DOTA
[02:49:21]2019完美盛典全程录像
2019/12/08 DOTA
使用python编写批量卸载手机中安装的android应用脚本
2014/07/21 Python
Python argv用法详解
2016/01/08 Python
Python3.6基于正则实现的计算器示例【无优化简单注释版】
2018/06/14 Python
python启动应用程序和终止应用程序的方法
2019/06/28 Python
Python3从零开始搭建一个语音对话机器人的实现
2019/08/23 Python
Django多数据库配置及逆向生成model教程
2020/03/28 Python
Html5实现如何在两个div元素之间拖放图像
2013/03/29 HTML / CSS
豆腐の盛田屋官网:日本自然派的豆乳面膜、肥皂、化妆水、乳液等
2016/10/08 全球购物
Moss Bros官网:英国排名第一的西装店
2020/02/26 全球购物
类成员函数的重载、覆盖和隐藏区别
2016/01/27 面试题
车间工艺员岗位职责
2013/12/09 职场文书
2014年五四青年节演讲稿范文
2014/04/22 职场文书
2015社区六五普法工作总结
2015/04/21 职场文书
我是特种兵观后感
2015/06/11 职场文书
幼儿园园长新年寄语
2015/08/17 职场文书
护理心得体会范文
2016/01/22 职场文书
看古人们是如何赞美老师的?
2019/07/08 职场文书
Python中rapidjson参数校验实现
2021/07/25 Python