Sto cercando di adattare alle mie esigenze un progetto realizzato per disegnare i posti un autobus.
Quello che voglio fare � disegnare una platea di un teatro.
Provando a modificare il disegno per inserire i corridoi di entrata si alterano gli spazi tra le file vicine al corridoio.
Questo � il link alla pagina http://www.ilguitto.org/bus/indexprova.php
Qui sotto il sorgente:
codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Demo Seat Reservation with jQuery</title>
<!-- All in One SEO Pack 1.6.13.2 by Michael Torbert of Semper Fi Web Design[247,323] -->
<meta name="description" content="cinema and ticket" />
<meta name="keywords" content="online ticket booking system,online cinema booking,jquery,seat reservation,seat selection,demo" />
<link rel="canonical" href="http://techbrij.com/780/seat-reservation-with-jquery" />
<!-- /all in one seo pack -->
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<style type="text/css">
#holder{
height:600px;
width:600px;
background-color:#FFEBCD;
border:1px solid #A4A4A4;
margin-left:10px;
}
#place {
position:relative;
margin:10px;
}
#place a{
font-size:0.5em;
}
#place li
{
list-style: none outside none;
position: absolute;
}
#place li:hover
{
background-color:yellow;
}
#place .seat{
background:url("images/sediaDispo.png") no-repeat scroll 0 0 transparent;
height:33px;
width:33px;
display:block;
}
#place .selectedSeat
{
background-image:url("images/sediaVendu.png");
}
#place .selectingSeat
{
background-image:url("images/sediaPreno.png");
}
#place .row-6, #place .row-7{
margin-top:10px;
}
#place .col-7, #place .col-8{
margin-left:10px;
}
#seatDescription{
padding:0px;
}
#seatDescription li{
/*verticle-align:left;*/
list-style: none outside none;
padding-left:35px;
height:35px;
float:left;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="holder">
<ul id="place">
</ul>
</div>
<div style="width:800px;text-align:center;overflow:auto">
<ul id="seatDescription">
<li style="background:url('images/sediaDispo.png') no-repeat scroll 0 0 transparent;">Available Seat</li>
<li style="background:url('images/sediaVendu.png') no-repeat scroll 0 0 transparent;">Booked Seat</li>
<li style="background:url('images/sediaPreno.png') no-repeat scroll 0 0 transparent;">Selected Seat</li>
</ul>
</div>
<div style="width:500px;text-align:left;margin:5px">
<input type="button" id="btnShowNew" value="Show Selected Seats" /><input type="button" id="btnShow" value="Show All" /> </div>
</form>
<script type="text/javascript">
$(function () {
var settings = {
rows: 15,
cols: 15,
rowCssPrefix: 'row-',
colCssPrefix: 'col-',
seatWidth: 35,
seatHeight: 35,
seatCss: 'seat',
selectedSeatCss: 'selectedSeat',
selectingSeatCss: 'selectingSeat'
};
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>');
}
}
$('#place').html(str.join(''));
};
//case I: Show from starting
//init();
//Case II: If already booked esempio le sedie [1, 2, 3]
var bookedSeats = [1, 2];
init(bookedSeats);
$('.' + 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($('#place li.' + settings.selectedSeatCss + ' a, #place li.'+ settings.selectingSeatCss + ' a'), function (index, value) {
str.push($(this).attr('title'));
});
alert(str.join(','));
})
$('#btnShowNew').click(function () {
var str = [], item;
$.each($('#place li.' + settings.selectingSeatCss + ' a'), function (index, value) {
item = $(this).attr('title');
str.push(item);
});
alert(str.join(','));
})
});
</script>
</body>
</html>
Rispondi quotando
Originariamente inviata da carlomarangoni
