jQuery在线座位插入器图表特效代码共享
这是一个在线选择座位,座位图基于jQuery插件源码,这是一个jquery.seat-charts插件适用于门票、电影票、汽车座椅。点击左边的座位可以显示在右边的座位信息,你可以添加的功能。
功能:支持定制的座椅类型和价格,支持自定义样式,支持非可选座位的设置和键盘控制座椅。
兼营:-------------------效果图查看结果-------------------下载源代码
提示:如果不能在浏览器中正常运行,可以尝试切换浏览模式。
jQuery在线座位选择插件席位图表特效代码,供大家分享
jQuery在线座位选择插件席位图表
鼻子
所选席位(0):
总价:0美元
结算
无功firstseatlabel = 1;
$(文档)Ready(函数(){)
VaR(#美元美元车=选择座位),
美元美元(#计数器计数器=),
总美元=美元(#总),
SC = $(#座位图)。SeatCharts({
{地图:
ff_ff,
ff_ff,
ee_ee,
ee_ee,
ee___,
ee_ee,
ee_ee,
ee_ee,
ee_ee,
eeeee,
},
座位:{
{ F:
价格:100,
类:'first-class, / /自定义CSS类
catery:第一类
},
{ E:
价格:40,
类:'economy-class, / /自定义CSS类
catery:经济舱
}
},
命名:{
顶部:假,
getlabel:函数(字符、行、列){
返回firstseatlabel + +;
},
},
传说:{
结:$(' #传奇),
项目:{
{ F,可用,第一类},
{ e,可用','经济' },
{ F,'unavailable、预定}
}
},
单击:函数(){
(如果)(this.status = =可用的){
$('+这个数据)。Catery +这个设置。标签+(座位号:价格:$'+ this.data(+)。价格+ {删除)
.attr('id','cart-item+这个设置。ID)
。数据('seatid ',这个设置。ID)
appendto(合车);
counter.text美元(sc.find(选中的)。长度+ 1);
total.text美元(recalculatetotal(SC)+ this.data()。价格);
return'selected;
如果(这个状态)} = {(选中的)
更新计数器
counter.text美元(sc.find(选中的)。length-1);
和总
total.text美元(recalculatetotal(SC)-this.data()。价格);
从我们的购物车中删除项目
$(#车项目-+,设置ID)删除();
已空出座位
return'available;
如果(这个状态)} = {('unavailable)
/座位已经预订好了。
return'unavailable;
{人}
返回this.style();
}
}
});
这将处理{取消}链接单击
$(#选座位),(点击','。取消车项目,功能()){
我们只需在适当的位置触发单击事件,这样就不会发生了。
sc.get($(this)。父母(李:第一)。数据('seatid '))Click();
});
/让我们假设一些座位已经预订好了。
sc.get({ '1_2 ','4_1 ','7_1 ','7_2 ' })状态('unavailable);
});
功能recalculatetotal(SC){
var总= 0;
基本上找到每个座位并总结价格。
Sc.find(选中的)。每个(function()){
总= this.data(价格);
});
总收益;
}
浏览器:IE8、360、Firefox、Chrome、Safari、Opera、搜狗、傲游、世界之窗。
以上是分享jQuery在线座位选择插件的座位图特效代码,希望大家能喜欢。