layer.js 封装使用，运用在thinkphp

最新推荐文章于 2020-08-25 10:07:44 发布

廖圣平

最新推荐文章于 2020-08-25 10:07:44 发布

阅读量2.4k

点赞数 1

分类专栏： php thinkphp javascript jquery

本文链接：https://blog.csdn.net/qq_22823581/article/details/71425010

版权

php 同时被 3 个专栏收录

161 篇文章 3 订阅

订阅专栏

thinkphp

61 篇文章 1 订阅

订阅专栏

javascript

49 篇文章 0 订阅

订阅专栏

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");   //这个不要漏了

廖圣平

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
layer.js 封装使用，运用在thinkphp

v层：（还没实现功能的）添加教室名称: teacher: {volist name="teacher" id="teacher"} getData('id')}">{$teacher->getData('name')} {/volist}
复制链接

扫一扫