jquery-seat-charts是一款基於JQuery實現的線上選座位插件,適用於機票、電影票、客車票選座場景。 jquery-seat-charts外掛程式支援自訂座位類型和價格,支援自訂樣式,支援設定不可選的座位,也支援鍵盤控制選座。
本教學操作環境:windows7系統、jquery3.6.0版本、Dell G3電腦。
jquery-seat-charts是一款基於JQuery實現的線上選座位插件,是一款適合機票,電影票,客車票選座的插件。
點擊左側的座位即可在右側即時顯示座位信息,並且可以有計算累加的功能。
特點:支援自訂座位類型和價格,支援自訂樣式,支援設定不可選的座位,也支援鍵盤控制選座。
運行效果圖:
#小提示:瀏覽器中如果無法正常執行,可以嘗試切換瀏覽模式。
jquery-seat-charts外掛程式使用範例
##1、前台導包<script></script>2、
顯示的區域id(可以在.css設計樣式)3.只選一個座位
$(document).ready(function() { var $cart = $('#select-seat'), $counter = $('#counter'),//显示框 sc = $('#seat-map').seatCharts({//座位框 map: [//_是过道,e是座位 'eea_eee','eee_eee','eee_eee' ], seats: { a: { classes : 'busy-class', category: '已预定' }, e: { classes : 'free-class', category: '空闲' }, }, naming : { top : false,//不显示列的编号 left:true, //显示左边(行)的编号 row:['1','2','3''],//可以自定义行和列 columns: ['1','2','3','A','4','5','6'], //过道也要给个编号!!! getLabel : function (character, row, column) { return SeatLabel ++; }//label中显示序号 },
legend : {//标识列表 node : $('#legend'), items : [ [ 'e', 'available', '空闲座位'], [ 'a', 'unavailable', '已预定'], [ 'f', 'unavailable', '维修中' ] ] }, click: function () { if (this.status() == 'available') { if (ChooseFloor>0) {//只选一个座位的办法 $('#cart-item-'+oldId).remove(); ChooseFloor--;//已选择的个数 sc.find('selected').status('available'); } $('
以上是jquery-seat-charts外掛是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!