zoukankan      html  css  js  c++  java
  • 电力项目十四--js添加highslider特效

    当页面的一个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=" 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>
  • 相关阅读:
    去除inline-block元素间间隙的几种方法
    数组去重的几种方法
    CSS实现水平居中的几种方法
    CSS实现垂直居中的几种方法
    实现一个jQuery的API
    jQuery从入门到放弃
    JavaScript中的DOM与BOM
    JavaScript中的原型与原型链
    爬取某东娃娃评价,生成词云
    vm提示:如果该虚拟机未在使用,请按“获取所有权(T)”按钮获取它的所有权。否则,请按“取消(C)”按钮以防损坏。
  • 原文地址:https://www.cnblogs.com/taiguyiba/p/6361394.html
Copyright © 2011-2022 走看看