相信大家都看過類似的網站功能,這種形式的進度顯示可以很方便的讓使用者去理解和操作,
以下是插件的測試截圖 ,提供了兩個皮膚
使用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代碼