頁面特效 UI組件庫 菜單導航 窗口特效 幻燈片滑動 圖像相冊 表單 選項卡 表格 評分星級 手風琴 文本鏈接 布局 日歷 顏色選擇器 按鈕 圖表 html5 提示 ExtJS 在線客服 其他特效 地圖 樹形控件 移動開發 BootStrap 滑動條 文件上傳 表單驗證 分頁 播放器 Angular VUE

適用于電影院、機票、汽車票在線選座位插件jQuery-Seat-Charts

布局 HTML我幫您 1月前  次瀏覽

這是一款基于JQuery實現的在線選座位插件seat-charts源碼,是一款適合機票,電影票,汽客車票選座的jquery.seat-charts插件。點擊左側的座位即可在右側即時顯示座位信息,并且可以有計算累加的功能。

適用于電影院、機票、汽車票在線選座位插件jQuery-Seat-Charts

特點:支持自定義座位類型和價格,支持自定義樣式,支持設置不可選的座位,也支持鍵盤控制選座。

$(document).ready(function() {

	var sc = $('#seat-map').seatCharts({
		map: [
			'aaaaaaaaaaaa',
			'aaaaaaaaaaaa',
			'bbbbbbbbbb__',
			'bbbbbbbbbb__',
			'bbbbbbbbbbbb',
			'cccccccccccc'
		],
		seats: {
			a: {
				price   : 99.99,
				classes : 'front-seat' //your custom CSS class
			}
		
		},
		click: function () {
			if (this.status() == 'available') {
				//do some stuff, i.e. add to the cart
				return 'selected';
			} else if (this.status() == 'selected') {
				//seat has been vacated
				return 'available';
			} else if (this.status() == 'unavailable') {
				//seat has been already booked
				return 'unavailable';
			} else {
				return this.style();
			}
		}
	});

	//Make all available 'c' seats unavailable
	sc.find('c.available').status('unavailable');
	
	/*
	Get seats with ids 2_6, 1_7 (more on ids later on),
	put them in a jQuery set and change some css
	*/
	sc.get(['2_6', '1_7']).node().css({
		color: '#ffcfcf'
	});
	
	console.log('Seat 1_2 costs ' + sc.get('1_2').data().price + ' and is currently ' + sc.status('1_2'));

});

相關鏈接

發表評論

经典黑杰克游戏 陕西棋牌下载安装 分分彩技巧之稳赚不赔 澳洲幸运8福彩中心地址 华东15选5开奖彩票 太子中心是哪个网址 河南泳坛夺金怎么玩 南粤风26选5历史开奖 江西时时彩走势图 连码专家六俏复式图片 甘肃快3开奖结果走势 a股很难赚钱吗 港口如何赚钱新加坡 辽宁35选7几点开奖 游戏麻将之四人麻将 双色球开奖结果带坐标走势图带连线 股票赚钱项目