第一步:部署
下载layer后,把它部署到你项目中的任何一个目录(当然,我们推荐放在前端相关目录里),你不能去挪动layer里面的文件结构,因为它们是不可拆散的组合。就像这样:
第二步:引入
你不必去管那些文件是干嘛的,你只需要认准一个文件:layer.js 没错,当你试图在页面呈现layer的时候,你应该这样去做:
<script src="js/jquery-2.1.1.js" type="text/javascript"></script>
<script src="js/layer/layer.js" type="text/javascript"></script>
需要引入jQuery1.8及以上和layer.js
第三步:使用
是时候目睹layer的挫样了,由于她是基于jQuery,你可以选择用jQuery的api方式去抒写。当你想弹出一个layer实例的时候,你首先应该绑定事件,就像上面的那个例子。
<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib uri="/struts-tags" prefix="s" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="<%=basePath%>">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script src="js/jquery-2.1.1.js" type="text/javascript"></script>
<!-- 引入弹窗插件 -->
<script src="js/layer/layer.js" type="text/javascript"></script>
</head>
<body>
<a id="aa" οnclick="author()"></a>
<script type="text/javascript">
/*
* 以下函数为弹窗显示信息
* 使用到了ajax获取json数据,使用了layer弹窗插件。
*/
function author() {
//小tips
layer.tips('我是另外一个tips', '#aa', {
tips: [1, '#3595CC'],
time: 4000
});
}
</script>
</body>
</html>
注意:1、 tips: [1, '#3595CC'] 中的1表示在#aa元素上方显示弹窗,2、3、4依次为右下左方位。2、 '#aa' 表示需要在哪个元素旁边显示信息。
下载layer插件及详细用法请查看: http://sentsin.com/jquery/layer/