jQuery wizard，一款创建步骤向导的插件

朱雀 2021-05-10 11:18 493阅读 0赞

这篇文章完全没有技术难度，但我为什么要写呢？因为我想把这么好的一款插件推荐给需要的小伙伴。因为在我遇到这款插件之前，一直没有找到合适的（step-by-step wizards）创建步骤向导的插件。

\#\#\#一、下载和效果图  
git的下载地址[https://github.com/amazingSurge/jquery-wizard][https_github.com_amazingSurge_jquery-wizard]。

![这里写图片描述][SouthEast]

我觉得效果还挺不错，不过原生的wizard并没有这么好看，需要加工一点css样式。

/* 步骤 */
    .wizard-steps { 
        display: table;
        width: 100%;
    }
    
    .wizard-steps > li.current, .wizard-steps > li.done { 
        background: #41b3f9;
        color: #ffffff;
    }
    .wizard-steps > li.done { 
        background: #7ace4c;
    }
    .wizard-steps > li { 
        display: table-cell;
        padding: 10px 20px;
        background: #f7fafc;
    }
    .wizard-steps > li.current h4, .wizard-steps > li.done h4 { 
        color: #ffffff;
    }
    .wizard-steps > li.current span, .wizard-steps > li.done span { 
        border-color: #ffffff;
        color: #ffffff;
    }
    .wizard-steps > li span { 
        border-radius: 100%;
        border: 1px solid rgba(120, 130, 140, 0.13);
        width: 40px;
        height: 40px;
        display: inline-block;
        vertical-align: middle;
        padding-top: 9px;
        margin-right: 8px;
        text-align: center;
    }
    .wizard-content { 
        padding: 25px;
        border-color: rgba(120, 130, 140, 0.13);
        margin-bottom: 30px;
    }

\#\#\#二、应用实例  
\#\#\#\#1.引入js和css

\#\#\#\#2.页面布局

\#\#\#\#3.初始化

$("#service_market_step").wizard({ 
    	templates : { 
    		buttons : function buttons() { // 去掉前后的button
    			return '';
    		}
    	},
    });

别的我就不多说了，想用的更高深一点就去钻一钻。

> 看看别家程序员的程序人生吧！

![20190430093935456.jpg][]

[https_github.com_amazingSurge_jquery-wizard]: https://github.com/amazingSurge/jquery-wizard
[SouthEast]: /images/20210506/1d1ad45dd7de41c4bbca8dea184a64f2.png
[20190430093935456.jpg]: /images/20210506/1709dfcb8575417d88074e4d321d3e3c.png