本文实例讲述了jQuery在线选座位插件seat-charts特效。分享给大家供大家参考。具体如下:
这是一款基于JQuery实现的在线选座位插件seat-charts源码,是一款适合机票,电影票,客车票选座的jquery.seat-charts插件。点击左侧的座位即可在右侧即时显示座位信息,并且可以有计算累加的功能。
特点:支持自定义座位类型和价格,支持自定义样式,支持设置不可选的座位,也支持键盘控制选座。
运行效果图: -------------------查看效果 下载源码-------------------
小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
为大家分享的jQuery在线选座位插件seat-charts特效代码如下
<!doctype html> <html> <head> <title>jQuery在线选座位插件seat-charts</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="css/jquery.seat-charts.css"> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <div class="wrapper"> <div class="container"> <div id="seat-map"> <div class="front-indicator">机头</div> </div> <div class="booking-details"> <h3>已选中的座位 (<span id="counter">0</span>):</h3> <ul id="selected-seats"> </ul> <p>总价: <b>$<span id="total">0</span></b></p> <p><button class="checkout-button">结算</button></p> <div id="legend"></div> </div> </div> </div> <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___','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','经济舱'],[ '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> <div align="center" style="clear:both;font-size:12px;color:#666;font:normal 14px/24px 'MicroSoft YaHei';"> <p>适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p> </div> </body> </html>
以上就是为大家分享的jQuery在线选座位插件seat-charts特效代码,希望大家可以喜欢。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。