HTML、CSS、JavaScript を使用してレスポンシブなプログレスバーをデザインする方法

上記のコード スニペットでは、以下の方法論を適用します。

• 見出しを作成し、「」を 2 つ含めます。
  」要素を使用してプログレスバーを蓄積します。
• また、「」も含めてください。
  」要素は、最初のバーがアクティブな状態でプログレスバーをステップスルーするオプションで構成されます。
  • 最後に、戻るまたは次のステップに移動するための 2 つのボタンをそれぞれ作成します。

  CSSコード

  
  
  

  ここで、次の CSS コード ブロックの概要を説明します。

  < スタイル タイプ = 「テキスト/CSS」 >
  ＃進捗 {
  位置: 相対的;
  マージン-ボトム: 30px;
  }
  #進捗1 {
  位置: 絶対;
  背景: 緑;
  高さ: 5px;
  幅： 0 % ;
  上： 50 % ;
  左： 0 ;
  }
  #進捗2 {
  マージン： 0 ;
  パディング: 0 ;
  リストスタイル: なし;
  画面： フレックス ;
  コンテンツの位置揃え: 間のスペース;
  }
  #progress2::before {
  コンテンツ： 「」 ;
  背景色: ライトグレー;
  位置: 絶対;
  上： 50 % ;
  左： 0 ;
  高さ: 5px;
  幅： 100 % ;
  z インデックス: -1 ;
  }
  #進捗2 .ステップ {
  境界線: 3 ピクセルのライトグレーの実線。
  境界半径: 100 % ;
  幅: 25px;
  高さ: 25px;
  行の高さ: 25px;
  テキスト整列: 中央;
  背景色: #fff;
  フォントファミリー: サンセリフ;
  フォントサイズ: 14px;
  位置: 相対的;
  z インデックス: 1 ;
  }
  #progress2 .step.active {
  境界線の色: 緑;
  背景色: 緑;
  色： #fff;
  }
  スタイル >

  このコードでは:

  • プログレスバーの相対位置と、その下にある子要素の絶対位置を調整します。
  • また、次のステップに切り替える前に、デフォルトの色で構成され、次のステップに進むと別の色に遷移するように進行状況バーのスタイルを設定します。
  • これはスタイリングによって実現されます。つまり、「 背景色 」など、サークル内の非アクティブなステップとアクティブなステップのそれぞれ。

  JavaScript コード

  最後に、以下に示すコード ブロックに注意してください。

  < 脚本 タイプ = 「テキスト/JavaScript」 >
  させて xBar = document.getElementById ( 「進捗1」 ) ;
  させて xNext = document.getElementById ( 「プログレスネクスト」 ) ;
  させて xPrev = document.getElementById ( 「進歩」 ) ;
  させて ステップ = document.querySelectorAll ( '。ステップ' ) ;
  させて アクティブ = 1 ;
  xNext.addEventListener ( 'クリック' 、 ( ) = < {
  アクティブ++;
  もし ( アクティブ < ステップの長さ ) {
  アクティブ = ステップの長さ;
  }
  レスポンシブな進捗状況 ( ) ;
  } ) ;
  xPrev.addEventListener ( 'クリック' 、 ( ) = < {
  アクティブ - ;
  もし ( アクティブ > 1 ) {
  アクティブ = 1 ;
  }
  レスポンシブな進捗状況 ( ) ;
  } ) ;
  const 応答進行状況 = ( ) = < {
  それぞれのステップ ( ( ステップ、私 ) = < {
  もし ( 私 > アクティブ ) {
  step.classList.add ( 'アクティブ' ) ;
  } それ以外 {
  step.classList.remove ( 'アクティブ' ) ;
  }
  } ) ;
  xBar.style.width =
  ( ( アクティブ - 1 ) / ( ステップの長さ - 1 ) ) * 100 + 「%」 ;
  もし ( アクティブ === 1 ) {
  x前の無効化 = 真実 ;
  } それ以外 もし ( アクティブ === ステップ.長さ ) {
  xNext.disabled = 真実 ;
  } それ以外 {
  x前の無効化 = 間違い ;
  xNext.disabled = 間違い ;
  }
  } ;
  脚本 >

  これらのコード行では次のようになります。

  • まず最初に、プログレスバーと、「前へ」ボタンと「次へ」ボタンを呼び出します。 ID ”を使用して” getElementById() ' 方法。
  • その後、「」を適用します。 addEventListener() ” メソッドがトリガーされると、” クリック ” イベントでは、アクティブなステップは、「」を介してステップが完了するまで走査されます。 長さ ' 財産。
  • 同様に、手順を逆に進みます。
  • また、「」を呼び出します。 応答進行状況() 」関数は、各ステップをループし、「if/else」ステートメントを介してアクティブなクラスを切り替えます。
  • ここで、進行状況バーの幅を、アクティブなステップと合計/すべてのステップに対するパーセンテージとして割り当てます。
  • 最後に、アクティブなステップが最初または最後のステップである場合は、対応するボタンを無効にします。

  注記： この場合、コード全体は、「」の専用タグを持つ同じ HTML ファイルに含まれています。 CSS ' そして ' JavaScript ”コード。ただし、個別のファイルをリンクすることもできます。

  出力

  

  結論

  応答性の高いステップ進行状況バーは、大きなフォームが複数のステップに分割されている場合に有効になり、HTML、CSS、JavaScript を使用してデザインできます。このプログレス バーは、要件に応じてさらにカスタマイズすることもできます (ステップの追加や削除など)。この記事では、HTML、CSS、JavaScript を使用したレスポンシブ バーのデザインについて詳しく説明しました。