<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<!-- 引入插件和样式 -->

<link rel="stylesheet" type="text/css" href="js/ystep.css" />

        <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>

<script type="text/javascript" src="js/ystep.js"></script>

<title>Insert title here</title>

</head>

<script type="text/javascript">

$(function(){

    $("#but").click(function(){

        $(".ystep").loadStep({

            size:"large",//流程节点的大小(small,large)

            color:"green",//流程节点的颜色(green,blue)

            steps:[{

                    title:"开始",//节点名称

                    content:"start"//节点对应的内容

            },{

                    title:"过程",//节点名称

                    content:"progress"//节点对应的内容

            },{

                    title:"结束",//节点名称

                    content:"end"//节点对应的内容

               }]

        });

        //$("#div1").setStep(3);//跳到指定节点

        //$("#div1").prevStep();//跳到上一节点

        //$("#div1").getStep();//获取当前节点

        //$("#div1").nextStep();//跳到下一个步骤

    })

})

</script>

<body>

<br/>

<br/>

<br/>

<div id="div1" class="ystep"></div>

<button  id="but">aa</button>

</body>

</html>

在进行显示流程节点的页面时，必须引入bootstrap.js和jquery.js，step是基于这两个基础上的 <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>，必须导入step所需要的js和css

<link rel="stylesheet" type="text/css" href="js/ystep.css" />
<script type="text/javascript" src="js/ystep.js"></script>

bootstrap loadStep流程节点动态显示的更多相关文章

  1. java工作流引擎Jflow流程事件和流程节点事件设置

    流程实例的引入和设置 关键词: 开源工作流引擎  Java工作流开发  .net开源工作流引擎   流程事件 工作流节点事件 应用场景: 在一些复杂的业务逻辑流程中需要在某个节点或者是流程结束后做一些 ...

  2. activiti官网实例项目activiti-explorer之扩展流程节点属性2

    情景需求:需要查找activiti-explorer项目中获取流程id的方法,然后根据流程id获取相应字段在节点属性中添加内容. 大致流程:拿取整个流程id获取对应表单属性,在页面节点属性中展示对应表 ...

  3. Gemini.Workflow 双子工作流入门教程三：定义流程：流程节点、迁移条件参数配置

    简介: Gemini.Workflow 双子工作流,是一套功能强大,使用简单的工作流,简称双子流,目前配套集成在Aries框架中. 下面介绍本篇教程:定义流程:流程节点.迁移条件参数配置. 一.普通节 ...

  4. Gemini.Workflow 双子工作流入门教程二：定义流程：流程节点介绍

    简介: Gemini.Workflow 双子工作流,是一套功能强大,使用简单的工作流,简称双子流,目前配套集成在Aries框架中. 下面介绍本篇教程:流程定义:流程节点属性. 流程节点: 左侧是节点工 ...

  5. FlowPortal:流程节点定义有误,合流节点"合流"没有对应的聚焦节点

    FB版本:6.00c 报错: 流程节点定义有误,合流节点"合流"没有对应的聚焦节点 解决办法:分流和合流之间的节点不能有其他节点汇入.调整如下后,成功保存.

  6. jeecg bpm流程节点流程节点配置

    流程节点 流程节点 cgFormBuildController.do?ftlForm&tableName=jform_leave&mode=onbutton&ftlVersio ...

  7. 初始化bootstrap treeview树节点

    最近在做启明星图库时,使用了Jquery Bootstrap  Treeview插件.但是,遇到了一个初始化的问题.先看效果如下: 当用户打开图库时,左边分类第一个类别是“所有分类”,默认需要选中. ...

  8. 未完结第八节 JBPM流程节点

    1.12个节点介绍 2.Node节点

  9. activiti官网实例项目activiti-explorer之扩展流程节点属性

    节点中添加“关联表单”属性 1,stencilset.json中加入如下代码 , {    "name" : "approveTypepackage",    ...

随机推荐

  1. SQL一次查出相关类容避免长时间占用表(上)

    /* server: db: EDI */ -- 以下案例多次查询同一张表,仅有组合条件Name+Direction不同 --可以使用一次查出相关类容避免长时间占用表 USE EDI GO DECLA ...

  2. C语言之一天一个小程序

    程序示例: #include <stdio.h> #include <stdlib.h> int main() { printf("Hello,world!\n&qu ...

  3. Bug跟踪的流程

    本文以翼发云协同项目管理系统为例子来讲解Bug跟踪的流程,它以工作流为中心的集成式Bug跟踪软件,它广泛地应用于研发行业的产品缺陷管理 与跟踪.事务跟踪.问题跟踪.任务跟踪.查询跟踪.需求管理.变更跟 ...

  4. 【树莓派】Linux自动配置IP

    由于需要配置多台树莓派设备,但需要将IP配置为静态IP,而一台一台手动执行比较慢,所以写了一份脚本,sudo 执行即可. 将下面内容复制在家目录下,命名为auto.sh 然后执行 sudo sh au ...

  5. windows phone 8.1开发:(消息弹出框)强大的ContentDialog

    原文出自:http://www.bcmeng.com/contentdialog/ 在应用开发中我们必不可少的会使用到消息框,windows phone8中的messagebox在windows ph ...

  6. ioS开发之CoreLocation（GPS定位）

    1.概述 在iOS开发中,要想加入地图和定位功能这2大功能,必须基于2个框架进行开发 (1)Map Kit :用于地图展示 (2)Core Location :用于地理定位 2个热门专业术语: LBS ...

  7. lsusb命令

    运行 yum install libusb usbutils

  8. 初学canvas，遇到width和height显示问题和用excanvas.js兼容IE问题

    /*-----------------------ITEYE 祈祷幸福博客原创,转载请注明.-------------------*/ 第一次认真写技术博客文~~~若有不严谨的地方,望指正. 今天是第 ...

  9. Python快速入门（1）

    FROM:实验楼 http://python.usyiyi.cn/python_278/tutorial/index.html http://woodpecker.org.cn/abyteofpyth ...

  10. cookie设置今日不提醒功能

    需求:为了实现 退出页面时 [启动今日不提醒]的功能.采用纯js.cookie来实现. /****今日不提醒 start *****/ var userid = <%=UserId %>; ...