jQuery ステップ進行軸プラグインの実装コード

毎日のjQueryプラグイン - ステップ進捗軸ステップ進捗軸

ツール系のサイトでは入門チュートリアルやアカウント登録のときにこの構造になっているものが多いので試しに作ってみました。コールバックアクションも使えると思います。

効果は以下のとおりです

ここに画像の説明を挿入

コードセクション

*{
	マージン: 0;
	パディング: 0;
}
#div{
	幅: 90%;
	高さ: 50px;
	マージン: 10px 自動;
	ディスプレイ: フレックス;
	コンテンツの中央揃え: 中央;
	アイテムの位置を中央揃えにします。
}
＃箱{
	幅: 90%;
	高さ: 100px;
	境界線: 1px 実線のライトグレー;
	マージン: 10px 自動;
	ディスプレイ: フレックス;
	コンテンツの中央揃え: 中央;
	アイテムの位置を中央揃えにします。
	位置: 相対的;
}
。箱{
	位置: 絶対;
	幅: 100%;
	高さ: 100%;
	上: 0;
	左: 0;
	ディスプレイ: フレックス;
	コンテンツの中央揃え: 中央;
	アイテムの位置を中央揃えにします。
	背景色: 黒;
	色: 白;
}
.tbar{
	幅: 90%;
	高さ: 6px;
	境界線の半径: 5px;
	背景色: ライトグレー;
	ディスプレイ: フレックス;
	アイテムの位置を中央揃えにします。
	位置: 絶対;
}
。バー{
	幅: 100%;
	高さ: 50%;
	境界線の半径: 5px;
	背景色: #1abc9c;
	遷移: すべて 0.2 秒線形。
}
。ドット{
	位置: 絶対;
	幅: 12px;
	高さ: 12px;
	境界線の半径: 50%;
	背景色: ライトグレー;
	カーソル: ポインタ;
	ディスプレイ: フレックス;
	コンテンツの中央揃え: 中央;
	アイテムの位置を中央揃えにします。
}
.dot:ホバー{
	遷移: すべて 0.5 秒の線形。
	背景色: #1abc9c;
}
.dot.check{
	背景色: #1abc9c;
}
.dot .txt{
	上: 100%;
	フォントサイズ: 12px;
	位置: 絶対;
	幅: 100ピクセル;
	テキスト配置: 中央;
}

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="utf-8">
		<title>ステップ進捗軸</title>
		<script src="js/jquery-3.4.1.min.js"></script>
		<script src="js/bzjdz.js"></script>
		<link href="css/bzjdz.css" rel="外部nofollow" rel="スタイルシート" type="text/css" />
	</head>
	<本文>
		<div id="div">
			
		</div>
		<div id="ボックス">
			<div class="box" id="box1" style="background-color: #1abc9c;">ステップ 1</div>
			<div class="box" id="box2" style="background-color: #3498db;">ステップ 2</div>
			<div class="box" id="box3" style="background-color: #f1c40f;">ステップ 3</div>
			<div class="box" id="box4" style="background-color: #e74c3c;">ステップ 4</div>
			<div class="box" id="box5" style="background-color: #9b59b6;">ステップ 5</div>
		</div>
	</本文>
</html>
<スクリプト>
	$(関数(){
		$("#div").タイムライン({
			データ：[
				{name:'ステップ 1',id:'#box1',click:hide},
				{name:'ステップ 2',id:'#box2',click:hide},
				{name:'ステップ 3',id:'#box3',click:hide},
				{name:'ステップ 4',id:'#box4',click:hide},
				{name:'ステップ 5',id:'#box4',click:hide},
			]
		})
	})
	関数hide(item){
		$(".box").非表示();
		$(item.id).show();
	}
</スクリプト>

$.prototype.timeline = function(op){
	コンソールにログ出力します。
	var $that = $(this);
	var $tbar =$("<div class='tbar'></div>");
	var $bar =$("<div class='bar'></div>");
	$bar.appendTo($tbar)
	$tbar.appendTo($that);
	var length = op.data.length; //要素の長さ var index = 0; //現在のステップ op.data.forEach((item,index)=>{
		var per = getper(インデックス,長さ)
		var $dot = $("<div class='dot' data-index='"+index+"'><div class='txt'>"+item.name+"</div></div>");
		$dot.appendTo($tbar);
		$dot.css('left',"calc("+per+"% - 6px)")
	})
	//クリックイベント $that.find('.dot').click(function(){
		インデックス = parseInt($(this).attr('data-index'));
		//対応するメソッドを実行します click();
	})
	クリック（）;
	関数クリック(){
		//コールバック var item = op.data[index];
		アイテムをクリックします。
		//アニメーションスタイル var per = getper(index,length)
		$bar.css('幅',per+'%')
		//ボタン選択コントロール op.data.forEach((item,i)=>{
			if(i<=インデックス){
				$tbar.find(".dot[data-index='"+i+"']").addClass('チェック');
			}それ以外{
				$tbar.find(".dot[data-index='"+i+"']").removeClass('check');
			}
		})
	}
	関数 getper(i,l){
		var temp = 0;
		i!=0&&i!=l-1の場合{
			temp = i/(l-1)*100//おおよその距離を計算する }else if(i==l-1){
			温度 = 100
		}
		温度を返します。
	}
}

アイデアの説明

必要な作業は非常に簡単です。タイムラインを描き、対応するポイントをマークし、対応するイベントがトリガーされたときにコールバックを正しく呼び出します。タイムラインはこのように描かれます。パーセンテージが満たされると、他には何もありません。次に、進行状況を変更するポイントをキャンパスポイントから分離します。小さなドットをクリックすると、現在の構造マークが変更され、その後、アニメーション効果とコールバックを同時に実行するイベントがトリガーされます。
終了、休憩

上記は、jQuery ステップ進捗軸プラグインの実装コードの詳細な内容です。jQuery ステップ進捗軸の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません: