总结jquery-seat-charts插件使用方法

这插件网上搜一搜就能下载
下载自带readme文档，读一读也能了解差不多
附上成品：

注：此界面代码和布局从网上copy再改编的
以下是本人使用时发现的一些小tips：
1.前台导包

<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.labeloldId=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-seat-charts插件使用方法相关推荐

JQuery的iCheck插件使用方法
iCheck 概要表单复选框.单选框控件美化插件,主要作用为: 渲染并美化当前页面的复选框或单选框响应复选框或单选框的点击事件页面引用 css部分 1 <!-- iCheck for ch ...
jquery订阅发布插件代码草稿，为jquery扩展jquery.publish，jquery.subscribe方法
jquery订阅发布插件代码草稿! jquery订阅发布插件代码草稿,为jquery扩展jquery.publish,jquery.subscribe方法 --- jquery订阅发布插件代码草稿 & ...
jquery.validate.js插件的使用方法
近期做项目.须要用到 jQuery.validate.js插件,于是记录一下工作中的一些经验,以便日后学习. [样例例如以下] 1.前台页面 <form id="form1" ...
jQuery Raty星级评分插件使用方法
转载自 jQuery Raty星级评分插件使用方法使用jQuery Raty,可以很方便的在页面上嵌入一个评分组件,如下所示: 使用方法很简单,首先从https://github.com ...
jquery封装插件的方法
扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间.这篇文章将概述jQuery插件开发的基本知识,最佳做法和常见的陷阱. 一.入门编写一个jQuery插件开始于给jQuery.fn ...
jQuery的DataTables插件的使用方法[转]
转自:http://www.guoxk.com/node/jquery-datatables 在做后台的时候并没有美工和前端工程师来配合你做页面,为了显示数据并有一定的美感,我们可以使用jQuery的 ...
jquery.metisMenu.js插件
metisMenu是一个jQuery的导航栏插件,使用该插件可以定义导航栏的二级甚至三级导航菜单,并能实现菜单的折叠和展开等操作,将节省我们的开发时间,提高开发效率. 1. 准备工作:引入文件 bo ...
Jquery前端分页插件pagination同步加载和异步加载
上一篇文章介绍了Jquery前端分页插件pagination的基本使用方法和使用案例,大致原理就是一次性加载所有的数据再分页.https://www.jianshu.com/p/a1b8b1db025 ...
Lazy Line Painter – 很有趣的 jQuery 路径动画插件
Lazy Line Painter 是基于 Raphaël(一个用于在网页中绘制矢量图形的 Javascript 库)的 jQuery 路径动画插件,能够把线条图案转换为吸引眼球的路径动画模式. 您可 ...
我的jQuery动态表格插件二
本篇博客是我写在离职后,昨天刚辞职和交接完任务,准备离开.其实我有很多不舍,但是最终还是选择了离开,许多苦楚都埋在我的心底.哎,趁回成都找工作的机会是该好好休息一下了. 在上篇我的jQuery动态表格 ...

总结jquery-seat-charts插件使用方法

总结jquery-seat-charts插件使用方法

总结jquery-seat-charts插件使用方法相关推荐

最新文章

热门文章