欢迎光临一流素材网,免积分免费素材下载!
AD
当前位置:首页 > JS代码 > 其它代码

流程步骤图插件

所属栏目:其它代码更新时间:2016-08-03原作者:不详发布者:deepdfhy浏览:0
基本信息
  • 发布者:
  • 原作者:不详
  • 来源:不详
  • 版权声明


ystep 流程、步骤插件

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

  

简介

-------------

  

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

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

  

特点

-------------

  

设计简洁,方便易用。  

体积小巧,便于集成。  

代码稳重,安全可靠。  

自由定制,步骤无限制。

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

  

使用说明

-------------

  

引入ystep的`js`、`css`文件 

   <!-- 引入ystep样式 -->     
   <link rel="stylesheet" href="css/ystep.css">     
   <!-- 引入jquery -->     
   <script src="js/jquery.min.js"></script>     
   <!-- 引入ystep插件 -->     
   <script src="js/ystep.js"></script>

加载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();

完整示例

 <!DOCTYPE html>     
 <html>      
  <head>         
  <title>ystep流程、步骤插件 —— Powerd By YangYuan</title>         
  <meta name="keywords" content="ystep,jQuery流程、步骤插件"/>         
  <meta name="description" content="ystep,jQuery流程、步骤插件"/>         
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">         
  <meta name="viewport" content="width=device-width, initial-scale=1.0">        
   <!-- 引入ystep样式 -->         
   <link rel="stylesheet" href="css/ystep.css">       
   </head>       
   <body>             
    <br><br><br><br><br>       
    <!-- ystep容器 -->       
    <div class="ystep1"></div>              
    <!-- 引入jquery -->      
     <script src="js/jquery.min.js"></script>      
      <!-- 引入ystep插件 -->       
      <script src="js/ystep.js"></script>      
       <script>        
        //根据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();               
                                         </script>       
                                         </body>     
                                         </html>




具体效果请看演示,一流资源网推荐下载。

标签:
代码下载
本站下载
收藏 0 有帮助 0 没帮助 0
请站长喝杯咖啡?

站长一直坚持白天工作、晚上熬夜更新素材,付出了巨大的精力和时间,其中的辛酸难以言述。

如果本站素材对你有用,不妨考虑请站长喝杯咖啡鼓励一下!

立即打赏 0
给个评价吧
最受欢迎的

1JS动态五星评分插件代码

2淘宝商品jQuery列表多条件查询特效代码

3兼容所有浏览器的设为首页收藏本站js代码

4JS实现文字替换成图片或者其它内容

5js实现网页多个div定时轮流显示的代码

6IE6旧版浏览器提示升级代码模板下载

7SimplePager-非常简洁优秀的 jQuery 分页插件-同页面可重复使用

8后台登录jquery网页全屏背景图片自动切换代码

9百度404页面JS倒计时返回页面代码

10jQuery公司大事记、历程时间轴专用代码

最新更新的

1JS点击加大/减小字号的代码

2jQuery点击展开与收缩查看更多效果代码

3JqueryPagination分页插件

4一款漂亮方便调用的jQuery前端分页

5JS返回上一页/返回上一页并刷新

6百度404页面JS倒计时返回页面代码

7JS赋值给指定元素的父级元素

8JS实现301跳转的JS代码

9JS拆分文本再组合

10Jquery点击按钮给class设置样式的JS代码