首页 | 3129 | 108 | 1122 | 添加收藏 上一个 下一个
流程图工具

ystep 流程、步骤插件


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


b


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


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


特点


设计简洁,方便易用。


体积小巧,便于集成。


代码稳重,安全可靠。


自由定制,步骤无限制。


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


使用说明


引入ystep的jscss文件


<!-- 引入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>