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

所属分类: 网络编程 / PHP编程 阅读数: 1095
收藏 0 赞 0 分享

本文实例讲述了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  中使用:

在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相关内容感兴趣的读者可查看本站专题:《ThinkPHP入门教程》、《thinkPHP模板操作技巧总结》、《ThinkPHP常用方法总结》、《codeigniter入门教程》、《CI(CodeIgniter)框架进阶教程》、《Zend FrameWork框架入门教程》及《PHP模板技术总结》。

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

更多精彩内容其他人还在看

TP5(thinkPHP5)框架基于ajax与后台数据交互操作简单示例

这篇文章主要介绍了TP5(thinkPHP5)框架基于ajax与后台数据交互操作,结合实例形式分析了thinkPHP5前端基于jQuery的ajax数据提交及后台数据接收、处理相关操作技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

PHP利用Mysql锁解决高并发的方法

这篇文章主要介绍了PHP利用Mysql锁解决高并发的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

php 后端实现JWT认证方法示例

这篇文章主要介绍了php 后端实现JWT认证方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

ThinkPHP框架实现定时执行任务的两种方法分析

这篇文章主要介绍了ThinkPHP框架实现定时执行任务的两种方法,结合实例形式分析了2种被动执行定时任务的相关操作技巧与注意事项,需要的朋友可以参考下
收藏 0 赞 0 分享

PHP命名空间与自动加载类详解

这篇文章主要介绍了PHP命名空间与自动加载类,结合实例形式详细分析了php自动加载类与命名空间原理、使用方法及相关操作注意事项,需要的朋友可以参考下
收藏 0 赞 0 分享

PHP时间处理类操作示例

这篇文章主要介绍了PHP时间处理类,结合实例形式分析了DateTime、DateTimeZone、DateInterval及DatePeriod等常用日期时间处理类简单操作技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

利用PHP扩展Xhprof分析项目性能实践教程

XHProf是Facebook开发的性能调试工具,能帮助直观的统计显示PHP程序执行中各方法函数调用次数和消耗时间,以方便我们排查性能瓶颈并进行调优。下面这篇文章主要给大家介绍了关于利用PHP扩展Xhprof分析项目性能实践的相关资料,需要的朋友可以参考下
收藏 0 赞 0 分享

Django 标签筛选的实现代码(一对多、多对多)

这篇文章主要介绍了Django 标签筛选的实现代码(一对多、多对多),本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

PHP使用pdo实现事务处理操作示例

这篇文章主要介绍了PHP使用pdo实现事务处理操作,结合实例形式较为详细的分析了php基于pdo实现事务处理的相关原理与操作技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

thinkPHP框架实现类似java过滤器的简单方法示例

这篇文章主要介绍了thinkPHP框架实现类似java过滤器的简单方法,结合实例形式分析了thinkPHP基于继承实现的登录验证功能相关操作方法,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多