最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

jQuery在线选座(高铁版)

来源:http://www.erdangjiade.com/ 沐浴春风 2013-12-12 02:02浏览(2030)

jquery.seat-charts是一款适合高铁票、电影票的在线选座插件。

0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。在线 充值

jQuery在线选座(高铁版)
分类:其它特效 > Ajax 难易:中级
查看演示 下载资源 下载积分: 30 积分

HTML

左边座位列表,右边选票信息。

<div id="seat_area">  
   <div class="front"> 
    03车厢 
   </div>  
   <div id="seat_list"></div>  
  </div>  
  <!--右边选座信息----->  
  <div class="booking-details">  
   <h3> 选座信息:</h3>  
   <ul id="seats_selected"></ul>  
   <p>票数: <span id="tickets_num"></span></p>  
   <p>总价: ¥<span id="total_price">0</span></p>  
   <input type="button" class="btn" value="确定购买" />  
   <div id="legend"></div>  
</div>

jQuery

我们在03号车厢内设置一等座和二等座,中间以通道隔开,So布局是这样滴:f代表一等座,e代表二等座,符号"_"代表过道,整个车厢结构图如下:

map: [//座位结构图 f 代表一等座;  e 代表 二等座;  下划线 "_" 代表过道 
   'ff__ff'
   'ff__ff'
   '______'
   'eee_ee'
   'eee_ee'
   'eee_ee'
   'eee_ee'
   'eee_ee'
   'eee_ee' 
],

接着我们要设置座位的相关属性:

seats: { //设置一等座和二等座属性 
    f: { 
        price: 125
        classes: 'first-class'
        category: '一等座' 
    }
    e: { 
        price: 70
        classes: 'economy-class'
        category: '二等座' 
    } 
},

接着我们用naming来定义座位图的行列信息,getLabel用来返回座位信息,如:03B表示03排B座。

naming : { //定义行列等信息  
    top : true,  //显示顶部横坐标(行) 
    columns: ['A''B''C''''D','F'], //定义横坐标(行) 
    rows: ['01','02','','03','04','05','06','07','08','09'],  //纵坐标(列)的值 
    getLabel : function (character, row, column) {  //返回座位信息 
        return row+column;  
    }  
}

接着我们使用legend来定义图例,通过#legend定义座位类型。

legend : { //定义图例  
    node : $('#legend'),  
    items : [  
        [ 'f''available',   '一等座' ],  
        [ 'e''available',   '二等座'],  
        [ 'f''unavailable''已售出']  
    ]                      
}

最后通过click座位事件,计算票数和金额总计等。

click: function () {  
    if (this.status() == 'available'{////若为可选座状态 
        $('<li>'+this.data().category+'<br/>01车'+this.settings.label+'号<br/>¥'+this.data().price+'</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'{//若为已选中状态  
        $counter.text(sc.find('selected').length-1);   //更新票数量 
        $total.text(recalculateTotal(sc)-this.data().price); //更新票价总金额 
         
        $('#cart-item-'+this.settings.id).remove(); //删除已预订座位  
        return 'available';  
    } else if (this.status() == 'unavailable'{//已售出  
        return 'unavailable';  
    } else {  
        return this.style();  
    }  
}

最后,我们使用get()和status()方法设置座位状态,分别为available:空位,unavailable:已售出。

sc.get(['01_A''04_A''07_B''07_F']).status('unavailable');//已售出座位
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/4.html
评论2
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

  • 头像 椅子
    03-30 08:15
    ngu137
    在线选座(高铁版)插件不错啊
  • 头像 沙发
    12-31 09:28
    ngu137
    不错学习啦。。。。。!!@@@
1 2