报表里实现AJAX动态相册展示效果
1. 问题概述
有时候我们会逛一些购物网站,当我们看到一件要买的商品时,通常商家都会提供一系列的图片在上面,为了商品能够看的更清楚和更好的视觉体验,我们可以点击相应的图片,然后动态全屏图片,支持上下翻页,提示信息,关闭等操作.报表里也一样能够实现此动态效果.
2. 实例演示
1.报表模板里图片的位置,数据类型为HTML,多张图片排列显示,提示信息,css样式等
2.点击相应图片,动态全屏显示,鼠标悬停,出现PREV上翻页
3.相应图片,动态全屏显示,鼠标悬停,出现NEXT下翻页,可循环上下翻页,点击关闭,恢复初始状态
3. 程序说明
A.附件包含主要的JS,Css,img,报表模板.
B.jsp代码比较简单:
<%@ page language=“java” import=“java.util.*” pageEncoding=“GBK”%>
<%@ taglib uri=“/WEB-INF/runqianReport4.tld” prefix=“report”%>
<html>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=gb2312″ />
<title>相册演示</title>
<link rel=“stylesheet” href=“pic-css/lightbox.css” type=“text/css”
media=“screen” />
<script src=“pic-js/prototype.js” type=“text/javascript”></script>
<script src=“pic-js/scriptaculous.js?load=effects”
type=“text/javascript”></script>
<script src=“pic-js/lightbox.js” type=“text/javascript”></script>
<style type=“text/css”>
</style>
</head>
<style type=“text/css”>
.thumbnail {
BORDER-RIGHT: #c1c1c1 1px solid;
PADDING-RIGHT: 3px;
BORDER-TOP: #c1c1c1 1px solid;
PADDING-LEFT: 3px;
FLOAT: left;
MARGIN-BOTTOM: 10px;
PADDING-BOTTOM: 8px;
BORDER-LEFT: #c1c1c1 1px solid;
MARGIN-RIGHT: 10px;
PADDING-TOP: 3px;
BORDER-BOTTOM: #c1c1c1 1px solid;
BACKGROUND-COLOR: #c1c1c1
}
.STYLE1 {
color: #FF0000
}
.STYLE2 {
color: #CC0000
}
.STYLE3 {
color: #FF0000;
font-weight: bold;
}
</style>
<body>
<%
//这里为两种方法准备图片连接的公共部分
String appmap = request.getContextPath();
String wordImage = “<img alt=导出Word src=’”
+ appmap
+ “/images/doc.gif’ border=no style=’vertical-align:middle’>”;
String excelImage = “<img alt=导出excel src=’”
+ appmap
+ “/images/excel.gif’ border=no style=’vertical-align:middle’>”;
String pdfImage = “<img alt=导出PDF文件 src=’”
+ appmap
+ “/images/pdf.gif’ border=no style=’vertical-align:middle’>”;
String submitImage = “<img alt=保存到数据库 src=’”
+ appmap
+ “/images/savedata.gif’ border=no style=’vertical-align:middle’>”;
%>
<report:html name=“report1″ reportFileName=“AJAX.raq”
needSaveAsWord=“yes” needSaveAsPdf=“yes” needSaveAsExcel=“yes” needPageMark=“no”
excelPageStyle=“0″ wordLabel=“<%=wordImage%>width=“-1″
pdfLabel=“<%=pdfImage%>submit=“<%=submitImage%>“
excelLabel=“<%=excelImage%>/>
</body>
</html>