Highslide JS插件的的集成步骤-优快云博客

本文介绍了如何使用Highslide JS库及其相关样式文件在网页上实现图片的弹窗展示效果。主要内容包括Highslide JS库的下载、引入方式、JS代码配置方法及在JSP页面中的具体实现步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.下载Highslide及一些相关样式文件：http://download.youkuaiyun.com/detail/zjdwhd/9709740
二.在文件中作如下的文件引入及添加js代码：

<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>

<!-- highslide插件js部分代码 -->
<script type="text/javascript">
    // override Highslide settings here
    // instead of editing the highslide.js file
    hs.graphicsDir = '${pageContext.request.contextPath }/script/highslide/graphics/';
</script>

三.在你的jsp文件中加入如下代码：

<div>
    <a style="cursor:hand" href="${pageContext.request.contextPath}/commonmsg/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>

四.内容显示参考文件：

<%@ page language="java" pageEncoding="UTF-8"%>
<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">${commonMsg.devRun }</td>
        </tr>
    </table>
</body>
</html>