<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>级联拓扑图-简单例子</title>
<script type="text/javascript" src="js-graph-it.js"></script>
<link rel="stylesheet" type="text/css" href="js-graph-it.css" />
<link rel="stylesheet" type="text/css" href="sf-homepage.css" />
<script type="text/javascript" language="javascript">
<!--
function onLoad() {
resizeCanvas();
initPageObjects();
}
function resizeCanvas() {
var divElement = document.getElementById("mainCanvas");
var screenHeight = window.innerHeight || document.body.offsetHeight;
divElement.style.height = (screenHeight - 16) + "px";
}
function openSample(url) {
var popup = window.open(url, "sampleWindow", "width=400,height=300");
popup.focus();
return false;
}
//-->
</script>
</head>
<body onload="onLoad();">
<table class="main_table" style="height: 100%;">
<tr>
<td style="vertical-align: top; padding: 0px;">
<div id="mainCanvas" class="canvas" style="width: 100%; height: 500px;">
<p class="block draggable" style="top: 100px; left: 150px; width: 50px;" id="par_1">
一级分类
</p>
<p class="block draggable" style="top: 200px; left: 100px; width: 50px;" id="par_2">
二级分类
</p>
<p class="block draggable" style="top: 200px; left: 200px; width: 50px;" id="par_4">
二级分类
</p>
<p class="block draggable" style="top: 280px; left: 60px; width: 50px;" id="par_3">
三级分类
</p>
<p class="block draggable" style="top: 280px; left: 140px; width: 50px;" id="par_5">
三级分类
</p>
<div class="connector par_1 par_2">
<!--线是根据id连接-->
<img class="connector-end" src="arrow.gif">
</div>
<div class="connector par_1 par_4">
<img class="connector-end" src="arrow.gif">
</div>
<div class="connector par_2 par_3">
<!--线是根据id连接-->
<img class="connector-end" src="arrow.gif">
</div>
<div class="connector par_2 par_5">
<img class="connector-end" src="arrow.gif">
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
js_拓扑图_级联拓扑图
4星 · 超过85%的资源 需积分: 13 9 浏览量
2013-08-14
15:34:48
上传
评论
收藏 19KB RAR 举报 
js 拓扑图.rar （11个子文件） 
graph 
arrow_d.gif 828B
gradient.jpg 28KB arrow_l.gif 828B
test.html 3KB
js-graph-it.css 327B arrow.gif 53B sf-homepage.css 2KB arrow_r.gif 53B move.gif 97B arrow_u.gif 827B js-graph-it.js 46KB
- 1
- 2
前往页