<!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="wz_jsgraphics.js" ></script>
<script type="text/javascript" src="jquery.js" ></script>
<script type="text/javascript" src="jquery.ui.flow.js" ></script>
<style type="text/css">
.before{
padding:5px;width:40px;height:20px;border:1px solid black;
background:#AAAAAA;
font-size:9pt;
color:white;
font-weight:bolder;
float: left;
cursor:hand;
};
.hover{
background: green;
color: black;
}
</style>
</head>
<body>
<xmp>
<div id="spanBefore">
<div class="before" begin=-1 id="1" next="2,3,11">环节一</div>
<div class="before" id="2" next="4">环节二</div>
<div class="before" id="3" next="5">环节三</div>
<div class="before" id="4" next="6">环节四</div>
<div class="before" id="5" next="6">环节五</div>
<div class="before" id="6" next="7,8">环节六</div>
<div class="before" id="7" next="9">环节七</div>
<div class="before" id="8" next="10,11">环节八</div>
<div class="before" id="9" next="12">环节九</div>
<div class="before" id="10" next="12">环节10</div>
<div class="before" id="11" next="12">环节11</div>
<div class="before" id="12" next="-1">环节12</div>
</div>
<div style="position:relative; width:300px; height:300px;" id="draw"></div>
<script type="text/javascript">
$("#spanBefore").flow({hover:function(){
$(this).addClass("hover");
},remove:function(){
$(this).removeClass("hover");
},click:function(){
alert($(this).attr("id") + "->" + $(this).attr("next") + " Click");
}});
</script>
</xmp>
<div id="spanBefore">
<div class="before" begin=-1 id="1" next="2,3,11">环节一</div>
<div class="before" id="2" next="4">环节二</div>
<div class="before" id="3" next="5">环节三</div>
<div class="before" id="4" next="6">环节四</div>
<div class="before" id="5" next="6">环节五</div>
<div class="before" id="6" next="7,8">环节六</div>
<div class="before" id="7" next="9">环节七</div>
<div class="before" id="8" next="10,11">环节八</div>
<div class="before" id="9" next="12">环节九</div>
<div class="before" id="10" next="12">环节10</div>
<div class="before" id="11" next="12">环节11</div>
<div class="before" id="12" next="-1">环节12</div>
</div>
<div style="padding:30px;border:1px dotted black;">
<div style="position:relative; width:300px; height:300px;" id="draw"></div>
</div>
<input type=button value='生成流程图' onclick="createFlow();" />
<script type="text/javascript">
var createFlow = function(){
$("#spanBefore").flow({hover:function(){
$(this).addClass("hover");
},remove:function(){
$(this).removeClass("hover");
},click:function(){
alert($(this).attr("id") + "->" + $(this).attr("next") + " Click");
}});
}
</script>
</body>
</html>
没有合适的资源?快使用搜索试试~ 我知道了~
全JS绘制业务流程图插件
共8个文件
png:4个
js:3个
html:1个
4星 · 超过85%的资源 需积分: 50 320 下载量 75 浏览量
2010-01-06
09:42:36
上传
评论 3
收藏 37KB RAR 举报
温馨提示
使用JQuery和WZ_Graphic根据业务流程,自动在html网页上绘制流程结构的JQuery插件。 方便、快捷,并且支持鼠标事件和样式定义。
资源推荐
资源详情
资源评论
收起资源包目录
flow.rar (8个子文件)
jquery.js 94KB
images
left_sword.png 224B
right_sword.png 210B
down_sword.png 207B
up_sword.png 215B
wz_jsgraphics.js 23KB
jquery.ui.flow.js 4KB
index.html 3KB
共 8 条
- 1
海鸥鱼蛋
- 粉丝: 1
- 资源: 26
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
- 1
- 2
- 3
- 4
- 5
- 6
前往页