jquery를 기반으로 한 온라인 좌석 선택 및 예약의 시네마 장-JS 튜토리얼-php.cn

jquery를 기반으로 한 온라인 좌석 선택 및 예약의 시네마 장

PHP中文网

풀어 주다： 2016-05-16 15:42:58

원래의

2644명이 탐색했습니다.

먼저 렌더링을 보여드리겠습니다(소스코드 다운로드 지원):

온라인으로 티켓을 구매할 때(영화표, 기차표 등) , 우리는 우리 자신의 좌석을 선택할 수 있습니다. 개발자는 페이지에 좌석 목록을 표시하며, 사용자는 사용 가능한 좌석과 결제 내역을 한눈에 확인할 수 있습니다. 이 기사에서는 영화관 티켓 구매를 예로 들어 좌석 선택 방법, 좌석 선택 데이터 처리 방법 등을 보여줍니다.

여기에서는 맞춤형 좌석 유형 및 가격, 맞춤형 스타일 및 설정을 지원하는 jQuery 기반의 온라인 좌석 선택 플러그인인 jQuery Seat Charts를 소개하고자 합니다. 선택한 좌석은 좌석의 키보드 제어도 지원합니다.

HTML

영화 "인터스텔라"의 좌석 선택 페이지에 들어간다고 가정하겠습니다. 페이지 레이아웃은 위의 큰 그림을 참조하세요. 해당 페이지는 #seat-map 에 표시됩니다. 오른쪽의 #예매상세정보에서는 선택한 좌석정보와 #선택석 및 티켓금액 정보가 표시됩니다. 좌석, 결제 페이지에서 확인하시면 결제가 완료됩니다.

屏幕影片：星际穿越3D时间：11月14日 21:00座位：票数：0总计：￥0

로그인 후 복사

CSS

CSS를 사용하여 각 요소를 변환합니다. 페이지 요소 미화, 특히 좌석 목록 레이아웃은 좌석 상태(판매됨, 옵션 좌석, 선택 좌석 등)에 대해 다양한 스타일을 설정합니다. 물론 스타일에 따라 CSS 코드를 수정할 수 있습니다. 프로젝트 페이지의

