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 相关文章推荐
基于mysql的bbs设计(三)
Oct 09 PHP
在字符串中把网址改成超级链接
Oct 09 PHP
PHP 解决utf-8和gb2312编码转换问题
Mar 18 PHP
php下保存远程图片到本地的办法
Aug 08 PHP
基于MySQL到MongoDB简易对照表的详解
Jun 03 PHP
PHP采用XML-RPC构造Web Service实例教程
Jul 16 PHP
PHP计算百度地图两个GPS坐标之间距离的方法
Jan 09 PHP
PHP Curl模拟登录微信公众平台、新浪微博实例代码
Jan 28 PHP
redirect_uri参数错误的解决方法(必看)
Feb 16 PHP
php unlink()函数使用教程
Jul 12 PHP
PHP中命名空间的使用例子
Mar 22 PHP
php swoole多进程/多线程用法示例【基于php7nts版】
Aug 12 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
Views rows style模板重写代码
2011/05/16 PHP
PHP重定向与伪静态区别
2017/02/19 PHP
理解JavaScript的caller,callee,call,apply
2009/04/28 Javascript
锋利的jQuery 要点归纳(一) jQuery选择器
2010/03/21 Javascript
深入探寻seajs的模块化与加载方式
2015/04/14 Javascript
异步JavaScript编程中的Promise使用方法
2015/07/28 Javascript
微信小程序 Template详解及简单实例
2017/01/05 Javascript
详解Vue2.x-directive的学习笔记
2017/07/17 Javascript
详解jQuery中关于Ajax的几个常用的函数
2017/07/17 jQuery
Vue 动态设置路由参数的案例分析
2018/04/24 Javascript
swiper4实现移动端导航切换
2020/10/16 Javascript
JavaScript隐式类型转换代码实例
2020/05/29 Javascript
浅谈vue 多个变量同时赋相同值互相影响
2020/08/05 Javascript
vue 实现click同时传入事件对象和自定义参数
2021/01/29 Vue.js
python的常见命令注入威胁
2013/02/18 Python
Python 转换文本编码实现解析
2019/08/27 Python
PyTorch实现更新部分网络,其他不更新
2019/12/31 Python
Python嵌入C/C++进行开发详解
2020/06/09 Python
Net-A-Porter美国官网:全球时尚奢侈品名站
2017/02/11 全球购物
德国家具购物网站:Möbel Höffner
2019/08/26 全球购物
Stio官网:男女、儿童户外服装
2019/12/13 全球购物
高级文秘工作总结的自我评价
2013/09/28 职场文书
银行会计职员个人的自我评价
2013/09/29 职场文书
医药营销专业个人自荐信
2013/09/29 职场文书
元旦晚会邀请函
2014/02/01 职场文书
广告词串烧
2014/03/19 职场文书
小学教师评语大全
2014/04/23 职场文书
汽车维修求职信
2014/06/15 职场文书
班级学雷锋活动总结
2014/06/26 职场文书
2014年国庆节庆祝建国65周年比赛演讲稿
2014/09/21 职场文书
社区班子个人对照检查材料思想汇报
2014/10/07 职场文书
群众路线教育实践活动学习笔记内容
2014/11/06 职场文书
2015年社区民政工作总结
2015/04/21 职场文书
付款证明模板
2015/06/19 职场文书
java Nio使用NioSocket客户端与服务端交互实现方式
2021/06/15 Java/Android
零基础学java之带参数以及返回值的方法
2022/04/10 Java/Android