jquery-seat-charts插件是什么

青灯夜游
Freigeben: 2022-07-05 16:59:49
Original
1980 人浏览过

jquery-seat-charts是一款基于JQuery实现的在线选座位插件,适用于机票、电影票、客车票选座场景。jquery-seat-charts插件支持自定义座位类型和价格,支持自定义样式,支持设置不可选的座位,也支持键盘控制选座。

jquery-seat-charts插件是什么

本教程操作环境:windows7系统、jquery3.6.0版本、Dell G3电脑。

jquery-seat-charts是一款基于JQuery实现的在线选座位插件,是一款适合机票,电影票,客车票选座的插件。

点击左侧的座位即可在右侧即时显示座位信息,并且可以有计算累加的功能。

特点:支持自定义座位类型和价格,支持自定义样式,支持设置不可选的座位,也支持键盘控制选座。

运行效果图:

1.png

2.jpg

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。

jquery-seat-charts插件使用示例

1、前台导包

Nach dem Login kopieren

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中显示序号
            },
Nach dem Login kopieren
        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');
                }
                $('
  • '+'选择'+this.data().category+this.settings.label+'号座位'+' [删除]
  • ')                     .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(); });
    Nach dem Login kopieren

    【推荐学习:jQuery视频教程web前端视频

    以上是jquery-seat-charts插件是什么的详细内容。更多信息请关注PHP中文网其他相关文章!

    Verwandte Etiketten:
    Quelle:php.cn
    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Beliebte Tutorials
    Mehr>
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage
    Über uns Haftungsausschluss Sitemap
    Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!