.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} 
p.seatCharts-cell {color: #182C4E;height: 25px;width: 25px;line-height: 25px;margin: 3px;float: left;text-align: center;outline: none;font-size: 13px;} 
p.seatCharts-seat {color: #fff;cursor: pointer;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius: 5px;} 
p.seatCharts-row {height: 35px;} 
p.seatCharts-seat.available {background-color: #B9DEA0;} 
p.seatCharts-seat.focused {background-color: #76B474;border: none;} 
p.seatCharts-seat.selected {background-color: #E6CAC4;} 
p.seatCharts-seat.unavailable {background-color: #472B34;cursor: not-allowed;} 
p.seatCharts-container {border-right: 1px dotted #adadad;width: 400px;padding: 20px;float: left;} 
p.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}

로그인 후 복사

jQuery

jQuery

이 예제는 jQuery를 기반으로 하므로 jquery 라이브러리와 좌석 선택 플러그인인 jQuery Seat Charts를 먼저 로드하는 것을 잊지 마세요.

?
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.seat-charts.min.js"></script>

로그인 후 복사

다음으로 요금, 좌석 공간, 티켓 수, 총 금액과 같은 요소를 정의한 다음 플러그인을 호출합니다. $('#seat-map').seatCharts( ) .

먼저 극장의 좌석은 고정되어 있습니다. 이 예에서는 3열이 통로이고, 3열과 4열의 오른쪽 빈 좌석이 출구입니다. 마지막 열에 커플석이 있으므로 상영실의 레이아웃은 다음과 같습니다. 🎜>

아아아아아아아

아아아아아아아아
__________
아아아아아아__
아아아아아아아
아아아아아아아아
아아아아아아아아
아아아아 아아아아
아아아아아아아아
아아__아아 __aa

저희는 a를 사용하여 좌석을 나타내고 _Empty 기호는 좌석이 없음을 의미합니다. 물론 a, b, c 등을 사용하여 다른 층의 좌석을 나타낼 수도 있습니다.

그런 다음 범례 스타일을 정의하는 것이 핵심입니다. click(): 사용자가 좌석을 클릭할 때 좌석 상태가 사용 가능(available)인 경우 클릭한 후 좌석정보(행,열)가 우측의 선택된 좌석목록에 추가되며, 좌석상태가 선택(선택)되면 총투표수와 총액이 계산됩니다. 해당 좌석을 다시 클릭하시면 오른쪽 좌석에 해당 좌석 정보가 추가됩니다. 목록에서 삭제하시고 해당 좌석 상태를 선택사항으로 설정하시면 해당 좌석을 클릭하실 수 없습니다. 마지막으로 get() 메소드를 사용하여 판매된 좌석 번호의 상태를 판매로 설정합니다.

상세 코드는 다음과 같습니다.

var price = 80; //票价
$(document).ready(function() {
var $cart = $(&#39;#selected-seats&#39;), //座位区
$counter = $(&#39;#counter&#39;), //票数
$total = $(&#39;#total&#39;); //总计金额
var sc = $(&#39;#seat-map&#39;).seatCharts({
map: [ //座位图
 &#39;aaaaaaaaaa&#39;,
 &#39;aaaaaaaaaa&#39;,
 &#39;__________&#39;,
 &#39;aaaaaaaa__&#39;,
 &#39;aaaaaaaaaa&#39;,
 &#39;aaaaaaaaaa&#39;,
 &#39;aaaaaaaaaa&#39;,
 &#39;aaaaaaaaaa&#39;,
 &#39;aaaaaaaaaa&#39;,
 &#39;aa__aa__aa&#39;
],
legend : { //定义图例
 node : $(&#39;#legend&#39;),
 items : [
 [ &#39;a&#39;, &#39;available&#39;, &#39;可选座&#39; ],
 [ &#39;a&#39;, &#39;unavailable&#39;, &#39;已售出&#39;]
 ]  
},
click: function () { //点击事件
 if (this.status() == &#39;available&#39;) { //可选座
 $(&#39;<li>&#39;+(this.settings.row+1)+&#39;排&#39;+this.settings.label+&#39;座</li>&#39;)
  .attr(&#39;id&#39;, &#39;cart-item-&#39;+this.settings.id)
  .data(&#39;seatId&#39;, this.settings.id)
  .appendTo($cart);
 $counter.text(sc.find(&#39;selected&#39;).length+1);
 $total.text(recalculateTotal(sc)+price);
 return &#39;selected&#39;;
 } else if (this.status() == &#39;selected&#39;) { //已选中
 //更新数量
 $counter.text(sc.find(&#39;selected&#39;).length-1);
 //更新总计
 $total.text(recalculateTotal(sc)-price);
 //删除已预订座位
 $(&#39;#cart-item-&#39;+this.settings.id).remove();
 //可选座
 return &#39;available&#39;;
 } else if (this.status() == &#39;unavailable&#39;) { //已售出
 return &#39;unavailable&#39;;
 } else {
 return this.style();
 }
}
});
//已售出的座位
sc.get([&#39;1_2&#39;, &#39;4_4&#39;,&#39;4_5&#39;,&#39;6_6&#39;,&#39;6_7&#39;,&#39;8_5&#39;,&#39;8_6&#39;,&#39;8_7&#39;,&#39;8_8&#39;, &#39;10_1&#39;, &#39;10_2&#39;]).status(&#39;unavailable&#39;);
});
//计算总金额
function recalculateTotal(sc) {
var total = 0;
sc.find(&#39;selected&#39;).each(function () {
total += price;
});
return total;
}

로그인 후 복사

위 코드는 jquery를 사용하여 극장의 온라인 좌석 선택 및 예약을 구현했습니다.