Xây dựng Hệ thống Đặt chỗ Ghế bằng jQuery và PHP

Bạn có thêm thư viện jquery.js bao gồm sau khi bao gồm tệp js của Slider Revolution một cách đơn giản.

Đặt chỗ Ghế với jQuery

HTML: Mã

<h2> Choose seats by clicking the corresponding seat in the layout below:</h2>
<div id="holder">
<ul id="location">
</ul>
</div>
<div style="float:left;">
<ul id="seatDescription">
<li style="background:url('images/available_seat_img.gif') no-repeat scroll 0 0 transparent;">Available Seat</li>
<li style="background:url('images/booked_seat_img.gif') no-repeat scroll 0 0 transparent;">Booked Seat</li>
<li style="background:url('images/selected_seat_img.gif') no-repeat scroll 0 0 transparent;">Selected Seat</li>
</ul>
</div>
<div style="clear:both;width:100%">
<input type="button" id="btnShowNew" value="Show Selected Seats" />
<input type="button" id="btnShow" value="Show All" />
</div>

Cài đặt:

var settings = {
rows: 5,
cols: 15,
rowCssPrefix: 'row-',
colCssPrefix: 'col-',
seatWidth: 35,
seatHeight: 35,
seatCss: 'seat',
selectedSeatCss: 'selectedSeat',
selectingSeatCss: 'selectingSeat'
};

Bố trí Ghế:

var init = function (reservedSeat) {
var str = [], seatNo, className;
for (i = 0; i < settings.rows; i++) {
for (j = 0; j < settings.cols; j++) {
seatNo = (i + j * settings.rows + 1);
className = settings.seatCss + ' ' + settings.rowCssPrefix + i.toString() + ' ' + settings.colCssPrefix + j.toString();
if ($.isArray(reservedSeat) && $.inArray(seatNo, reservedSeat) != -1) {
className += ' ' + settings.selectedSeatCss;
}
str.push('<li class="' + className + '"' +
'style="top:' + (i * settings.seatHeight).toString() + 'px;left:' + (j * settings.seatWidth).toString() + 'px">' +
'<a title="' + seatNo + '">' + seatNo + '</a>' +
'</li>');
}
}
$('#location').html(str.join(''));
};
//case I: Show from starting
//init();

//Case II: If already booked
var bookedSeats = [5, 10, 25];
init(bookedSeats);

Lựa chọn Ghế:

Mã jQuery

$('.' + settings.seatCss).click(function () {
if ($(this).hasClass(settings.selectedSeatCss)){
alert('This seat is already reserved');
}
else{
$(this).toggleClass(settings.selectingSeatCss);
}
});

$('#btnShow').click(function () {
var str = [];
$.each($('#location li.' + settings.selectedSeatCss + ' a, #location li.'+ settings.selectingSeatCss + ' a'), function (index, value) {
str.push($(this).attr('title'));
});
alert(str.join(','));
})

$('#btnShowNew').click(function () {
var str = [], item;
$.each($('#location li.' + settings.selectingSeatCss + ' a'), function (index, value) {
item = $(this).attr('title');
str.push(item);
});
alert(str.join(','));
})

Mã CSS

#holder{
height:200px;
width:550px;
background-color:#F5F5F5;
border:1px solid #A4A4A4;
margin-left:10px;
}
#location {
position:relative;
margin:7px;
}
#location a{
font-size:0.6em;
}
#location li
{
list-style: none outside none;
position: absolute;
}
#location li:hover
{
background-color:yellow;
}
#location .seat{
background:url("images/available_seat_img.gif") no-repeat scroll 0 0 transparent;
height:33px;
width:33px;
display:block;
}
#location .selectedSeat
{
background-image:url("images/booked_seat_img.gif");
}
#location .selectingSeat
{
background-image:url("images/selected_seat_img.gif");
}
#location .row-3, #location .row-4{
margin-top:10px;
}
#seatDescription li{
verticle-align:middle;
list-style: none outside none;
padding-left:35px;
height:35px;
float:left;
}

Tôi hy vọng bạn đã hiểu về đặt chỗ ghế bằng jQuery và PHP.

• Bài đăng trên blog này ban đầu được xuất bản tại: https://www.pakainfo.com