如果使用過JQuery Steps的朋友一定會發現這個插件有一個缺點，就是頁面在第一次進入的時候，會進行一次很明顯的DOM重繪——頁面會閃一下。
尤其是前端代碼比較龐大的時候，效果更為明顯。
為了解決這個問題，就想使用點輕量級的流程向導。於是網上搜了下，恰好園友有這樣一個插件，感謝楊元
不過使用起來還是有點不太喜歡的地方：
- 1 tooltip樣式比較簡陋，不好看.
- 2 間距太窄了，沒有響應式.
- 3 缺少一些上一步下一步的觸發動作以及校驗.
因此就根據ystep的源碼以及JQuery.steps的流程，設計出了下面的插件。雖然使用上還不是完善，但是基本已經能滿足JQuery.steps的要求了。
為什么說閹割版呢！主要是因為是從別人的代碼上閹割下來的，所以再次對原作者表示感謝！
無圖無真相：
喜歡的朋友，可以在github上找到代碼，猛戳這里就行！
ystep淺談
於是首先先閱讀了下楊元朋友的源碼，去掉了tooltip，代碼一下子少了很多。
主要的結構如下
(function($){
$.fn.extend({
//初始化
loadStep: function(params){},
//跳轉到指定步驟
setStep: function(step) {},
//獲取當前步驟
getStep: function() {},
//下一個步驟
nextStep: function() {},
//上一個步驟
prevStep: function() {},
//通用節點查找
_searchStep: function (callback) {}
});
})(jQuery);
原理可以參考下面的圖：
說白了就是一些僅顯示為圓圈的LI元素，加上一個進度條。
進度條會按照當前索引的位置，顯示進度！
源碼修改
這里沒有在計算的過程中去增加響應式，而是直接使用@media設置樣式。這樣方便使用的時候根據當前頁面的流程節點的個數進行設置寬度。
@media (min-width: 1200px) {
/*調節總的寬度*/
.ystep-lg {
width: 800px;
}
/*調節進度條寬度*/
.ystep-lg .ystep-progress, .ystep-lg .ystep-progress-bar {
width: 600px;
}
/*調節各個原點之間的跨度*/
.ystep-lg li {
margin-right: 100px;
}
/*調節按鈕位置*/
.step-button{
left: 800px;
}
}
在原有的基礎上增加按鈕以及校驗代碼：
loadStep: function(params){
//基礎框架
var baseHtml = "<div class='ystep-container ystep-lg ystep-blue'>"+
"<ul class='ystep-container-steps'></ul>"+
"<div class='ystep-progress'>"+
"<p class='ystep-progress-bar'><span class='ystep-progress-highlight' style='width:0%'></span></p>"+
"</div>"+
"</div>";
//步驟框架
var stepHtml = "<li class='ystep-step ystep-step-undone'></li>";
var stepButtonHtml = "<div class='step-button'><button type='button' class='btn btn-default prevBtn' id='prevBtn'>上一步</button>"+
"<button type='button' class='btn btn-default nextBtn' id='nextBtn'>下一步</button></div>";
//支持填充多個步驟容器
$(this).each(function(i,n){
var $baseHtml = $(baseHtml),
$stepHtml = $(stepHtml),
$ystepContainerSteps = $baseHtml.find(".ystep-container-steps"),
arrayLength = 0,
$n = $(n),
i=0;
//步驟
arrayLength = params.steps.length;
for(i=0;i<arrayLength;i++){
var _s = params.steps[i];
//構造步驟html
$stepHtml.text(_s);
//將步驟插入到步驟列表中
$ystepContainerSteps.append($stepHtml);
//重置步驟
$stepHtml = $(stepHtml);
}
var $stepButtonHtml = $(stepButtonHtml);
$ystepContainerSteps.append($stepButtonHtml);
//插入到容器中
$n.append($baseHtml);
//綁定兩個按鈕
$("#prevBtn").click(function(){
var index = $n.getStep();
$n.prevStep();
params.afterChange(index-1,index);
});
$("#nextBtn").click(function(){
var index = $n.getStep();
if(!params.beforeChange(index,index+1)){
return;
}
$n.nextStep();
params.afterChange(index+1,index);
});
//默認執行第一個步驟
$n.setStep(1);
});
},
由於去除了一些不使用的參數，這樣修改后，頁面使用的時候直接綁定三個變量就可以了：
$(".ystep").loadStep({
steps:["發起","審核","募款","執行"],
beforeChange: function(nowIndex,nextIndex){},
afterChange: function(nowIndex,prevIndex){}
});
使用幫助
首先，需要引入github中的JS以及CSS等文件，並添加頁面元素，使用class="ystep"進行標識。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/ystep.css">
</head>
<body>
<!-- ystep容器 -->
<div class="ystep"></div>
<!-- 引入jquery -->
<script src="js/jquery.min.js"></script>
<!-- 引入bootstrap -->
<script src="js/bootstrap.min.js"></script>
<!-- 引入ystep插件 -->
<script src="js/ystep.js"></script>
</body>
</html>
其次，在頁面底部增加初始化：
$(".ystep").loadStep({
steps:["發起","審核","募款","執行"],
beforeChange: function(nowIndex,nextIndex){
console.log("跳轉前校驗:"+nowIndex +" "+nextIndex);
if(nowIndex === 1 && nextIndex === 2 ){
return true;
}else if(nowIndex === 2 && nextIndex === 3){
return true;
}else if(nowIndex === 3 && nextIndex === 4){
return true;
}
return true;
},
afterChange: function(nowIndex,prevIndex){
console.log("跳轉后動作:"+nowIndex +" "+prevIndex);
if(nowIndex <1 || nowIndex >5) return;
/*這里可以搭配其他的頁面元素，實現tab頁切換的效果
for(var i = 1; i <= 5; i++){
if(i === nowIndex){
$("#page"+i).css("display","block");
}else{
$("#page"+i).css("display","none");
}
}*/
if(nowIndex === 2 && prevIndex === 1){
}else if(nowIndex === 3 && prevIndex === 2){
}else if(nowIndex === 4 && prevIndex === 3){
}
}
});
最后，調整樣式。在當前頁的CSS文件中，可以自行根據流程節點的數目調整樣式，進行覆蓋。
@media (min-width: 768px) {
/*調節總的寬度*/
.ystep-lg {
width: 400px;
}
/*調節進度條寬度*/
.ystep-lg .ystep-progress, .ystep-lg .ystep-progress-bar {
width: 300px;
}
/*調節各個原點之間的跨度*/
.ystep-lg li {
margin-right: 0px;
}
/*調節按鈕位置*/
.step-button{
left: 400px;
}
}
@media (min-width: 992px) {
/*調節總的寬度*/
.ystep-lg {
width: 600px;
}
/*調節進度條寬度*/
.ystep-lg .ystep-progress, .ystep-lg .ystep-progress-bar {
width: 450px;
}
/*調節各個原點之間的跨度*/
.ystep-lg li {
margin-right: 50px;
}
/*調節按鈕位置*/
.step-button{
left: 600px;
}
}
@media (min-width: 1200px) {
/*調節總的寬度*/
.ystep-lg {
width: 800px;
}
/*調節進度條寬度*/
.ystep-lg .ystep-progress, .ystep-lg .ystep-progress-bar {
width: 600px;
}
/*調節各個原點之間的跨度*/
.ystep-lg li {
margin-right: 100px;
}
/*調節按鈕位置*/
.step-button{
left: 800px;
}
}