jQuery 플러그인 좌석표 사용에 대한 자세한 설명(코드 포함)

php中世界最好的语言
풀어 주다: 2018-04-25 11:40:49
원래의
8089명이 탐색했습니다.

이번에는 jQuery 플러그인 좌석표 사용에 대한 자세한 설명(코드 포함)을 가져왔습니다. jQuery 플러그인 좌석표 사용에 대한 자세한 설명의 주의사항은 무엇인가요? 다음은 실제 사례입니다. 살펴보겠습니다.

JQuery 기반의 온라인 좌석 선택 플러그인 좌석 차트 소스 코드입니다. 항공권, 영화 티켓, 버스 티켓 등의 좌석 선택에 적합한 jquery.seat-charts 플러그인입니다. 왼쪽 좌석을 클릭하면 오른쪽 좌석정보가 바로 표시되며, 합계를 계산하는 기능이 있습니다.

기능: 맞춤형 좌석 유형 및 가격 지원, 맞춤형 스타일 지원, 선택 불가능한 좌석 설정 지원, 좌석 선택을 위한 키보드 제어 지원도 지원합니다.

렌더링 실행: 提 팁: 브라우저에서 정상적으로 실행할 수 없는 경우 찾아보기 모드를 전환해 볼 수 있습니다.

귀하께 공유해 드리는 jQuery 온라인 좌석 선택 플러그인 좌석 차트 특수 효과 코드는 다음과 같습니다

<!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>
<p class="wrapper">
 <p class="container">
 <p id="seat-map">
  <p class="front-indicator">机头</p>
 </p>
 <p 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>  
  <p id="legend"></p>
 </p>
 </p>
</p>
<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>
<p align="center" style="clear:both;font-size:12px;color:#666;font:normal 14px/24px &#39;MicroSoft YaHei&#39;;">
<p>适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
</p>
</body>
</html>
로그인 후 복사
이 기사의 사례를 읽으신 후 방법을 마스터하셨으리라 믿습니다. 더 흥미로운 정보를 보려면 다른 관련 항목을 주목해 주세요. PHP 중국어 웹사이트의 기사!

추천 자료:

양식에 텍스트 버튼을 구현하기 위한 jQuery의 특수 효과 모음

jQuery를 사용하여 체크박스가 있는 테이블을 구현하는 단계에 대한 자세한 설명

위 내용은 jQuery 플러그인 좌석표 사용에 대한 자세한 설명(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