码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-05-29 17:22:54      阅读:330      评论:0      收藏:0      [点我收藏+]

标签:util   特效   net   nim   view   graphics   tty   ret   cursor   

当页面的一个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.actingView.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>

 

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

标签:util   特效   net   nim   view   graphics   tty   ret   cursor   

原文地址:http://www.cnblogs.com/taiguyiba/p/6361394.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!