关闭

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

251人阅读 评论(0) 收藏 举报
分类:

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>
 
0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

css+jquery步骤进度条

progressbar .progress-wrap { margin-top: 200px; padding: 0px; width: 100%; height: 100px; } .p...
  • u014788227
  • u014788227
  • 2016-08-16 12:28
  • 2126

EasyUI+JQuery轻松实现步骤条效果

最近加入一个新的项目组,组长对我好。。。严厉啊!哼,就给了一天时间看看需求,直接是上手实现功能。但是聪明如我,积极主动的去找组长给我讲了讲框架,大概的懂了懂,一天半的时间实现了一个前台的小功能,给大家...
  • u012904383
  • u012904383
  • 2015-11-15 23:07
  • 3545

jquery异步文件上传插件ajaxFileUpload教程(支持多文件上传)

ajaxFileUpload是一款基于jquery的ajax上传方式的文件上传插件,它没有对上传控件作美化(使用原生态的上传控件),只是提供了异步上传的功能,但用它来作异步上传确实很简单和方便。下来我...
  • qq_33556185
  • qq_33556185
  • 2016-02-18 18:41
  • 2734

11 个超棒的 jQuery 分步指引插件

当一个网站或者一个Web应用推出新功能时,为了让用户了解你的站点(或应用)如何操作,往往都会在站点(应用)中添加一个分步指引的效果。然而这样的效果,对于不懂原生JS的同学来说,是件很头痛的事情。 ...
  • daditao
  • daditao
  • 2013-11-11 14:09
  • 1026

简单流程、步骤插件

  • 2015-06-11 22:35
  • 53KB
  • 下载

jQuery实现一个滚动的分步注册向导

  • 2012-10-30 23:14
  • 4KB
  • 下载

jQuery实现一个滚动的分步注册向导

  • 2015-03-10 21:27
  • 55KB
  • 下载

基于jquery的流程插件

  • 2017-11-15 11:41
  • 52KB
  • 下载

jQuery插件的开发流程

  • 2011-12-21 09:37
  • 149KB
  • 下载

jQuery插件的开发流程

  • 2011-10-05 15:26
  • 152KB
  • 下载
    个人资料
    • 访问:8877次
    • 积分:707
    • 等级:
    • 排名:千里之外
    • 原创:31篇
    • 转载:20篇
    • 译文:27篇
    • 评论:1条
    文章分类
    文章存档