Bab Pawagam Pemilihan dan Tempahan Tempat Duduk Dalam Talian Berdasarkan jquery

Biar saya tunjukkan kepada anda pemaparan dahulu (muat turun kod sumber disokong):

Apabila kami membeli tiket dalam talian (seperti tiket wayang, tiket kereta api, dll.) , kita boleh pilih tempat duduk sendiri. Pembangun akan menyenaraikan tempat duduk pada halaman, dan pengguna dapat melihat dengan jelas tempat duduk dan pembayaran yang tersedia sepintas lalu. Artikel ini mengambil pembelian tiket panggung wayang sebagai contoh untuk menunjukkan kepada anda cara memilih tempat duduk, memproses data pemilihan tempat duduk, dsb.

Di sini, saya ingin memperkenalkan kepada anda pemalam pemilihan tempat duduk dalam talian berdasarkan jQuery: Carta Tempat Duduk jQuery, yang menyokong jenis dan harga tempat duduk tersuai, gaya tersuai dan tetapan. Tempat duduk yang dipilih juga menyokong kawalan papan kekunci tempat duduk.

HTML

Kami menganggap bahawa kami memasuki halaman pemilihan tempat duduk filem "Interstellar". halaman akan berada dalam #peta-tempat duduk Susun atur tempat duduk teater dipaparkan Butiran #tempahan di sebelah kanan memaparkan maklumat berkaitan filem serta maklumat tempat duduk yang dipilih dan maklumat jumlah tiket tempat duduk, sahkan ke halaman pembayaran untuk menyelesaikan pembayaran.

屏幕影片：星际穿越3D时间：11月14日 21:00座位：票数：0总计：￥0

CSS

Gunakan CSS untuk menukar setiap elemen pada Pengindahan Elemen halaman, terutamanya susun atur senarai tempat duduk, menetapkan gaya yang berbeza untuk status tempat duduk (dijual, tempat duduk pilihan, tempat duduk yang dipilih, dll. Sudah tentu, anda boleh mengubah suai mana-mana CSS mengikut gaya). kod halaman projek anda.

.front{width: 300px;margin: 5px 32px 45px 32px;background-color: #f0f0f0; color: #666;text-align: center;padding: 3px;border-radius: 5px;} 
.booking-details {float: right;position: relative;width:200px;height: 450px; } 
.booking-details h3 {margin: 5px 5px 0 0;font-size: 16px;} 
.booking-details p{line-height:26px; font-size:16px; color:#999} 
.booking-details p span{color:#666} 
p.seatCharts-cell {color: #182C4E;height: 25px;width: 25px;line-height: 25px;margin: 3px;float: left;text-align: center;outline: none;font-size: 13px;} 
p.seatCharts-seat {color: #fff;cursor: pointer;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius: 5px;} 
p.seatCharts-row {height: 35px;} 
p.seatCharts-seat.available {background-color: #B9DEA0;} 
p.seatCharts-seat.focused {background-color: #76B474;border: none;} 
p.seatCharts-seat.selected {background-color: #E6CAC4;} 
p.seatCharts-seat.unavailable {background-color: #472B34;cursor: not-allowed;} 
p.seatCharts-container {border-right: 1px dotted #adadad;width: 400px;padding: 20px;float: left;} 
p.seatCharts-legend {padding-left: 0px;position: absolute;bottom: 16px;} 
ul.seatCharts-legendList {padding-left: 0px;} 
.seatCharts-legendItem{float:left; width:90px;margin-top: 10px;line-height: 2;} 
span.seatCharts-legendDescription {margin-left: 5px;line-height: 30px;} 
.checkout-button {display: block;width:80px; height:24px; line-height:20px;margin: 10px auto;border:1px solid #999;font-size: 14px; cursor:pointer} 
#selected-seats {max-height: 150px;overflow-y: auto;overflow-x: none;width: 200px;} 
#selected-seats li{float:left; width:72px; height:26px; line-height:26px; border:1px solid #d3d3d3; background:#f7f7f7; margin:6px; font-size:14px; font-weight:bold; text-align:center}

jQuery

jQuery

Contoh ini berdasarkan jQuery, jadi jangan lupa untuk memuatkan perpustakaan jquery dan pemalam pemilihan tempat duduk: Carta Tempat Duduk jQuery dahulu.

?
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.seat-charts.min.js"></script>

Seterusnya kami mentakrifkan elemen seperti tambang, kawasan tempat duduk, bilangan tiket, jumlah keseluruhan, dan kemudian hubungi pemalam: $('#seat-map').SeatCharts( ).

Kami mula-mula menyediakan peta tempat duduk. Dalam contoh ini, baris ketiga ialah lorong, dan tempat duduk kosong di sebelah kanan baris ketiga dan keempat ialah pintu keluar . gunakan huruf a untuk mewakili tempat duduk dan simbol _ Kosong bermakna tiada tempat duduk Sudah tentu, anda juga boleh menggunakan a, b, c, dsb. untuk mewakili tempat duduk yang berbeza tahap.

Kemudian tentukan gaya legenda Kuncinya adalah untuk mengesan klik acara klik(): apabila pengguna mengklik pada tempat duduk, jika status tempat duduk tersedia (tersedia), kemudian selepas mengklik pada. kerusi, maklumat tempat duduk (baris dan baris) akan dipaparkan pada senarai tempat duduk yang dipilih di sebelah kanan, dan jumlah undian dan jumlah keseluruhan dikira jika status kerusi dipilih (dipilih). selepas mengklik tempat duduk sekali lagi, maklumat tempat duduk yang dipilih akan ditambah dari tempat duduk di sebelah kanan Padamkannya daripada senarai dan tetapkan status kepada pilihan jika status tempat duduk dijual (tidak tersedia), tempat duduk tidak boleh diklik. Akhir sekali, gunakan kaedah get() untuk menetapkan status nombor tempat duduk yang dijual untuk dijual.

Berikut ialah kod terperinci:


Kod di atas menggunakan jquery untuk melaksanakan pemilihan tempat duduk dalam talian dan tempahan untuk teater saya harap anda menyukainya