您的位置：首页 > Web前端 > JavaScript

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

2017-05-29 21:05 162 查看
当页面的一个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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航