所属分类：web前端开发
jquery-seat-charts是一款基于JQuery实现的在线选座位插件，适用于机票、电影票、客车票选座场景。jquery-seat-charts插件支持自定义座位类型和价格，支持自定义样式，支持设置不可选的座位，也支持键盘控制选座。
前端（vue）入门到精通课程：进入学习
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API调试工具：点击使用
本教程操作环境：windows7系统、jquery3.6.0版本、Dell G3电脑。
jquery-seat-charts是一款基于JQuery实现的在线选座位插件，是一款适合机票，电影票，客车票选座的插件。
点击左侧的座位即可在右侧即时显示座位信息，并且可以有计算累加的功能。
特点：支持自定义座位类型和价格，支持自定义样式，支持设置不可选的座位，也支持键盘控制选座。
运行效果图：
小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
jquery-seat-charts插件使用示例
1、前台导包
微博登录
QQ登录<script src="/jquery.seat-charts.min.js"></script>
登录后复制2、<p id="select-seat" ></p>
显示的区域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');
}
$('<li>'+'选择'+this.data().category+this.settings.label+'号座位'+'</b> <a href="#" class="cancel">[删除]</a></li>')
.attr('id','cart-item-'+this.settings.id)
.data('seatId', this.settings.id)
.appendTo($cart);
ChooseFloor++;
//座位号 ：this.settings.label
oldId=this.settings.id;//上一个选择的座位
oldStatus=this.status();//更改状态
return 'selected';
} else if (this.status() == 'selected') {
$('#cart-item-'+this.settings.id).remove();
return 'available';
} else if (this.status() == 'unavailable') {
return 'unavailable';
} else {
return this.style();
}
}
});
$('#select-seat').on('click', '.cancel', function () {
sc.get($(this).parents('li:first').data('seatId')).click();
});登录后复制【推荐学习：jQuery视频教程、web前端视频】
以上就是jquery-seat-charts插件是什么的详细内容，更多请关注zzsucai.com其它相关文章！
