jQuery_jquery를 기반으로 한 온라인 좌석 선택의 고속철도 버전

렌더링 디스플레이:

데모 보기 소스 코드 다운로드

영화관 온라인 좌석 선택은 물론, 비행기 기내 좌석 선택은 물론, 버스와 기차표 선택에도 참여할 예정입니다. 언젠가 기차표를 구매하고 온라인 좌석 선택도 제공할 수 있다면 오늘은 jQuery 좌석 선택 플러그인을 사용하여 고속 열차 좌석 레이아웃, 좌석 선택 및 다양한 등급의 가격 책정을 완료하는 방법을 소개하겠습니다. 좌석.

HTML

이전 글과 동일: jQuery 온라인 좌석 선택 및 예약(극장), 동일한 html 구조를 사용하며 왼쪽에 위치 레이아웃 지도가 표시되고 오른쪽에 좌석 선택 관련 정보가 표시됩니다.

이 기사에서는 자세히 설명하지 않는 관련 CSS 코드를 보려면 DEMO 소스 코드를 다운로드하세요.

<div class="container"> 
 <div id="seat-map"> 
 <div class="front">01车</div> 
 </div> 
 <div class="booking-details"> 
 <h3> 选座信息：</h3> 
 <ul id="selected-seats"></ul> 
 <p>票数: <span id="counter"></span></p> 
 <p>总计: ￥<span id="total">0</span></p> 
  
 <button class="checkout-button">确定购买</button> 
 <div id="legend"></div> 
 </div> 
</div> 

jQuery

jQuery 코드에 집중하기 위해 온라인 좌석 선택 플러그인인 jQuery Seat Charts를 계속 사용합니다. 먼저, 고속철도 객차의 좌석 배치는 01호차에 1등석과 2등석이 있으며, 출입구 통로로 구분되어 있다고 가정합니다.

map: [ //座位图 
 'ff__ff', 
 'ff__ff', 
 '______', 
 'eee_ee', 
 'eee_ee', 
 'eee_ee', 
 'eee_ee', 
 'eee_ee', 
 'eee_ee' 
], 

위 코드 f는 1등석, e는 2등석, "_" 기호는 통로를 나타냅니다.

그런 다음 좌석 유형의 관련 속성을 정의해야 합니다.

seats: { //定义座位属性 
 f: { 
 price : 100, 
 classes : 'first-class', 
 category: '一等座' 
 }, 
 e: { 
 price : 40, 
 classes : 'economy-class', 
 category: '二等座' 
 }  
}, 

위 코드는 1등석과 2등석의 가격, 카테고리 이름, 해당 CSS 스타일을 정의합니다. 나중에 data() 메서드를 통해 호출할 수 있습니다.

다음으로 이름 지정을 사용하여 좌석 배치도의 행 및 열 정보를 정의합니다. 아래에서 top을 true로 설정하면 상단 가로좌표(행)가 표시됩니다. 열과 행은 가로좌표(행)와 세로좌표(열)를 정의하는 데 사용됩니다. 값, getLabel은 좌석 정보를 반환하는 데 사용됩니다. 예: 01A는 01행의 좌석 A를 의미합니다.

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 : { //定义图例 
 node : $('#legend'), 
 items : [ 
 [ 'f', 'available', '一等座' ], 
 [ 'e', 'available', '二等座'], 
 [ 'f', 'unavailable', '已售出'] 
 ]  
}, 

마지막으로 외부 좌석 배치도의 위치를 ​​클릭하면 현재 좌석 상태에 따라 티켓 수, 총액 계산 등 다양한 처리가 이루어집니다. 극장 내 안내를 참고하세요. 장.

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() 메소드를 사용하여 판매되어 이용할 수 없는 좌석을 설정합니다.

//매진, 좌석 없음

sc.get(['01_A', '04_A', '07_B', '07_F']).status('unavailable'); 

홈페이지에서 티켓 구매가 잦은 경우, 좌석이 선점된 경우 좌석 배치도를 제때에 새로고침할 수 있으니 주의가 필요합니다. ajax를 사용하여 비동기 요청을 하고 10초마다 실행되도록 설정할 수 있습니다. 다음 코드를 참조할 수 있습니다.

setInterval(function() { 
 $.ajax({ 
 type : 'get', 
 url : 'book.php', 
 dataType : 'json', 
 success : function(response) { 
 //遍历所有座位 
 $.each(response.bookings, function(index, booking) { 
 //将已售出的座位状态设置为已售出 
 sc.status(booking.seat_id, 'unavailable'); 
 }); 
 } 
 }); 
}, 10000); //每10秒

위 내용은 본 글에서 소개한 jQuery를 기반으로 한 고속철도 온라인 좌석 선택 버전입니다.