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

电力项目十四--js添加highslider特效的更多相关文章

  1. 电力项目十八--DOM对象的ajax

    Ajax操作的核心对象:xmlreq = new XMLHttpRequest(); 第一步:在dictionaryIndex.jsp中添加: <script type="text/j ...

  2. 网站开发进阶(十四)JS实现二维码生成

    JS实现二维码生成 绪 项目开发原语:已然花费半天的时间,仍旧未能将二维码显示在订单中.但是可以在单个页面中显示二维码,结合到angularjs的控制器中就失效了,自己是真的找不到其中的原因了.费解! ...

  3. 第十四篇 Integration Services：项目转换

    本篇文章是Integration Services系列的第十四篇,详细内容请参考原文. 简介在前一篇,我们查看了SSIS变量,变量配置和表达式管理动态值.在这一篇,我们使用SQL Server数据商业 ...

  4. 【D3.V3.js系列教程】--（十四）有路径的文字

    [D3.V3.js系列教程]--(十四)有路径的文字 1. 在 svg 中插入一個 text // 在 body 中插入一個 svg var svg = d3.select('body').appen ...

  5. 第六十四天 JS基础操作

    一.分支结构 1.if语句 if基础语句 if(条件表达式){ 代码块: } // 当条件表达式结果为true,会执行代码块:反之不执行 // 条件表达式可以为普通表达式 // 0.undefined ...

  6. [原]Jenkins(十四)---jenkins示例：admin管理所有项目，新建用户只能看部分项目

    /** * lihaibo * 文章内容都是根据自己工作情况实践得出. *如有错误,请指正 * 版权声明:本博客欢迎转发,但请保留原作者信息! http://www.cnblogs.com/horiz ...

  7. 【译】第十四篇 Integration Services：项目转换

    本篇文章是Integration Services系列的第十四篇,详细内容请参考原文. 简介在前一篇,我们查看了SSIS变量,变量配置和表达式管理动态值.在这一篇,我们使用SQL Server数据商业 ...

  8. 金生芳-实验十四 团队项目评审&课程学习总结

    实验十四 团队项目评审&课程学习总结 项目 内容 这个作业属于哪个课程 [教师博客主页链接] 这个作业的要求在哪里 [作业链接地址] 作业学习目标 (1)掌握软件项目评审会流程(2)反思总结课 ...

  9. 201671030114 马秀丽 实验十四 团队项目评审&课程学习总结

    项目 内容 作业所属课程 所属课程 作业要求 作业要求 课程学习目标 (1)掌握软件项目评审会流程:(2)反思总结课程学习内容 任务一:团队项目审核已完成.项目验收过程意见表已上交. 任务二:课程学习 ...

随机推荐

  1. 数据库入门级面试题（带答案） 数据库简单面试题（带答案） MySQL面试题带答案

    数据库入门[mysql]   1.假设要按照分页(每页显示10条)的形式获取test表中的数据,在MySql数据库中,以下哪条语句是取第2页中的数据?(单选)   (难度A) A.select * f ...

  2. 基于Redis构建10万+终端级的高性能部标JT808协议的Gps网关服务器（转）

    原文地址:http://www.jt808.com/?p=1282 在开发一个大规模的部标GPS监控平台的时候,就算我们花费再多的时间设计和规划,我们也并不能准确的预测出自己未来的车载终端接入量有多大 ...

  3. centos系统字符编码问题

    1.cat /etc/locale.conf LANG="en_US.UTF-8" 2./etc/profile.d/lang.sh这个文件要有且可以正常执行(检查/sbin/co ...

  4. V模型与测试级别

    V模型与测试级别[1] 2015-06-24 目录 2.1.1 V模型2.2.1 单元测试2.2.2 集成测试2.2.3 系统测试2.2.4 验收测试 2.1.1 V模型 返回 单元测试:验证软件单元 ...

  5. linux下tar.gz、tar、bz2、zip等解压缩、压缩命令小结（转载）

    Linux下最常用的打包程序就是tar了,使用tar程序打出来的包我们常称为tar包,tar包文件的命令通常都是以.tar结尾的.生成tar包后,就可以用其它的程序来进 行压缩了,所以首先就来讲讲ta ...

  6. dfs带状态改变的做法

    所谓带状态改变是指:在搜索到某个位置的时候,状态发生改变,继续计算步数. 给一个例题: 蒜头君要回家,但是他家的钥匙在他的朋友花椰妹手里,他要先从花椰妹手里取得钥匙才能回到家.花椰妹告诉他:“你家的钥 ...

  7. js json对象和数组对象

    动态添加json对象: var json = {}; json['a'] = 'a'; 动态添加数组对象: var arr = []; arr['a'] = 'a';

  8. VBA学习笔记（1）----VBA对象属性方法

    'VBA对象 'VBA中的对象其实就是我们操作的具有方法.属性的excel中支持的对象 'Excel中的几个常用对象表示方法 '1.工作簿 ' Workbooks 代表工作簿集合,所有的工作簿,Wor ...

  9. 2014圣诞节一款纯css3实现的雪人动画特效

    在2014年的圣诞节,爱编程小编给大家分分享一款纯css3实现的雪人动画特效.该实例实现一个雪人跳动的特效,效果图如下: 在线预览   源码下载 实现的代码. html代码: <span cla ...

  10. Android WebView的注意事项

    1.修改权限,添加<uses-permission android:name="android.permission.INTERNET"/> 2.loadUrl方法要写 ...