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)
var $stepbuttonhtml =
$(stepbuttonhtml);
//插入到容器中
//繫結兩個按鈕
$("#prevbtn"
).click(function
());
$("#nextbtn"
).click(function
()$n.nextstep();
params.afterchange(index+1
,index);
});//預設執行第乙個步驟
$n.setstep(1);
});},
由於去除了一些不使用的引數，這樣修改後，頁面使用的時候直接繫結三個變數就可以了：

$(".ystep").loadstep(,

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

content="text/html;charset=utf-8">
rel="stylesheet"
href="css/bootstrap.css">
rel="stylesheet"
href="css/ystep.css">
head>
class="ystep">
div>
 
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 這是乙個靈活的嚮導外掛程式，可以將內容分成幾部分，以節省頁面空間。同時，還...