小提醒:浏览器中一经不可能健康运作,能够品味切换浏览方式。
为我们大饱眼福的jQuery在线选座位插件seat-charts特效代码如下

大家用字母a表示座位,用符号_表示空的,即没有座位,当然你也得以用a,b,c等代表差别阶段的座位。

您或然感兴趣的稿子:

  • Android营造炫人眼目的影视票在线选座app在线选座作用
  • jQuery在线选座位插件seat-charts特效代码分享
  • 据说jquery完毕在线选座订座之影院篇
  • Android自定义view完毕电影票在线选座功效

你只怕感兴趣的小说:

  • 用jquery完成的依样葫芦QQ邮箱里的收件人采纳及任何功效(一)
  • jQuery
    Jcrop插件完结图片采用功效
  • jquery
    slibings选择同等级的因素的兑今世码
  • jQuery+jRange完结滑动接纳数值范围特效
  • jQuery插件slider达成拖动滑块采取价格限制
  • 依照jQuery实现采纳月份插件附源码下载

图片 1

地点的代码定义了一等座和二等座的价格、体系名号以及相应的css样式。他们得以在前面通过data()方法调用。

<!doctype html>
<html lang="en">
<head>
<meta charset="gb2312">
<title>jQuery数值范围选取插件range2dslider </title>
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" href="jquery.range2dslider.css">
<script type="text/javascript" src="jquery.range2dslider.js"></script>
<style>
 body,html{
 margin:0px;
 padding:0px;
 }
 ul{
 margin:0px 0px;
 padding:10px 25px;
 }
 body>div{
 margin:0px 20px;
 padding:20px;
 background:rgba(184, 184, 184, 0.1);
 }
</style>
</head>
<body>
<div>
<h2>简单的二维滑块</h2>
<input id="slider">
<script>
window.onerror = function(msg, url, linenumber) {
 alert('Error message: '+msg+'\nURL: '+url+'\nLine Number: '+linenumber);
 return true;
}
$('#slider').range2DSlider({
 grid:true,
 axis:[[1,2,5,7,10],[2,5,10]],
 projections:true,
 showLegend:[1,1],
 allowAxisMove:['both'],
 printLabel:function( val ){
 this.projections&&this.projections[0].find('.xdsoft_projection_value_x').text(val[1].toFixed(5));
 return val[0].toFixed(5);
 }
})
 .range2DSlider('value',[[0,1],[3,0],[6,6]]);

$('#slider')
 .range2DSlider();
</script>
<h2>水平滑块</h2>
<input id="slider1">
<script>
$('#slider1').range2DSlider({
 template:'horizontal',
 value:[[5,0],[7,0]],
 onlyGridPoint:true,
 round:true,
 axis:[[-3,-2,-1,0,1,2,3,4,5,6,7,8,9,10]]
});
</script>
<h2>垂直滑块</h2>
<input class="slider2">
<input class="slider2">
<input class="slider2">
<input class="slider2">
<input class="slider2">
<input class="slider2">
<div style="clear:both;float:none;"></div>
<script>
$('.slider2').range2DSlider({
 template:'vertical',
 value:[[0,5]],
 showRanges:[[0,1]],
 style:'float:left;margin-left:25px;',
 axis:[[0,1],[0,10]],
 round:true,
 printLabel:function( val ){
 return val[1]+' yo';
 }
});
</script>
<h2>平滑滑块(x)</h2>
<input class="slider3">
<script>
 var values = [];
 var ranges = [];
 var cities = [
 'Abuja',
 'Accra',
 'Adamstown',
 'Addis',
 'Algiers',
 'Alofi',
 'Amman',
 'Amsterdam', 
 'Andorra',
 'Ankara',
 'Antananarivo', 
 'Apia',
 'Ashgabat', 
 'Asmara',
 'Astana',
 'Asuncion', 
 'Athens',
 'Avarua',
 'Baghdad', 
 'Baku',
 'Bamako', 
 'Bandar',
 'Bangkok', 
 'Bangui',
 'Banjul',
 'Basseterre', 
 'Beijing',
 'Beirut',
 'Belgrade', 
 'Belmopan'
 ];
 for(var i = -10,k=0;i<=10;i++,k++ ){
 values.push([i,Math.sin(i),cities[i+10]]);
 if( i<10 )
 ranges.push([k,k+1]);
 } 
 $('.slider3').range2DSlider({
 x:'right',
 y:'top',
 showLegend:[0,0],
 showRanges:ranges,
 axis:[[-10,10],[-1.5,1.5]],
 allowAxisMove:['y'],
 printLabel:function( val ){
 return val[1].toFixed(2)+'<br>'+val[2];
 }
 }).range2DSlider('value',values);
</script>
<h2>自定义风格滑块</h2>
<input id="slider4">
<style>
 .xdsoft_custom .xdsoft_range2dslider_runner{
 border-radius:1px;
 margin:0px 0px -4px -8px !important;
 background:rgba(0,0,127,0.5);
 border:1px outset #ddd;
 }
 .xdsoft_custom .xdsoft_range2dslider_box{
 min-height:8px;
 background:rgba(127,127,127,0.5);
 border-radius:1px;
 border-style:solid;
 }
 .xdsoft_custom .xdsoft_slider_label{
 background: red;
 color: #fff;
 bottom: 22px !important;
 }
 .xdsoft_custom .xdsoft_slider_label.xdsoft_slider_label_top:after{
 border-top-color:red;
 }
