jQueryで劇場の座席選択と予約の効果を実現

jQueryは劇場の座席選択と予約の効果を実現します。参考までに、具体的な内容は次のとおりです。

効果は以下のとおりです。

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

<!DOCTYPE html>
<html>

<ヘッド>
    <メタ文字セット="utf-8">
    <meta name="viewport" content="width=デバイス幅; initial-scale=1.0">
    <title>jQuery 劇場座席選択および予約エフェクト コード</title>
    <meta name="keywords" content="jQuery,座席選択">

    <スタイル タイプ="text/css">
        .デモ{
            幅: 700ピクセル;
            マージン: 40px 自動 0 自動;
            最小高さ: 450px;
        }
        
        @media スクリーンと (最大幅: 360px) {
            .デモ{
                幅: 340ピクセル
            }
        }
        
        。フロント {
            幅: 300ピクセル;
            マージン: 5px 32px 45px 32px;
            背景色: #f0f0f0;
            色: #666;
            テキスト配置: 中央;
            パディング: 3px;
            境界線の半径: 5px;
        }
        
        .予約の詳細{
            フロート: 右;
            位置: 相対的;
            幅: 200ピクセル;
            高さ: 450px;
        }
        
        .予約詳細 h3 {
            マージン: 5px 5px 0 0;
            フォントサイズ: 16px;
        }
        
        .予約詳細 p {
            行の高さ: 26px;
            フォントサイズ: 16px;
            色: #999
        }
        
        .booking-details p span {
            色: #666
        }
        
        div.seatChartsセル{
            色: #182C4E;
            高さ: 25px;
            幅: 25px;
            行の高さ: 25px;
            マージン: 3px;
            フロート: 左;
            テキスト配置: 中央;
            アウトライン: なし;
            フォントサイズ: 13px;
        }
        
        div.seatCharts-シート {
            色: #fff;
            カーソル: ポインタ;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            境界線の半径: 5px;
        }
        
        div.seatCharts行{
            高さ: 35px;
        }
        
        div.seatCharts-seat.available {
            背景色: #B9DEA0;
        }
        
        div.seatCharts-seat.focused {
            背景色: #76B474;
            境界線: なし;
        }
        
        div.seatCharts-seat.selected {
            背景色: #E6CAC4;
        }
        
        div.seatCharts-seat.unavailable {
            背景色: #472B34;
            カーソル: 許可されていません。
        }
        
        div.seatChartsコンテナ{
            右境界線: 1px 点線 #adadad;
            幅: 400ピクセル;
            パディング: 20px;
            フロート: 左;
        }
        
        div.seatCharts-凡例 {
            左パディング: 0px;
            位置: 絶対;
            下: 16px;
        }
        
        ul.seatCharts-凡例リスト {
            左パディング: 0px;
        }
        
        .seatCharts-凡例アイテム {
            フロート: 左;
            幅: 90ピクセル;
            上マージン: 10px;
            行の高さ: 2;
        }
        
        span.seatCharts-legendDescription {
            左マージン: 5px;
            行の高さ: 30px;
        }
        
        .チェックアウトボタン{
            表示: ブロック;
            幅: 80ピクセル;
            高さ: 24px;
            行の高さ: 20px;
            マージン: 10px 自動;
            境界線: 1px 実線 #999;
            フォントサイズ: 14px;
            カーソル: ポインタ
        }
        
        #選択された座席{
            最大高さ: 150px;
            オーバーフロー-y: 自動;
            オーバーフローx: なし;
            幅: 200ピクセル;
        }
        
        #選択された座席 li {
            フロート: 左;
            幅: 72px;
            高さ: 26px;
            行の高さ: 26px;
            境界線: 1px 実線 #d3d3d3;
            背景: #f7f7f7;
            マージン: 6px;
            フォントサイズ: 14px;
            フォントの太さ: 太字;
            テキスト配置: 中央
        }
    </スタイル>

</head>

<本文>


    <div id="メイン">

        <div class="demo">
            <div id="座席マップ">
                <div class="front">画面</div>
            </div>
            <div class="予約の詳細">
                <p>映画: <span>インターステラー</span></p>
                <p>時間: <span>11月14日 21:00</span></p>
                <p>座席数:</p>
                <ul id="選択された座席"></ul>
                <p>投票数: <span id="counter">0</span></p>
                <p>合計: <b>￥<span id="total">0</span></b></p>

                <button class="checkout-button">購入を確認</button>

                <div id="凡例"></div>
            </div>
            <div style="clear:both"></div>
        </div>

        <br />
    </div>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.12.1.min.js"></script>
    <script type="text/javascript" src="jquery.seat-charts.min.js"></script>
    <script type="text/javascript">
        var price = 70; /*チケット価格*/
        $(ドキュメント).ready(関数() {
            var $cart = $('#選択された座席'),
                /*座席エリア*/
                $counter = $('#counter')、
                /*投票数*/
                $total = $('#total'); /*合計金額*/

            var sc = $('#seat-map').seatCharts({
                map: [ /* 座席表 */
                    「ああああああ」、
                    「ああああああ」、
                    '__________'、
                    「ああああああ__」、
                    「ああああああ」、
                    「ああああああ」、
                    「ああああああ」、
                    「ああああああ」、
                    「ああああああ」、
                    「あああああ」
                ]、
                ネーミング：
                    上: 偽、
                    getLabel: 関数(文字、行、列) {
                        戻り列;
                    }
                },
                legend: { /*凡例を定義する*/
                    ノード: $('#legend'),
                    アイテム: [
                        ['a', 'available', '空席'],
                        ['a'、'入手不可'、'販売済み']
                    ]
                },
                click: function() { /*クリックイベント*/
                    if (this.status() == 'available') { /*オプションの座席*/
                        $('<li>' + (this.settings.row + 1) + 'row' + this.settings.label + 'seat</li>')
                            .attr('id', 'cart-item-' + this.settings.id)
                            .data('seatId', this.settings.id)
                            .appendTo($cart);

                        $counter.text(sc.find('selected').length + 1);
                        $total.text(合計(sc) + 価格を再計算します);

                        '選択された' を返します。
                    } else if (this.status() == 'selected') { /*選択済み*/
                        /*数量を更新*/
                        $counter.text(sc.find('selected').length - 1);
                        /*合計を更新*/
                        $total.text(合計(sc) - 価格を再計算します);

                        /*予約席を削除*/
                        $('#cart-item-' + this.settings.id).remove();
                        /*オプションシート*/
                        'available' を返します。
                    } else if (this.status() == 'unavailable') { /*販売済み*/
                        '利用不可' を返します。
                    } それ以外 {
                        this.style() を返します。
                    }
                }
            });
            /*販売済み席*/
            sc.get(['1_2', '4_4', '4_5', '6_6', '6_7', '8_5', '8_6', '8_7', '8_8', '10_1', '10_2']).status('利用不可');

        });
        /*合計金額を計算します*/
        関数 recalculateTotal(sc) {
            var 合計 = 0;
            sc.find('selected').each(function() {
                合計 += 価格;
            });

            合計を返します。
        }
   
</本文>

</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

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