jQuery实现影院选座订座效果
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 Seat Charts,它支持自定义座位类型和价格,支持自定义样式,支持设置不可选的座位,也支持键盘控制座位. HTML 我们假设进入电影<星际穿越>的选座页面,页面布局
-
基于jQuery实现在线选座之高铁版
效果图展示: 查看演示 源码下载 除了电影院在线选座,我们还会接触到飞机机舱选座,当然也有汽车票火车票选座的.假如有一天买火车票也提供在线选座,那么今天我来给大家介绍下如何使用jQuery选座插件完成高铁列车座位布置.选座.不同等级座位计价等操作. HTML 和上一篇文章一样:jQuery在线选座订座(影院篇),我们使用相同的html结构,左侧显示位置布局图,右侧显示选座相关信息. 相关CSS代码请下载DEMO源码查看,本文不再详述. <div class="container"
-
jQuery在线选座位插件seat-charts特效代码分享
本文实例讲述了jQuery在线选座位插件seat-charts特效.分享给大家供大家参考.具体如下: 这是一款基于JQuery实现的在线选座位插件seat-charts源码,是一款适合机票,电影票,客车票选座的jquery.seat-charts插件.点击左侧的座位即可在右侧即时显示座位信息,并且可以有计算累加的功能. 特点:支持自定义座位类型和价格,支持自定义样式,支持设置不可选的座位,也支持键盘控制选座. 运行效果图: ----------------
-
jQuery实现影院选座订座效果
jQuery实现影院选座订座效果,供大家参考,具体内容如下 效果如下: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width; initial-scale=1.0"> <title>jQuery影院选座订座效果代码
-
jQuery自定义多选下拉框效果
项目中需要自定义一个下拉框多选插件,业务问题还是自己实现比较好 通过$.fn 向jQuery添加新的方法 下拉数据通过参数传递进去,通过调用该插件时接收,选择后的确定与取消事件采用事件传递方式 代码如下: 1.效果图 2.代码 <div id="demo" class="dropdown-container"> <div class="dropdown-display"> <span></span>
-
jquery实现全选和全不选功能效果的实现代码【推荐】
网上好多代码都是错的 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu
-
jquery实现全选功能效果的实现代码
主要是模拟一些网页中的表格实现全选功能. <form> 你爱好的运动是: <input type="checkbox" id="Check" value="全选/全不选"/>全选/全不选 <br /> <input type="checkbox" name="items" value="足球" />足球 <input type=&qu
-
jquery实现全选、反选、获得所有选中的checkbox
举了7个不同的checkbox状态,和大家一一分享. 1.全选 $("#btn1").click(function(){ $("input[name='checkbox']").attr("checked","true"); }) 2.取消全选(全不选) $("#btn2").click(function(){ $("input[name='checkbox']").removeAttr
-
jquery实现选中单选按钮下拉伸缩效果
本文实例讲述了jquery实现选中单选按钮下拉伸缩效果的方法.分享给大家供大家参考.具体如下: 这是一个使用jQuery插件实现的伸缩效果,在网页上,单击单选按钮,也就是Radio元素后,所属的对应内容向下拉出,伸展开来,平时是不显示的,可用在发票打印快递单查询等场合. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
-
jQuery获取复选框被选中数量及判断选择值的方法详解
本文实例讲述了jQuery获取复选框被选中数量及判断选择值的方法.分享给大家供大家参考,具体如下: 获取复选框被选中值 <input type="button" id="btn5" value="获得选中的所有值"> <input type="text" name="dd" id="dd" size="50" /> $("#btn5&
-
jquery.multiselect多选下拉框实现代码
本文实例为大家分享了jquery.multiselect多选下拉框的实现方法,供大家参考,具体内容如下 第一步:链接下列文件,如果没有,到此网页下载 https://github.com/ehynds/jquery-ui-multiselect-widget,此插件基于jquery ,所以jquery的基本文件都需要引用 <link rel="stylesheet" type="text/css" href="~/Scripts/jquerymult