正文

电力项目十四--js添加highslider特效

IP云
IP云V管理员/1 阅读
09/23
小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

当页面的一个table表格无法显示所有的内容的时候，点击【查看详细信息】，显示详细内容：

下载css，js

1.在actingIndex.jsp中添加：引入js和css：

<LINK href="${pageContext.request.contextPath }/css/openView.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="${pageContext.request.contextPath }/script/highslide/highslide.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/script/highslide/highslide-html.js"></script>

2.添加javascript

<script type="text/javascript">
hs.graphicsDir = '${pageContext.request.contextPath }/script/highslide/graphics/';
hs.outlineType = 'rounded-white';
hs.outlineWhileAnimating = true;
</script>

3.actingIndex.jsp页面中添加代码

<div>
<a style="CURSOR:hand" href="${pageContext.request.contextPath }/system/elecCommonMsgAction_actingView.do?" onclick="return hs.htmlExpand(this, { contentId: 'highslide-html-1', objectType: 'ajax', preserveContent: true} )">
<div class="scrollStyle" align="left" style="table-layout:fixed;">
查看设备详细信息
</div>
</a>
<div class="highslide-html-content" id="highslide-html-1" style="width: 700px">
<div class="highslide-move" style="border: 0; height: 18px; padding: 2px; cursor: default">
<a href="#" onClick="return hs.close(this)" class="control">[关 闭]</a>
</div>
<div class="highslide-body"></div>
</div>
</div>

4.ElecCommonMsgAction.java

//添加highslider特效
public String actingView(){
ElecCommonMsg commonMsg = elecCommonMsgService.findCommonMsg();
ValueUtils.putValueStack(commonMsg);
return "actingView";
}

5.actingIndex.jsp页面

<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<html>
<head>
<title>显示运行监控记录</title>
<LINK href="${pageContext.request.contextPath }/css/Style.css" type="text/css" rel="stylesheet">
</head>
<body>
<table cellspacing="1" cellpadding="0" width="100%" align="center" bgcolor="#f5fafe" border="0">
<TR height="10">
<td class="ta_01">
<s:property value="devRun"/>
</td>
</TR>
</table></body>
</html>