Бронирование фильмов, как бронирование временного интервала
Я использую этот шаблон из w3layouts(Ссылка на шаблон: ссылка здесь), чтобы сделать бронирование фильма, как бронирование времени. В этом шаблоне места могут быть выбраны. Мне нужно сгруппировать 2 места (ячейки), как если бы каждая ячейка соответствовала полчаса. поэтому я сгруппировал 2 ячейки, разделив 2 ячейки, используя "_"
Как я могу уменьшить пространство между каждой парой ячеек? Я пытался внести изменения в jquery.seat-charts.js
$row.append(character != '_' ?
//if the character is not an underscore (empty space)
(function(naming) {
//so users don't have to specify empty objects
settings.seats[character] = character in settings.seats ? settings.seats[character] : {};
var id = overrideId ? overrideId : naming.getId(character, naming.rows[row], naming.columns[column]);
seats[id] = new seat({
id : id,
label : overrideLabel ?
overrideLabel : naming.getLabel(character, naming.rows[row], naming.columns[column]),
row : row,
column : column,
character : character
});
seatIds.push(id);
return seats[id].node();
})(settings.naming) :
//this is just an empty space (_)
$('<div></div').addClass('seatCharts-cell seatCharts-space')
);
});
fn.append($row);
});
Как я могу изменить нумерацию и наименование, чтобы в каждой строке с 6-часовыми временными интервалами (6x2=12 ячеек) отображался час над группой этих ячеек.
Например: 00:00 выше первой пары ячеек, затем 01:00 выше следующей до 23:00
Мой HTML-файл:
<!--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE html>
<html>
<head>
<title>Time Slots Booking</title>
<!-- for-mobile-apps -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Movie Ticket Booking Widget Responsive, Login form web template, Sign up Web Templates, Flat Web Templates, Login signup Responsive web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<!-- //for-mobile-apps -->
<link href='//fonts.googleapis.com/css?family=Kotta+One' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/jquery.seat-charts.js"></script>
</head>
<body>
<div class="content">
<h1>time booking</h1>
<div class="main">
<h2>Please select your time slot</h2>
<div class="demo">
<div id="seat-map">
<div class="front">room1</div>
</div>
<div class="booking-details">
<ul class="book-left">
<li>Room</li>
<li>DATE</li>
<li>TIME</li>
</ul>
<ul class="book-right">
<li>:Room1</li>
<li>: </li>
<li>: </span></li>
</ul>
<div class="clear"></div>
<!-- <ul id="selected-seats" class="scrollbar scrollbar1"></ul> -->
<button class="checkout-button">Book Now</button>
</div>
<div id="legend" style="display:inline"></div>
<div style="clear:both"></div>
</div>
<script type="text/javascript">
var price = 10; //price
$(document).ready(function() {
var $cart = $('#selected-seats'), //Sitting Area
$counter = $('#counter'), //Votes
$total = $('#total'); //Total money
var sc = $('#seat-map').seatCharts({
map: [ //Seating chart
'aa_aa_aa_aa_aa_aa',
'aa_aa_aa_aa_aa_aa',
'aa_aa_aa_aa_aa_aa',
'aa_aa_aa_aa_aa_aa'
],
naming : {
top : false,
getLabel : function (character, row, column) {
return column;
}
},
legend : { //Definition legend
node : $('#legend'),
items : [
[ 'a', 'available', 'Available' ],
[ 'a', 'unavailable', 'Booked'],
[ 'a', 'selected', 'Selected']
]
},
click: function () { //Click event
if (this.status() == 'available') { //optional seat
$('<li>Row'+(this.settings.row+1)+' Seat'+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') { //Checked
//Update Number
$counter.text(sc.find('selected').length-1);
//update totalnum
$total.text(recalculateTotal(sc)-price);
//Delete reservation
$('#cart-item-'+this.settings.id).remove();
//optional
return 'available';
} else if (this.status() == 'unavailable') { //sold
return 'unavailable';
} else {
return this.style();
}
}
});
//sold seat
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');
});
//sum total money
function recalculateTotal(sc) {
var total = 0;
sc.find('selected').each(function () {
total += price;
});
return total;
}
</script>
</div>
</div>
<script src="js/jquery.nicescroll.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>
как сделать выделенные, доступные и забронированные индикационные ячейки в одной строке. Я старался: <div id="legend" style="display:inline"></div> но это не работает
Ссылка на шаблон: ссылка здесь