Junit的博客

世界上一切语言都是苍白的,唯有执行力。

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

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

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

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

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

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

简介
  

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

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

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

体积小巧,便于集成。

代码稳重,安全可靠。

自由定制,步骤无限制。

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

效果与代码

 

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

源码

 代码如下
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>
 
阅读更多
个人分类: jq
上一篇JAVA事务的概念
下一篇springMVC 中的JstlView。
想对作者说点什么? 我来说一句

jquery-steps demo

2017年08月31日 44KB 下载

jquery steps Demo

2017年03月30日 556KB 下载

没有更多推荐了,返回首页

关闭
关闭