</style>
<script>
$('#slider4').range2DSlider({
 grid:false,
 height:0,
 className:'xdsoft_custom',
 showLegend:[1,0],
 axis:[[0,0.1]],
 tooltip:['top'],
 alwShowTooltip:[true],
 allowAxisMove:['x'],
 printLabel:function( val ){
 return val[0].toFixed(3);
 }
}).range2DSlider('value',[[0.05,0]]);
</script>
</div>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
</div>
</body>
</html>
<!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>已选中的座位 (0):</h3>
  <ul id="selected-seats">
  </ul>
  <p>总价: <b>$0</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_ee',
  'ee___',
  'ee_ee',
  'ee_ee',
  'ee_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', 'available', '经济舱'],
  [ '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的在线选座插件:jQuery Seat
Charts
,它帮忙自定义座位类型和价格,协理自定义样式,扶助设置不可选的座位,也支持键盘调节座位。

提及底,我们使用get()和status()方法设置已经售出不可选的座位。

小提醒:浏览器中一经不可能平常运维,能够尝尝切换浏览情势。
为大家大饱眼福的jQuery实现的数值范围选用特效代码如下

正文实例叙述了jQuery在线选座位插件seat-charts特效。共享给大家供大家参照他事他说加以考察。具体如下:
那是一款基于JQuery达成的在线选座位插件seat-charts源码,是一款适合机票,电影票,大巴投票公投座的jquery.seat-charts插件。点击侧边的座席就可以在左边即时彰显座位消息,何况能够有计算增加的效果与利益。
特色:支持自定义座位类型和价格,协助自定义样式,协理设置不可选的位子,也支撑键盘调控选座。
运营效果图:                    
——————-翻开效果
下载源码——————-

.front{width: 300px;margin: 5px 32px 45px 32px;background-color: #f0f0f0; color: #666;text-align: center;padding: 3px;border-radius: 5px;} 
.booking-details {float: right;position: relative;width:200px;height: 450px; } 
.booking-details h3 {margin: 5px 5px 0 0;font-size: 16px;} 
.booking-details p{line-height:26px; font-size:16px; color:#999} 
.booking-details p span{color:#666} 
div.seatCharts-cell {color: #182C4E;height: 25px;width: 25px;line-height: 25px;margin: 3px;float: left;text-align: center;outline: none;font-size: 13px;} 
div.seatCharts-seat {color: #fff;cursor: pointer;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius: 5px;} 
div.seatCharts-row {height: 35px;} 
div.seatCharts-seat.available {background-color: #B9DEA0;} 
div.seatCharts-seat.focused {background-color: #76B474;border: none;} 
div.seatCharts-seat.selected {background-color: #E6CAC4;} 
div.seatCharts-seat.unavailable {background-color: #472B34;cursor: not-allowed;} 
div.seatCharts-container {border-right: 1px dotted #adadad;width: 400px;padding: 20px;float: left;} 
div.seatCharts-legend {padding-left: 0px;position: absolute;bottom: 16px;} 
ul.seatCharts-legendList {padding-left: 0px;} 
.seatCharts-legendItem{float:left; width:90px;margin-top: 10px;line-height: 2;} 
span.seatCharts-legendDescription {margin-left: 5px;line-height: 30px;} 
.checkout-button {display: block;width:80px; height:24px; line-height:20px;margin: 10px auto;border:1px solid #999;font-size: 14px; cursor:pointer} 
#selected-seats {max-height: 150px;overflow-y: auto;overflow-x: none;width: 200px;} 
#selected-seats li{float:left; width:72px; height:26px; line-height:26px; border:1px solid #d3d3d3; background:#f7f7f7; margin:6px; font-size:14px; font-weight:bold; text-align:center}
sc.get(['01_A', '04_A', '07_B', '07_F']).status('unavailable'); 

图片 2

以上便是为大家享受的jQuery在线选座位插件seat-charts特效代码,希望大家能够欣赏。

jQuery Seat Charts插件提供了三个选取设置和格局调用,具体可参谋项目官方网址:

驷比不上舌来关爱jQuery代码,大家照旧使用在线选座插件:jQuery SeatCharts。首先铺排轻轨车厢座位布局,笔者若是在01号车厢内有一等座和二等座若干,中间经过出入口通道隔开分离,大约布局如下:

正文实例陈述了jQuery完成的数值范围range2dslider选择插件特效。分享给我们供大家参谋。具体如下:
那是是一款简单的jquery插件,使用该插件后兑现鼠标能够滑动(拖动)调节数值范围选取的特效代码。
运作效果图:                            
——————-翻看效果
下载源码——————-

你可能感兴趣的稿子:

  • Android创设炫丽的影片票在线选座app在线选座功用
  • 据悉jQuery完结在线选座之火车版
  • 依据jquery完结在线选座订座之影院篇
  • Android自定义view完成电影票在线选座成效

接下来定义图例样式,关键是暗访点击事件click():用户点击座位时,借使座位状态为可选(available),那么点击座位后,将座位音讯(几排几座)加入到左边手的已选座列表中,并妄想总票数和总金额;如果座位状态为已入选(selected),那么再次点击座位后,则会将已入选的位子消息从侧边的位子列表中去除,并将意况设置可选;假如座位状态为已售出(unavailable),则不可点击座位。最后采纳get()方法将已售出的座位号状态设置为已卖出。

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; 
 } 
}, 

如上就是为大家分享的jQuery达成的数值范围选取特效代码,希望我们可以欣赏。

<div class="demo"> 
 <div id="seat-map"> 
 <div class="front">屏幕</div>   
 </div> 
 <div class="booking-details"> 
 <p>影片:星际穿越3D</p> 
 <p>时间:11月14日 21:00</p> 
 <p>座位:</p> 
 <ul id="selected-seats"></ul> 
 <p>票数:0</p> 
 <p>总计:<b>¥0</b></p> 
 <button class="checkout-button">确定购买</button> 
 <div id="legend"></div> 
 </div> 
</div> 

//已售出不可选座

admin

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注