jQuery流程、步骤插件ystep.js使用(一)

stepFirst.html


<html>
<head>
    <title>ystep流程、步骤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">
    
    <link href="Content/ystep.css" rel="stylesheet" />
head>
<body>

    
    <div class="ystep1" style="margin: 100px">div>
    <hr />
    <input id="btnPre" type="button" value="上一步" />
    <input id="btnNext" type="button" value="下一步" />
    
    <script src="Scripts/jquery-1.10.2.js">script>
    
    <script src="Scripts/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: "项目执行者公示善款使用报告"
            }, {
                title: "结项1",
                content: "项目执行者公示善款使用报告"
            }, {
                title: "结项2",
                content: "项目执行者公示善款使用报告"
            }, {
                title: "结项3",
                content: "项目执行者公示善款使用报告"
            }, {
                title: "结项4",
                content: "项目执行者公示善款使用报告"
            }, {
                title: "结项5",
                content: "项目执行者公示善款使用报告"
            }, {
                title: "结项6",
                content: "项目执行者公示善款使用报告"
            }, {
                title: "结项7",
                content: "项目执行者公示善款使用报告"
            }, {
                title: "结项8",
                content: "项目执行者公示善款使用报告"
            }, {
                title: "结项9",
                content: "项目执行者公示善款使用报告"
            }, {
                title: "结项10",
                content: "项目执行者公示善款使用报告"
            }]
        });


        $("#btnPre").click(function () {
      
            //跳转到上一个步骤
            $(".ystep1").prevStep();

        });

        $("#btnNext").click(function () {
      
            //跳转到下一个步骤
            $(".ystep1").nextStep();

        });
        $(".ystep1").setStep(5);

        //跳转到下一个步骤
        //$(".ystep1").nextStep();
        //跳转到上一个步骤
        //$(".ystep1").prevStep();
        //跳转到指定步骤
        //$(".ystep1").setStep(2);
        //获取当前在第几步
        //$(".ystep1").getStep();

    script>
body>
html>

运行结果如图:

jQuery流程、步骤插件ystep.js使用(一)_第1张图片

你可能感兴趣的:(Jquery及其组件,jquery,ystep)