<!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. KoaHub平台基于Node.js开发的Koa的调试实用程序

    debug small debugging utility debug tiny node.js debugging utility modelled after node core's debugg ...

  2. netflix zuul-simple-webapp.war在tomcat下启动

    按照netflix 在github 的wiki的文档使用 gradlew jettyRun 可以启动jetty来进行测试. 在本地build war 以后,我放在tomcat 运行的时候,却不可以运行 ...

  3. python 使用内置函数sorted对各种数据类型进行排序

    python有两个内置的函数用于实现排序,一个是list.sort()函数,一个是sorted()函数. 区别1:list.sort()函数只能处理list类型数据的排序:sorted()则可以处理多 ...

  4. 菜鸟聊JavaScript中this

    菜鸟聊this this在JavaScript中是一个比较头疼的问题,我现在以一枚菜鸟的观点结合代码简单的谈下JavaScript中的this指向问题. 1.例子1 function a() { va ...

  5. （28）初识struts框架

    案例剖析中介绍了一个自己写的mystruts框架,这里开始简单的认识struts框架. 1.先看一个简单的struts开发的例子来熟悉一下流程 Struts就是基于mvc模式的框架! (struts其 ...

  6. c#XML操作类的方法总结

    using System.Xml;using System.Data; namespace DotNet.Utilities{    /// <summary>    /// Xml的操作 ...

  7. SharePoint JavaScript 客户端对象使用视频教程

    本次视频教程是为大家介绍如何使用SharePoint JavaScript客户端对象,包括对于站点.列表.文档库.列表项.文件夹.文件和附件等基本对象的操作,同时,为大家举几个简单的应用的例子,让大家 ...

  8. vue-miniQQ——基于Vue2实现的仿手机QQ单页面应用（接入了聊天机器人，能够进行正常对话）

    使用Vue2进行的仿手机QQ的webapp的制作,作品由个人独立开发,源码中进行了详细的注释. 由于自己也是初学Vue2,所以注释写的不够精简,请见谅. 项目地址 https://github.com ...

  9. 【一通百通】c/php的printf用法

    1.先说说PHP printf()函数: printf()函数的调用格式为: printf("<格式化字符串>", <参量表>); %d 十进制有符号整数  ...

  10. Java基础之RTTI 运行时类型识别

    运行时类型识别(RTTI, Run-Time Type Identification)是Java中非常有用的机制,在Java运行时,RTTI维护类的相关信息. 多态(polymorphism)是基于R ...