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

时间:2023-02-15 08:53:56


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" />
<label for="teacher">teacher:</label>
<select name="teacher_id" >
{volist name="teacher" }
<option value="{$teacher->getData('id')}">{$teacher->getData('name')}</option>
{/volist}
</select>
<button type="button" >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>

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

第一部分完成
-------------------------------------------------------------------------------------------------------------------------------------------------------------


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