<?//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>
分享到：
相关推荐
插件描述：跨浏览器，可兼容IE7--IE10， FireFox， Chrome， Opera等几大内核的浏览器，且不需要浏览器再加装任何控件。 参考示例：http://www.jq22.com/jquery-info5015
顶部栏可显示流程图数据组的标题，也可提供一些常用操作按钮 顶部栏的按钮，除了撤销、重做按钮外，其余按钮均可自定义点击事件 可画直线、折线；折线还可以左右/上下移动其中段 具有区域划分功能，能让用户更直观地...
这是一个用来在浏览器上设计流程图的WEB UI组件，基于Jquery开发。可用来设计各种引擎的流程图、逻辑流图，数据流图，或者是设计某个系统中需要走流程的功能应用。用户体验经本人的不断改良后使得操作界面很容易上手...
基于web的流程设计器，jsplumb+jqueryUI实现，支持拖拽功能，支持主流浏览器，可用于二次开发。
分享个自己写的WEB流程设计器。基于jquery, raphael实现，采用MVC框架backbone组织代码，参考了网上的myflow（不知来源），codiqa上的设计器。不过，很抱歉的是，目前不能画折线，只作为分享、学习用，有需要的可以...
GooFlow是一款用jquery流程图设计器，传json字符串和一些变量的设置来实现可视化流程图设计。可兼容IE7--IE10， FireFox， Chrome， Opera等几大内核的浏览器，且不需要浏览器再加装任何控件。页面顶部栏、左边侧...
这是一个用来在WEB网页端设计流程图的UI组件，基于Jquery开发。可用来设计各种流程图、逻辑流图，数据流图，或者是设计某个系统中需要走流程的功能应用。良好的用户体验使得操作界面很容易上手，技术开发人员和用户...
多系统兼容性、可移植性:由于只包括前台UI,因此二次开发者可很方便将本插件用在任何一种需要流程图的B/S系统应用上，流程图的详细实现逻辑完全交于后台程序开发者自己实现;对于后台,只要能返回/接收能被本插件...
多系统兼容性、可移植性:由于只包括前台UI,因此二次开发者可很方便将本插件用在任何一种需要流程图的B/S系统应用上，流程图的详细实现逻辑完全交于后台程序开发者自己实现;对于后台,只要能返回/接收能被本插件解析...
基于JQUERY的WEB在线流程图设计器GOOFLOW 0.5版 (2013-11-23) [特点] 跨浏览器，可兼容IE7--IE10， FireFox， Chrome， Opera等几大内核的浏览器，且不需要浏览器再加装任何控件。 多系统兼容性、可移植性:...
NULL 博文链接：https://asia007.iteye.com/blog/2004327
Web流程图在线设计，H5+JS编辑和查询流程图,jQuery ui基于myflow.js绘制流程图插件，自定义组织架构图图表，拖拽绘制组织架构图表代码。支持分支、节点状态工作流程图表样式代码
网上找了很久都没有找到用角度实现的可拖拽式的流程图组件，于是就基于jsplumb自己写了一个，实现了一些基本的功能，后续可能会再添加点。 演示 实现的功能： 拖拽式添加例程 拖拽式连线 删除摘要 双击连接线删除...
主要在学习jsplumb过程中利用jqueryUI、bootstrap等资源改版的web版在线流程设计器。 有启发 可参考 详情效果图参考地址：https://blog.csdn.net/hexin8888/article/details/83992816
使用jquery实现ajax同样异常简单 代码 (1) $.get("search. do",{id:1},rend); function rend(xml){ alert(xml); } (2) $.post("search. do",{id:1},rend); function rend(xml){ alert(xml); } (3) $...
这是一个用来在WEB网页端设计流程图的UI组件，在线流程设计器，基于Jquery开发。可用来设计各种流程图、逻辑流图，数据流图，或者是设计某个系统中需要走流程的功能应用。良好的用户体验使得操作界面很容易上手，...
如今异步在web开发中越来越重要，对于开发人员来说，这种非线性执行的编程会让开发者觉得难以掌控，而Promise可以让我们更好地掌控代码的执行流程,jQuery等流行的js库都已经实现了这个对象，年底即将发布的ES6也将...
并介绍技术上采用B/S 架构模式开发，MVC架构，MYSQL为后台数据库，TOMCAT为WEB应用服务器，基于JAVA语言开发，软件环境运行平台为WINDOWS系统的学生成绩分析系统的设计与实现。成绩分析系统通过成绩分析功能模块对...
4.2 系统流程图 8 第五章 系统详细设计 10 5.1 用户模块设计 10 5.2 数据库设计 11 5.2.1数据库设计的原则 11 5.2.2数据库表的设计 11 第六章 系统实现 14 6.1 系统功能实现 15 6.1 功能页面实现 15 6.1.1登陆模块...