이번에는 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 'MicroSoft YaHei';"> <p>适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p> </p> </body> </html>
양식에 텍스트 버튼을 구현하기 위한 jQuery의 특수 효과 모음
jQuery를 사용하여 체크박스가 있는 테이블을 구현하는 단계에 대한 자세한 설명
위 내용은 jQuery 플러그인 좌석표 사용에 대한 자세한 설명(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!