← 動的パーツギャラリーへ戻る

パーツ番号 10-07-10 ・ JavaScript使用

空席マップ選択(座席指定風)

グリッド状の座席から複数選択できるUI、選択済みは色が変わる。上映会やセミナーの座席指定予約に使える。

js

プレビュー

ソースコード

HTML

<div class="d10-07-10-wrap">
          <div class="d10-07-10-screen">SCREEN</div>
          <div class="d10-07-10-seats">
            <span class="d10-07-10-seat is-taken"></span><span class="d10-07-10-seat"></span><span class="d10-07-10-seat"></span><span class="d10-07-10-seat is-taken"></span><span class="d10-07-10-seat"></span><span class="d10-07-10-seat"></span>
            <span class="d10-07-10-seat"></span><span class="d10-07-10-seat"></span><span class="d10-07-10-seat is-taken"></span><span class="d10-07-10-seat"></span><span class="d10-07-10-seat"></span><span class="d10-07-10-seat"></span>
            <span class="d10-07-10-seat"></span><span class="d10-07-10-seat"></span><span class="d10-07-10-seat"></span><span class="d10-07-10-seat"></span><span class="d10-07-10-seat is-taken"></span><span class="d10-07-10-seat"></span>
          </div>
          <p class="d10-07-10-info">選択中の座席: <b class="d10-07-10-count">0</b>席</p>
        </div>

CSS

.d10-07-10-wrap{width:100%;max-width:220px;text-align:center;}
        .d10-07-10-screen{font-size:9px;letter-spacing:2px;color:#999;background:#eee;border-radius:0 0 12px 12px;padding:4px 0;margin-bottom:14px;}
        .d10-07-10-seats{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;}
        .d10-07-10-seat{width:100%;aspect-ratio:1/1;background:#e4ecff;border-radius:4px 4px 6px 6px;cursor:pointer;border:1px solid #cfe0ff;}
        .d10-07-10-seat.is-selected{background:#2f6fed;border-color:#2f6fed;}
        .d10-07-10-seat.is-taken{background:#e0e0e0;border-color:#e0e0e0;cursor:not-allowed;}
        .d10-07-10-info{font-size:11px;color:#666;margin-top:12px;}
        .d10-07-10-count{color:#2f6fed;font-size:13px;}

JavaScript

(function(){
          var root = document.querySelector('.d10-07-10');
          var countEl = root.querySelector('.d10-07-10-count');
          root.querySelectorAll('.d10-07-10-seat:not(.is-taken)').forEach(function(seat){
            seat.addEventListener('click', function(){
              seat.classList.toggle('is-selected');
              countEl.textContent = root.querySelectorAll('.d10-07-10-seat.is-selected').length;
            });
          });
        })();

クラス名 .d10-07-10 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。