jQuery实现影院选座订座效果

效果如下：

代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width; initial-scale=1.0"><title>jQuery影院选座订座效果代码</title><meta name="keywords" content="jQuery,选座"><style type="text/css">.demo {width: 700px;margin: 40px auto 0 auto;min-height: 450px;}@media screen and (max-width: 360px) {.demo {width: 340px}}.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}div.seatCharts-cell {color: #182C4E;height: 25px;width: 25px;line-height: 25px;margin: 3px;float: left;text-align: center;outline: none;font-size: 13px;}div.seatCharts-seat {color: #fff;cursor: pointer;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}div.seatCharts-row {height: 35px;}div.seatCharts-seat.available {background-color: #B9DEA0;}div.seatCharts-seat.focused {background-color: #76B474;border: none;}div.seatCharts-seat.selected {background-color: #E6CAC4;}div.seatCharts-seat.unavailable {background-color: #472B34;cursor: not-allowed;}div.seatCharts-container {border-right: 1px dotted #adadad;width: 400px;padding: 20px;float: left;}div.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}</style></head><body><div id="main"><div class="demo"><div id="seat-map"><div class="front">屏幕</div></div><div class="booking-details"><p>影片：<span>星际穿越</span></p><p>时间：<span>11月14日 21:00</span></p><p>座位：</p><ul id="selected-seats"></ul><p>票数：<span id="counter">0</span></p><p>总计：<b>￥<span id="total">0</span></b></p><button class="checkout-button">确定购买</button><div id="legend"></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; /*票价*/$(document).ready(function() {var $cart = $('#selected-seats'),/*座位区*/$counter = $('#counter'),/*票数*/$total = $('#total'); /*总计金额*/var sc = $('#seat-map').seatCharts({map: [ /*座位图*/'aaaaaaaaaa','aaaaaaaaaa','__________','aaaaaaaa__','aaaaaaaaaa','aaaaaaaaaa','aaaaaaaaaa','aaaaaaaaaa','aaaaaaaaaa','aa__aa__aa'],naming: {top: false,getLabel: function(character, row, column) {return column;}},legend: { /*定义图例*/node: $('#legend'),items: [['a', 'available', '可选座'],['a', 'unavailable', '已售出']]},click: function() { /*点击事件*/if (this.status() == 'available') { /*可选座*/$('<li>' + (this.settings.row + 1) + '排' + this.settings.label + '座</li>').attr('id', 'cart-item-' + this.settings.id).data('seatId', this.settings.id).appendTo($cart);$counter.text(sc.find('selected').length + 1);$total.text(recalculateTotal(sc) + price);return 'selected';} else if (this.status() == 'selected') { /*已选中*//*更新数量*/$counter.text(sc.find('selected').length - 1);/*更新总计*/$total.text(recalculateTotal(sc) - price);/*删除已预订座位*/$('#cart-item-' + this.settings.id).remove();/*可选座*/return 'available';} else if (this.status() == 'unavailable') { /*已售出*/return 'unavailable';} else {return 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('unavailable');});/*计算总金额*/function recalculateTotal(sc) {var total = 0;sc.find('selected').each(function() {total += price;});return total;}</body></html>

jQuery实现影院选座订座效果相关推荐

jQuery在线选座订座（影院篇）
jQuery在线选座订座(影院篇) 原文:jQuery在线选座订座(影院篇) 我们在线购票时(如电影票.车票等)可以自己选座.开发者会在页面上列出座次席位,用户可以一目了然的看到可以选择的座位及支付. ...
php 在线选座,基于jquery实现在线选座订座之影院篇
先给大家展示效果图(支持源码下载哦): 我们在线购票时(如电影票.车票等)可以自己选座.开发者会在页面上列出座次席位,用户可以一目了然的看到可以选择的座位及支付.本文以电影院购票为例,为您展示如何选座 ...
jQuery在线选座订座（高铁版）
除了电影院在线选座,我们还会接触到飞机机舱选座,当然也有汽车票火车票选座的.假如有一天买火车票也提供在线选座,那么今天我来给大家介绍下如何使用jQuery选座插件完成高铁列车座位布置.选座.不同等级座 ...
jQuery实现在线选座订座（影院篇）
我们在线购票时(如电影票.车票等)可以自己选座.开发者会在页面上列出座次席位,用户可以一目了然的看到可以选择的座位及支付.本文以电影院购票为例,为您展示如何选座.处理选座数据等. 在这里,我给大家介绍 ...
java在线选座功能_基于jquery实现在线选座订座之影院篇
先给大家展示效果图(支持源码下载哦): 我们在线购票时(如电影票.车票等)可以自己选座.开发者会在页面上列出座次席位,用户可以一目了然的看到可以选择的座位及支付.本文以电影院购票为例,为您展示如何选座 ...
Query在线选座订座（影院篇）
转自:http://www.helloweba.com/view-blog-278.html 我们在线购票时(如电影票.车票等)可以自己选座.开发者会在页面上列出座次席位,用户可以一目了然的看到可以选 ...
php 在线选座,基于jQuery实现在线选座之高铁版_jquery
效果图展示: 除了电影院在线选座,我们还会接触到飞机机舱选座,当然也有汽车票火车票选座的.假如有一天买火车票也提供在线选座,那么今天我来给大家介绍下如何使用jQuery选座插件完成高铁列车座位布置.选 ...
用html制作一个中国高铁网页,基于jQuery实现在线选座之高铁版
效果图展示: 除了电影院在线选座,我们还会接触到飞机机舱选座,当然也有汽车票火车票选座的.假如有一天买火车票也提供在线选座,那么今天我来给大家介绍下如何使用jQuery选座插件完成高铁列车座位布置.选 ...
座位选座的java代码_基于jQuery实现在线选座之高铁版
效果图展示: 除了电影院在线选座,我们还会接触到飞机机舱选座,当然也有汽车票火车票选座的.假如有一天买火车票也提供在线选座,那么今天我来给大家介绍下如何使用jQuery选座插件完成高铁列车座位布置.选 ...

jQuery实现影院选座订座效果

jQuery实现影院选座订座效果

jQuery实现影院选座订座效果相关推荐

最新文章

热门文章