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>
  • 相关阅读:
    C#进行Visio二次开发之设备状态跟踪
    C#进行Visio二次开发之Shape的Data1、Data2、Data3的用处
    C#进行Visio二次开发之界面设计及架构设计
    Sqlserver常用函数例子说明
    香港生肖采集及规则分析软件
    使用NVelocity0.5实现服务器端页面自动生成
    C#进行Visio二次开发之判断图纸是否有设备
    C#进行Visio二次开发之图纸缩放操作的实现
    C#进行Visio开发的事件处理
    导线应力及弧垂计算相关资料
  • 原文地址:https://www.cnblogs.com/taiguyiba/p/6361394.html
Copyright © 2011-2022 走看看