먼저 렌더링을 보여드리겠습니다(소스코드 다운로드 지원):
온라인으로 티켓을 구매할 때(영화표, 기차표 등) , 우리는 우리 자신의 좌석을 선택할 수 있습니다. 개발자는 페이지에 좌석 목록을 표시하며, 사용자는 사용 가능한 좌석과 결제 내역을 한눈에 확인할 수 있습니다. 이 기사에서는 영화관 티켓 구매를 예로 들어 좌석 선택 방법, 좌석 선택 데이터 처리 방법 등을 보여줍니다.
여기에서는 맞춤형 좌석 유형 및 가격, 맞춤형 스타일 및 설정을 지원하는 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
var price = 80; //票价 $(document).ready(function() { var $cart = $('#selected-seats'), //座位区 $counter = $('#counter'), //票数 $total = $('#total'); //总计金额 var sc = $('#seat-map').seatCharts({ map: [ //座位图 'aaaaaaaaaa', 'aaaaaaaaaa', '__________', 'aaaaaaaa__', 'aaaaaaaaaa', 'aaaaaaaaaa', 'aaaaaaaaaa', 'aaaaaaaaaa', 'aaaaaaaaaa', 'aa__aa__aa' ], legend : { //定义图例 node : $('#legend'), items : [ [ 'a', 'available', '可选座' ], [ 'a', 'unavailable', '已售出'] ] }, click: function () { //点击事件 if (this.status() == 'available') { //可选座 $('<li>'+(this.settings.row+1)+'排'+this.settings.label+'座</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)+price); return 'selected'; } else if (this.status() == 'selected') { //已选中 //更新数量 $counter.text(sc.find('selected').length-1); //更新总计 $total.text(recalculateTotal(sc)-price); //删除已预订座位 $('#cart-item-'+this.settings.id).remove(); //可选座 return 'available'; } else if (this.status() == 'unavailable') { //已售出 return 'unavailable'; } else { return this.style(); } } }); //已售出的座位 sc.get(['1_2', '4_4','4_5','6_6','6_7','8_5','8_6','8_7','8_8', '10_1', '10_2']).status('unavailable'); }); //计算总金额 function recalculateTotal(sc) { var total = 0; sc.find('selected').each(function () { total += price; }); return total; }