JavaScript を使用して一般的なウィザードを作成する_JavaScript スキル

1. インターフェイス設計
index.html: ウィザードの表示位置のプレースホルダーのみを提供します

コードをコピー コードは次のとおりです以下:

ギフト推奨ガイド





🎜>
style.css: デフォルトでは、ウィザードには h2 で表されるタイトル、ul で表されるメインコンテンツ、および div で表されるボタンバーがあります。実際のアプリケーションでは、これらのデフォルトの外観をデザインしただけです。自由に装飾してください。

コードをコピー

コードは次のとおりです。 body{ margin:0; } /*ウィザードコンテナ*/

#wizard{

高さ:400px;
幅:600px;
背景色:#999; /*wizard メインコンテンツをリストに表示します*/
#wizard ul{
margin:10px;
height:80%;
}
/*リストのコンテンツを水平に表示します*/
# ウィザード li{
display:inline-block;
cursor:pointer;
}
/*リストのタイトル*/
#wizard h2{
margin:10px;
}
/*戻るボタンなどのリストの機能バー*/
#wizard .bar{
margin:10px; clear:both;
}


2. 各ステップを準備する

ウィザードは、コンテンツを表示し、ユーザーの選択を取得し、タイトルを提供する必要があります。お客様はご自身の責任を負いますが、当社が定めるいくつかの契約には従わなければなりません。

各ステップは関数で表されます。最初のパラメータ data_key は、このステップのデータを選択するためのキーワードで、通常、次のステップでデータを表示するために前のステップの結果を決定するために使用されます。 2 番目のパラメータ result_callback これは、このステップで結果が取得されたときに呼び出されるコールバック関数です。ウィザード クラスは、前のステップの結果を取得した後、その結果を格納してジャンプします。次のステップ。

この関数はタプルを返します。最初の要素はこのステップのタイトルで、2 番目の要素はこのステップの主要部分の UI です。

私たちの例は、3 つのステップに分かれているギフト推薦システムです。最初のステップはギフトの受取人を選択することであり、2 番目のステップは最初のステップの選択結果に影響します。 2 番目のステップの表示は、3 つのステップで価格範囲を選択します。 以下は、操作を簡略化するために、描画インターフェイスとイベント キャプチャを使用するコードの実装です。

コードをコピー


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


function step1(data_key, result_callback){

var ターゲット = ['ガールフレンド','ボーイフレンド','父親','母親','子供'] var warpper = $('

') $ .each(targets, function(k,v){ $('

' v '

').click(function(){result_callback(v)}).appendTo(warpper ) ; }); return ['ステップ 1: ギフトの受取人を選択してください',warpper]; function step2(data_key, result_callback){

var tags = {

'ガールフレンド': ['クリエイティブ'、'かわいい'、'ロマンチック'、'情熱'、'実用的'、'デジタル'、
'自作'、'ぬいぐるみ'、'洋服' 、'バッグ']、
'ボーイフレンド':['メンズ製品'、'暖かさ'、'実用的'、'デジタル'、'クリエイティブ'、'衣類']、
'父親':['メンズ製品','健康','植物','衣類'],
'お母さん':['暖かさ','健康','クリエイティブ','スキンケア','実用'],
'キッズ:['おもちゃ','学用品','実用','デジタル']
}
var warpper = $('

')
$ .each(tags[data_key], function(k,v){
$('

' v '

').click(function(){result_callback(v)}).appendTo (ワーッパー);
});
return ['ステップ 2: キーワードを選択してください',warpper];
関数 step3(data_key, result_callback){
var 価格_レベル = [ '安い', '普通', '少し高い', '高い'];
var Wrapper = $('

')
$.each(price_level, function (k ,v){
$('

' v '

').click(function(){result_callback(v)}).appendTo(warpper);
return ['ステップ 3: 価格帯を選択してください',warpper]
}


3. ウィザード クラスの実装

ウィザード クラスは、ウィザードが配置される DOM 要素、実行されるステップのリスト、ウィザードの完了後に実行されるコールバックを設定する必要があります。ウィザードは前のステップと次のステップのメソッドも提供する必要があるため、ウィザードを表すクラスを使用し、コンストラクターで DOM コンテナー、ステップ リスト、およびコールバック関数を渡し、プロトタイプを使用して 3 つのメソッドをクラスに追加します。 。 Render は、特定のステップの UI を表示し、このステップで収集された結果のコールバックで次のステップにプッシュするために使用されます。このステップが最後のステップである場合、ウィザードの実行完了のコールバック関数が呼び出されます。

他の 2 つの next 関数と back 関数は、それぞれ前のステップと次のステップを実行します。これら 2 つの関数は、index のプライベート変数を使用してウィザード全体の状態を維持します。

コードをコピーします コードは次のとおりです:

function Wizard(container,steps, callback){
this.container =コンテナ; // ウィザードコンテナ
this.steps = ステップ; // ウィザードのステップ
this.callback = callback; // ウィザードの実行後のコールバック
this.collect_data = [];ウィザードの各ステップの結果
this.index = -1; //現在実行されているステップ
}
//特定のステップを描画します
Wizard.prototype.render = function(step, this_result){
var me = this;
//このステップを実行し、このステップの UI を取得します
var to_append = step(this_result,function(result){
me.collect_data.push( result); //このステップを収集します Result
//ウィザードが完了するとコールバック関数が呼び出され、それ以外の場合は次のステップが実行されます
if(me.collect_data.length == me.steps.length)
me.callback(me.collect_data);
else
me.next(result);
// このステップの UI を描画します
this.container.empty ();
this.container.append("

" to_append[0] "

");
this.container.append(to_append[1]); (this.index > 0){
// 戻るボタン
this.container.append($("

Back

")
.click(function(){me.back()}
));
}
}
//次を実行step
Wizard.prototype.next = function(this_result) {
if(this.index >= this.steps.length -1)
return;
var step = this.steps[ this .index];
this.render(step,this_result );
}
//前のステップに戻ります
Wizard.prototype.back = function(){
if(this .index return;
var step = this.steps[--this.index]
//ステップは前のステップに戻りますが、前のステップのデータが必要です前のステップの結果によって決定されます
this.collect_data = this.collect_data.slice( 0, this.index);
this.render(step, this.collect_data[this.index - 1]) ;
}


4. 概要

このウィザードはシンプルな構造を持ち、JavaScript の関数型プログラミング機能とオブジェクト指向機能を組み合わせています。 JavaScript の威力と利便性。

ウィザード クラスのインターフェイス描画部分とステップ関数のインターフェイス描画部分の間にはまだ結合が残っています。リファクタリングを続けると、すべてのインターフェイス描画部分をまとめて抽象化し、インターフェイスをさらに変更できます。便利。