素材网 素材网

jQuery在线订购座位选择插件seat-charts

下载资源()次

阅读次数()次

发布时间:2015-06-24

jQuery在线订购座位选择插件seat-charts
分享到:

用法简介:

来源:xw素材网

jQuery在线订购座位选择插件seat-charts。
文件引用:

<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>


   

相关标签:

网友评论:

评论

发表 剩余字数:20

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

@ 2013 xwcms.net . All Rights Reserved. xw素材网 | 备案号:晋ICP备13005902号 联系管理员
×

邮箱订阅

什么是邮箱订阅?

邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式,用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮,当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。