jquery 流程图 插件 免费 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();