ThinkPHP 使用layer弹窗扩展插件

layer

layer是一个jquer下的弹窗插件,有N种弹窗特效,使用起来也简单的很,非常不错。
layer官网:http://layer.layui.com/

使用方法

  • 第一步:引入JS文件,需要引入jquery和layer的js
<script src="__ADMIN__/jquery.js"></script>
<script src="__ROOT__/skin/plus/layer/layer.js"></script>
  • 第二步:在合适的位置放置demo
官方提供了很多demo,直接使用即可。

案例

在列表页中点击查看会弹出内容窗。

模板代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>公文列表页</title>
		<script src="__ADMIN__/jquery.js"></script>
		<script src="__ROOT__/skin/plus/layer/layer.js"></script>
		<style>
			#bm { width:100%; overflow:-Scroll;overflow-x:hidden; background:#F0C040}
			#bm ul{ width:100%; float:left;}
			#bm li{ width:200px; float:left; list-style: none;}
		</style>
	</head>
	<body>
		<div id="bm">
			<ul>
				<li>序号</li><li>标题</li><li>附件</li><li>作者</li><li>时间</li><li>操作</li>
			</ul>
			<volist name="data" id="vol">
			<ul>				
				<li><input type="checkbox" class="deptid" value="{$vol.id}">{$vol.id}</li>
				<li>{$vol.title|subtext=10}&nbsp;</li>
				<li>&nbsp;
					<!-- vol.filename这不用$符号 -->
					<notempty name='vol.filename'><a href="__CONTROLLER__/download/id/{$vol.id}" title="{$vol.filename}">【下载】</a></notempty>
				</li>
				<li>{$vol.author}&nbsp;</li>
				<li>{$vol.addtime|date='Y-m-d H:i:s',###}&nbsp;</li>
				<li><a href="javascript:;" class="show" data="{$vol.id}" data-title="{$vol.title}">查看</a></li>				
			</ul>			
			</volist>
			<ul><a class="del" href="javascript:;">删除</a></ul>
		</div>
		<script>
			$(function()
			{
				//查看内容
				$('.show').on('click',function(){
					//获取ID
					var id = $(this).attr('data');
					//获取标题
					var title = $(this).attr('data-title');
					//layer的demo代码
					layer.open({
					  type: 2,
					  title: title,
					  shadeClose: true,
					  shade: 0.8,
					  area: ['780px', '90%'],
					  content: '__CONTROLLER__/showContent/id/' + id //iframe的url
					}); 
				});
			});
		</script>
	</body>
</html>

控制器使用的代码

public function showContent()
		{
			$id = I('get.id');
			
			$data = M('Doc') -> find($id);
			#输出内容,并还原被转义的字符
			echo htmlspecialchars_decode($data['content']);
		}

最后的效果

评论

大侠名号:   验证码: 点击我更换图片  

修远兮

在这里记录每一点自己需要的知识

添加创始人微信,一起交流心得

推荐文章RECOMMEND