jQuery ystep插件实现多流程分步、多步骤

jQuery ystep插件实现多流程分步、多步骤

时间：2014-06-11 00:00:00 编辑：简简单单 来源：转载

今天小菜给大家带来又一款给力Jquery插件：ystep。

从名称上大致可以看出，这是一个流程步骤插件。

如果无意外的话，这可能是小菜近期最后一个作品了。。。苦逼的小菜即将创业，可能就没时间折腾啦~好，废话少说~

简介
  

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

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

特点
 
设计简洁，方便易用。

体积小巧，便于集成。

代码稳重，安全可靠。

自由定制，步骤无限制。

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

效果与代码

 

源码

代码如下

1   2               3   4   5   6   7   8     $(".ystep2").loadStep({       size: "large",       color: "green",       steps: [{         title: "发起",         content: "实名用户/公益组织发起项目"       },{         title: "审核",         content: "乐捐平台工作人员审核项目"       },{         title: "募款",         content: "乐捐项目上线接受公众募款"       },{         title: "执行",         content: "项目执行者线下开展救护行动"       },{         title: "结项",         content: "项目执行者公示善款使用报告"       }]     });         $(".ystep3").loadStep({       size: "small",       color: "blue",       steps: [{         title: "发起",         content: "实名用户/公益组织发起项目"       },{         title: "审核",         content: "乐捐平台工作人员审核项目"       },{         title: "募款",         content: "乐捐项目上线接受公众募款"       },{         title: "执行",         content: "项目执行者线下开展救护行动"       },{         title: "结项",         content: "项目执行者公示善款使用报告"       }]     });         $(".ystep4").loadStep({       size: "large",       color: "blue",       steps: [{         title: "发起",         content: "实名用户/公益组织发起项目"       },{         title: "审核",         content: "乐捐平台工作人员审核项目"       },{         title: "募款",         content: "乐捐项目上线接受公众募款"       },{         title: "执行",         content: "项目执行者线下开展救护行动"       },{         title: "结项",         content: "项目执行者公示善款使用报告"       }]     });         $(".ystep1").setStep(2);     $(".ystep2").setStep(5);     $(".ystep3").setStep(3);       </script>