<!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. 基于JAVA语言的selenium测试基础总结

    目录一.基本语句1.循环控制(break,continue)3.字符的替换(replace,repalceFirst,replaceAll,regex)4.字符串的连接("+",a ...

  2. CSS用足够大的纯色内阴影去覆盖掉谷歌input记住账号或密码时默认出现的黄色背景

    在谷歌浏览器会默认记住账号,而记住账号之后其input的背景会变成黄色,解决的办法如下: input:-webkit-autofill { -webkit-box-shadow: 0px 1000px ...

  3. gcc下c++的对象模型 (1)

    所有示例代码在如下环境中执行 ubuntu 16.04.4 (64位) gcc version 5.4.0 开启std11 gdb version 7.11.1 1. 空类的大小 定义一个空类A,实例 ...

  4. javascript-引用类型--Object类型

    引用类型是一种数据结构,本质是数据和功能的集合.引用类型有时也被称为对象定义,因为它们描述的是一类对象所具有的属性和方法.引用类型相当于java里面的类,javascript虽然是一门面向对象语言,但 ...

  5. css-dialog样式实现弹框蒙层全屏无需JS计算高度兼容IE7

    <!DOCTYPE html><html><head>  <meta charset="UTF-8">  <title> ...

  6. Sublime 常用快捷键

    Ctrl+Shift+P:打开命令面板 Ctrl+P:搜索项目中的文件 Ctrl+G:跳转到第几行 Ctrl+W:关闭当前打开文件 Ctrl+Shift+W:关闭所有打开文件 Ctrl+Shift+V ...

  7. iOS开发之@Selector参数的传递

    比如: NSMutableDictionary *dic = [[NUMutableDictionary alloc]init]; [dic setValue:@”haha” forKey:@”tes ...

  8. 初识vuex

    1.简介 vuex是 vue官方推荐的一个状态管理器.当我们遇到很多状态改变时,组件之间的通信就会变得复杂,这时候vuex的强大就展现出来. 我们从vuex的原理以及vuex的api两个部分介绍vue ...

  9. 在腾讯云上部署Hexo博客

    推荐理由 ----搭建个人的空间博客目前深受个人开发者的追捧,然而博客的种类和平台有很多,Hexo是一个开源的静态博客生成器.相比于其他博客而言它只要是web容器就能用.除了闷头专研技术之外,程序员还 ...

  10. echo print print_r的区别

    echo       PHP语句   效率最高    输出一个或者多个字符串 print()    函数       效率高     只能打印出简单类型变量的值(如int,string) print_ ...