php流程图设计工具,流程图工具

ystep 流程、步骤插件

=============

b

ystep是一款jQuery流程、步骤插件。在网站设计中，经常会用到步骤指示，做某件事一共需要几个步骤，现在正处于哪个步骤，对用户而言是非常有帮助的，不仅能让用户思路清晰，也能带给用户一种无形的激励。

鉴于目前并无经典易用的类似插件，ystep就此诞生。

特点

设计简洁，方便易用。

体积小巧，便于集成。

代码稳重，安全可靠。

自由定制，步骤无限制。

兼容性强，Webkit(谷歌)、Gecko(火狐)内核系列全兼容，IE系列除了极品IE6，其它全兼容。

使用说明

引入ystep的js、css文件

加载ystep

//根据jQuery选择器找到需要加载ystep的容器

//loadStep 方法可以初始化ystep

$(".ystep1").loadStep({

//ystep的外观大小

//可选值：small,large

size: "small",

//ystep配色方案

//可选值：green,blue

color: "green",

//ystep中包含的步骤

steps: [{

//步骤名称

title: "发起",

//步骤内容(鼠标移动到本步骤节点时，会提示该内容)

content: "实名用户/公益组织发起项目"

},

{

title: "审核",

content: "乐捐平台工作人员审核项目"

}]

});

操作ystep

//所有跳转操作，仅需在加载ystep的容器上调用即可

//跳转到下一个步骤

$(".ystep1").nextStep();

//跳转到上一个步骤

$(".ystep1").prevStep();

//跳转到指定步骤

$(".ystep1").setStep(2);

//获取当前在第几步

$(".ystep1").getStep();

完整示例

html>

ystep流程、步骤插件 ―― Powerd By YangYuan

//根据jQuery选择器找到需要加载ystep的容器

//loadStep 方法可以初始化ystep

$(".ystep1").loadStep({

//ystep的外观大小

//可选值：small,large

size: "small",

//ystep配色方案

//可选值：green,blue

color: "green",

//ystep中包含的步骤

steps: [{

//步骤名称

title: "发起",

//步骤内容(鼠标移动到本步骤节点时，会提示该内容)

content: "实名用户/公益组织发起项目"

},

{

title: "审核",

content: "乐捐平台工作人员审核项目"

},

{

title: "募款",

content: "乐捐项目上线接受公众募款"

},

{

title: "执行",

content: "项目执行者线下开展救护行动"

},

{

title: "结项",

content: "项目执行者公示善款使用报告"

}]

});

//跳转到下一个步骤

//$(".ystep1").nextStep();

//跳转到上一个步骤

//$(".ystep1").prevStep();

//跳转到指定步骤

//$(".ystep1").setStep(2);

//获取当前在第几步

//$(".ystep1").getStep();