<?//http://dcdc723.iteye.com by 指尖 dcdc723
$i=100;
$h=$i/3; //判断行数
?>
<html>
<head>
<title>test</title>
<script src="js/jquery-1.3.2.js"></script>
<script>
$(function(){var $h=<?=$h?>; var $i=<?=$i?>;for(var $t=1;$t<$i+1;$t++){var $left="120px";var $dqh=Math.ceil($t/3);var $jo=($dqh%2);if($jo=="1"){var $lie=$t%3;switch($lie){case 1:$left="120px";$("#s"+$t).css({"position":"absolute","width":"122px","height":"32px","z-index":"1","left":"120px","background-image":"url(images/2.png)"});break;case 2:$left="420px";$("#s"+$t).css({"position":"absolute","width":"122px","height":"32px","z-index":"1","left":"271px","background-image":"url(images/1.png)"});break;case 0:$left="720px";$("#s"+$t).css({"position":"absolute","width":"122px","height":"32px","z-index":"1","left":"571px","background-image":"url(images/1.png)"});break;}}if($jo=="0"){var $lie=$t%3;switch($lie){case 1:$left="720px";$("#s"+$t).css({"position":"absolute","width":"122px","height":"32px","z-index":"1","left":"571px","background-image":"url(images/1.jpg)"});break;case 2:$left="420px";$("#s"+$t).css({"position":"absolute","width":"122px","height":"32px","z-index":"1","left":"271px","background-image":"url(images/1.jpg)"});break;case 0:$left="120px";break;}}if($dqh==1){$("#s"+$t).css({"top": "38px","position":"absolute"});$("#s"+$t).css({"position":"absolute"});$("#apDiv"+$t).css({"position":"absolute","width":"140px","height":"84px","z-index":"1","left":" "+$left+" ","background-color":"#6CF"});}if($dqh>1){var $top=240;$top=($dqh-1)*240;$top=$top+"px";$("#s"+$t).css({"top": " "+$top+" ","position":"absolute"});$("#apDiv"+$t).css({"position":"absolute","width":"140px","height":"84px","z-index":"1","left":" "+$left+" ","top":" "+$top+" ","background-color":"#6CF"});
}}});
</script>
</head>
<body>
<?
for($t=1;$t<$i+1;$t++)
{
echo "<div id='apDiv$t'>第".$t."个阶段名</div>";
if($t!=1){
echo "<div id='s$t'>这里是阶段时间</div>";}
}
?>
</body>
</html>
分享到：
相关推荐
GooFlow是一款用jquery流程图设计器，传json字符串和一些变量的设置来实现可视化流程图设计。可兼容IE7--IE10， FireFox， Chrome， Opera等几大内核的浏览器，且不需要浏览器再加装任何控件。页面顶部栏、左边侧...
总的来说，利用jsPlumb和jQuery UI，我们可以创建出一个功能强大的、用户友好的Web流程设计器，它的拖拽功能使得流程图的编辑变得简单易行。无论是用于内部开发还是对外提供服务，这样的工具都能够为用户提供极大的...
在本压缩包“flowchart_web.zip”中，包含了一个基于d3.js的流程图设计工具，主要用于Web设计流程图的创建和编辑。d3.js是一个强大的JavaScript库，它允许开发者利用数据来操作DOM（文档对象模型），从而创建交互式...
插件描述：跨浏览器，可兼容IE7--IE10， FireFox， Chrome， Opera等几大内核的浏览器，且不需要浏览器再加装任何控件。 参考示例：http://www.jq22.com/jquery-info5015
顶部栏可显示流程图数据组的标题，也可提供一些常用操作按钮 顶部栏的按钮，除了撤销、重做按钮外，其余按钮均可自定义点击事件 可画直线、折线；折线还可以左右/上下移动其中段 具有区域划分功能，能让用户更直观地...
"Web流程图制作（基于js）"这个主题聚焦于如何利用JavaScript来创建交互式的流程图。JavaScript，作为Web开发的基石，允许我们在浏览器端动态地生成和操作页面内容，这使得它成为实现动态流程图的理想选择。 1. **...
本话题主要涉及两个关键库——jQuery UI和myflow.js，以及如何结合它们来构建自定义的组织架构图和流程图。首先，让我们深入了解这两个库及其功能。 jQuery UI是一个流行的JavaScript库，它是jQuery项目的扩展，...
而"jQuery简易流程图编辑控件"正是利用这些优势，实现了流程图的绘制、编辑和保存功能。 这个控件的设计理念是提供一个直观的用户界面，允许用户通过拖放节点、连接线来构建流程图。用户可以自定义节点的形状、颜色...
总结，jQuery流程图组件GooFlow以其强大的绘图能力和丰富的交互特性，成为Web开发中绘制流程图的得力助手。通过深入了解其工作原理和API，开发者可以构建出符合项目需求的、富有表现力的流程图，提升应用的用户体验...
这是一个用来在浏览器上设计流程图的WEB UI组件，基于Jquery开发。可用来设计各种引擎的流程图、逻辑流图，数据流图，或者是设计某个系统中需要走流程的功能应用。用户体验经本人的不断改良后使得操作界面很容易上手...
本话题聚焦于一个基于jQuery实现的流程图在线编辑插件，该插件为用户提供了方便的流程图创建和编辑功能，同时也为开发者提供了二次开发的可能性。 首先，jQuery的核心优势在于它提供了一套简洁的API，使得开发者能...
在Web开发中，流程图是一种常见的数据可视化工具，用于展示复杂的步骤或决策过程。jQuery作为一个轻量级、高性能的JavaScript库，为开发者提供了丰富的功能来实现各种交互效果。本篇文章将探讨一个基于jQuery的简易...
在Web开发中，流程图是一种直观、有效的展示数据处理方式，尤其在业务流程、系统架构或者工作流设计中应用广泛。jsPlumb是一个JavaScript库，专用于创建视觉连接器或流程图，而jQuery是一个广泛使用的JavaScript库，...
总结来说，"jQuery业务审批流程图工具代码"是一个基于jQuery实现的Web工具，它展示了如何巧妙地运用jQuery进行图形编辑和流程管理。对于开发者而言，深入研究这个工具的源码，不仅可以提升jQuery的实战技能，也能为...
在实现流程图的动态功能时，如拖动和右击，jQuery提供了一套强大且易用的API。 `wz_jsgraphics.js`可能是一个用于绘制图形的库，比如WzGraph，它允许开发者创建复杂的矢量图形。这个库可以用来绘制流程图的各个节点...
通过分析这些资源，你可以更深入地了解Web流程图的设计和实现，以及如何利用JavaScript来实现图中的各种交互和逻辑。 总之，理解和运用Web流程图有助于我们清晰地规划Web应用的结构和逻辑，而JavaScript则是实现...
`jQuery`是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理以及Ajax交互，因此使用`jQuery`实现图片即时上传是一种常见且高效的方法。本文将深入探讨如何利用`jQuery`来创建一个兼容多种浏览器，包括...
本文将深入探讨如何使用jQuery实现PDF在线预览功能，这在许多Web应用中都是一种常见且实用的需求。 首先，我们需要理解PDF在线预览的基本原理。PDF（Portable Document Format）是一种通用的文件格式，用于保存文档...
基于JQUERY的WEB在线流程图设计器GOOFLOW 0.5版 (2013-11-23) [特点] 跨浏览器，可兼容IE7--IE10， FireFox， Chrome， Opera等几大内核的浏览器，且不需要浏览器再加装任何控件。 多系统兼容性、可移植性:...