JQuery嚮導外掛程式Step 第乙個閹割版外掛程式

如果使用過jquery steps的朋友一定會發現這個外掛程式有乙個缺點，就是頁面在第一次進入的時候，會進行一次很明顯的dom重繪——頁面會閃一下。

尤其是前端**比較龐大的時候，效果更為明顯。

不過使用起來還是有點不太喜歡的地方：

因此就根據ystep的原始碼以及jquery.steps的流程，設計出了下面的外掛程式。雖然使用上還不是完善，但是基本已經能滿足jquery.steps的要求了。

為什麼說閹割版呢！主要是因為是從別人的**上閹割下來的，所以再次對原作者表示感謝！

無圖無真相：

於是首先先閱讀了下楊元朋友的原始碼，去掉了tooltip，**一下子少了很多。

主要的結構如下

(function($),

//跳轉到指定步驟
setstep: function(step) {},
//獲取當前步驟
getstep: function() {},
//下乙個步驟
nextstep: function() {},
//上乙個步驟
prevstep: function() {},
//通用節點查詢
說白了就是一些僅顯示為圓圈的li元素，加上乙個進度條。
進度條會按照當前索引的位置，顯示進度！
這裡沒有在計算的過程中去增加響應式，而是直接使用@media設定樣式。這樣方便使用的時候根據當前頁面的流程節點的個數進行設定寬度。
@media (min-width: 1200px) 

/*調節進度條寬度*/
.ystep-lg .ystep-progress, .ystep-lg .ystep-progress-bar 
/*調節各個原點之間的跨度*/
.ystep-lg li 
/*調節按鈕位置*/
.step-button
}
在原有的基礎上增加按鈕以及校驗**：

loadstep: function(params),

afterchange: function(nowindex,previndex){}
});
首先，需要引入github中的js以及css等檔案，並新增頁面元素，使用class="ystep"進行標識。

其次，在頁面底部增加初始化：
$(".ystep").loadstep(else if(nowindex === 2 && nextindex === 3)else if(nowindex === 3 && nextindex === 4)

return true;
},afterchange: function(nowindex,previndex)else
}*/if(nowindex === 2 && previndex === 1)else if(nowindex === 3 && previndex === 2)else if(nowindex === 4 && previndex === 3)
}});
最後，調整樣式。在當前頁的css檔案中，可以自行根據流程節點的數目調整樣式，進行覆蓋。
@media (min-width: 768px) 

/*調節進度條寬度*/
.ystep-lg .ystep-progress, .ystep-lg .ystep-progress-bar 
/*調節各個原點之間的跨度*/
.ystep-lg li 
/*調節按鈕位置*/
.step-button
}@media (min-width: 992px) 
/*調節進度條寬度*/
.ystep-lg .ystep-progress, .ystep-lg .ystep-progress-bar 
/*調節各個原點之間的跨度*/
.ystep-lg li 
/*調節按鈕位置*/
.step-button
}@media (min-width: 1200px) 
/*調節進度條寬度*/
.ystep-lg .ystep-progress, .ystep-lg .ystep-progress-bar 
/*調節各個原點之間的跨度*/
.ystep-lg li 
/*調節按鈕位置*/
.step-button
}
 
JQuery嚮導外掛程式Step 第乙個閹割版外掛程式
如果使用過jquery steps的朋友一定會發現這個外掛程式有乙個缺點，就是頁面在第一次進入的時候，會進行一次很明顯的dom重繪 頁面會閃一下。尤其是前端 比較龐大的時候，效果更為明顯。為了解決這個問題，就想使用點輕量級的流程嚮導。於是網上搜了下，恰好園友有這樣乙個外掛程式，感謝楊元 不過使用起來...
jquery怎麼修改step屬性
jquery修改step屬性的方法 1 利用 需要修改step屬性的元素 獲取指定的元素物件 2 利用 元素物件.attr step step修改後的值 將指定元素的step屬性值修改即可。本教程操作環境 windows10系統 jquery3.2.1版本 dell g3電腦。1 利用 獲取指定的元...
6 個基於 jQuery 的表單嚮導外掛程式推薦
表單嚮導可以很好地引導使用者進行一步一步的操作，從而降低使用者錯誤輸入的機率。儘管網際網路中有大量的類似外掛程式，但真正好用的不多。本文整理了6個比較優秀的表單嚮導外掛程式，希望能夠為你帶來幫助。1.smart wizard 這是乙個靈活的嚮導外掛程式，可以將內容分成幾部分，以節省頁面空間。同時，還...