jQuery_jqueryをベースにしたWebページ進行状況表示プラグインの実装

このような Web サイトの機能は、ユーザーにとって理解しやすく、操作しやすいものであると思います。

以下は、2 つのスキンを提供するプラグインのテスト スクリーンショットです

JS で書かれたプログレスバーを柔軟に生成して、作業の進行状況を簡単にグラフィカルに表示できます

1. 簡単な呼び出し

//すべてのステップのデータ

var stepListJson=[{StepNum:1,StepText:"最初のステップ"},
{StepNum:2,StepText:"2 番目のステップ"},
{StepNum:3,StepText:"3 番目のステップ"},
{StepNum:4,StepText:"ステップ 4"},
{StepNum:5,StepText:"ステップ 5"},
{StepNum:6,StepText:"ステップ 6"},
{StepNum:7,StepText:"ステップ 7"}];

//現在進行中のステップ

var currentStep=5; //新しいツールクラス
var StepTool = new Step_Tool_dc("test","mycall"); //ツールを使用して、ページ上に関連するプロセス ステップのグラフィック表示を描画します
StepTool.drawStep(currentStep,stepListJson); //コールバック関数
関数 mycall(result){
//alert(“mycall” result.value “:” result.text); StepTool.drawStep(result.value,stepListJson); //TODO...ここで、クリックステップ
の後に対応するデータをロードするコードを入力できます。 }



2. カスタムスキンの変更

プラグインには 2 つの皮膚科オプションが用意されており、要件を満たせない場合は、CSS コードを自分で記述することができます。

HTML コード

コードをコピーします

コードは次のとおりです:

現在のステップ:ステップ再生成