jQuery 온라인 좌석 선택 플러그인 좌석 차트 특수 효과 코드 Sharing_jquery
- WBOY원래의
- 2016-05-16 15:42:153496검색
이 기사의 예에서는 jQuery 온라인 좌석 선택 플러그인 좌석 차트의 특수 효과를 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.
JQuery를 기반으로 구현된 온라인 좌석 선택 플러그인 좌석 차트 소스 코드입니다. 항공권, 영화 티켓, 버스 티켓 등의 좌석 선택에 적합한 jquery.seat-charts 플러그인입니다. 왼쪽 좌석을 클릭하면 오른쪽 좌석정보가 바로 표시되며, 합계를 계산하는 기능이 있습니다.
특징: 맞춤형 좌석 유형 및 가격 지원, 맞춤형 스타일 지원, 선택 불가능한 좌석 설정 지원, 좌석 선택을 위한 키보드 제어도 지원합니다.
运行效果图： ------查看效果 下载源码------------ --------
팁: 브라우저가 제대로 작동하지 않으면 탐색 모드를 전환해 보세요.
공유해주신 jQuery 온라인 좌석 선택 플러그인 좌석표의 특수효과 코드는 다음과 같습니다
<!doctype html>
<html>
<head>
<title>jQuery在线选座位插件seat-charts</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/jquery.seat-charts.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="wrapper">
<div class="container">
<div id="seat-map">
<div class="front-indicator">机头</div>
</div>
<div class="booking-details">
<h3>已选中的座位 (<span id="counter">0</span>):</h3>
<ul id="selected-seats">
</ul>
<p>总价: <b>$<span id="total">0</span></b></p>
<p><button class="checkout-button">结算</button></p>
<div id="legend"></div>
</div>
</div>
</div>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/jquery.seat-charts.min.js"></script>
<script>
var firstSeatLabel = 1;
$(document).ready(function() {
var $cart = $('#selected-seats'),
$counter = $('#counter'),
$total = $('#total'),
sc = $('#seat-map').seatCharts({
map: [
'ff_ff',
'ff_ff',
'ee_ee',
'ee_ee',
'ee___',
'ee_ee',
'ee_ee',
'ee_ee',
'ee_ee',
'eeeee',
],
seats: {
f: {
price : 100,
classes : 'first-class', //your custom CSS class
category: '头等舱'
},
e: {
price : 40,
classes : 'economy-class', //your custom CSS class
category: '经济舱'
}
},
naming : {
top : false,
getLabel : function (character, row, column) {
return firstSeatLabel++;
},
},
legend : {
node : $('#legend'),
items : [
[ 'f', 'available', '头等舱' ],
[ 'e', 'available', '经济舱'],
[ 'f', 'unavailable', '已预定']
]
},
click: function () {
if (this.status() == 'available') {
$('<li>'+this.data().category+this.settings.label+'号座位'+'：<br/>价格：<b>$'+this.data().price+'</b> <a href="#" class="cancel-cart-item">[删除]</a></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)+this.data().price);
return 'selected';
} else if (this.status() == 'selected') {
//update the counter
$counter.text(sc.find('selected').length-1);
//and total
$total.text(recalculateTotal(sc)-this.data().price);
//remove the item from our cart
$('#cart-item-'+this.settings.id).remove();
//seat has been vacated
return 'available';
} else if (this.status() == 'unavailable') {
//seat has been already booked
return 'unavailable';
} else {
return this.style();
}
}
});
//this will handle "[cancel]" link clicks
$('#selected-seats').on('click', '.cancel-cart-item', function () {
//let's just trigger Click event on the appropriate seat, so we don't have to repeat the logic here
sc.get($(this).parents('li:first').data('seatId')).click();
});
//let's pretend some seats have already been booked
sc.get(['1_2', '4_1', '7_1', '7_2']).status('unavailable');
});
function recalculateTotal(sc) {
var total = 0;
//basically find every selected seat and sum its price
sc.find('selected').each(function () {
total += this.data().price;
});
return total;
}
</script>
<div align="center" style="clear:both;font-size:12px;color:#666;font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
</div>
</body>
</html>
위 내용은 귀하에게 공유된 jQuery 온라인 좌석 선택 플러그인 좌석 차트 특수 효과 코드입니다. 마음에 드셨으면 좋겠습니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.