基於jQuery實作網頁進度顯示外掛_jquery

相信大家都看過類似的網站功能，這種形式的進度顯示可以很方便的讓使用者去理解和操作，

以下是插件的測試截圖 ，提供了兩個皮膚

使用js編寫 可以靈活的生成進度條 方便進對一些工作進度進行圖形顯示

1、簡單的呼叫

//所有步驟的資料
var stepListJson=[{StepNum:1,StepText:「第一步」},
{StepNum:2,StepText:"第二步"},
{StepNum:3,StepText:"第三步"},
{StepNum:4,StepText:"第四步"},
{StepNum:5,StepText:"第五步"},
{StepNum:6,StepText:"第六步"},
{StepNum:7,StepText:"第七步"}];

//目前進行到第幾步
var currentStep=5;
//new一個工具類別
var StepTool = new Step_Tool_dc(“test”,“mycall”);
//使用工具對頁面繪製相關流程步驟圖形顯示
StepTool.drawStep(currentStep,stepListJson);
//回呼函數
function mycall(restult){
// alert(“mycall” result.value “:“ result.text);
StepTool.drawStep(result.value,stepListJson);
//TODO…這裡可以填入點擊步驟的後載入相對應資料的程式碼
}

2、自訂皮膚修改

外掛提供了兩套皮膚科共選擇如果不能滿足您的要求，則自己編寫CSS程式碼即可

html代碼

複製程式碼 程式碼如下:

目前步驟：第步驟重新生成