You can book tickets by bus or plane using this method:
http://awrdev.g3tech.in/jquery_tutorials/ui-selectseats.html
It uses the selectable() API of jQuery UI project.
The code is :
$( "#selectable" ).selectable({
stop: function() {
var result = $( "#select-result" ).empty();
$( ".ui-selected", this ).each(function() {
var index = $( "#selectable
li" ).index( this );
result.append( " #" + ( index + 1 ) );
});
}
});
});
This code begs explanation. Hold on.
Let us look at the data:
<p id="feedback">
<span>You've selected:</span> <span id="select-result">none</span>.
</p>
<ol id="selectable">
<li class="ui-state-default">1</li>
<li class="ui-state-default">2</li>
<li class="ui-state-default">3</li>
<li class="ui-state-default">4</li>
<li class="ui-state-default">5</li>
<li class="ui-state-default">6</li>
<li class="ui-state-default">7</li>
<li class="ui-state-default">8</li>
<li class="ui-state-default">9</li>
<li class="ui-state-default">10</li>
<li class="ui-state-default">11</li>
<li class="ui-state-default">12</li>
</ol>
So the selectable regions are listed using the ol html element.
Which is nothing but ordered list.
And the class is given as "ui-state-default". Perhaps you could select
them beforehand.
I have not tried it.
Now imagine you are going to travel by bus or plane.
And the seating arrangement can be depicted this way.
Using CSS.
And you can book the tickets you desire by dragging the mouse. If you wish to
select the seat that is far away you can press control.
Okay the code is complicated because the seats selected are shown.
Otherwise it is pretty easy.
Just $('#foo').selectable().
But we are waiting for the user to stop selecting and when that event triggers
we show the user the seats he selected.
$( "#selectable" ).selectable({
stop: function() {
var result = $( "#select-result" ).empty();
$( ".ui-selected", this ).each(function() {
var index = $( "#selectable
li" ).index( this );
result.append( " #" + ( index + 1 ) );
});
}
});
});
We are waiting for the stop event and the function() body is given as
a hash value.
Note the {} and : separator.
So stop is the key and the function body is the value.
Now the #select-result id is actually the region we gave in the html
body where the results would show.
First we are emptying it with empty() to clear the previous selection.
Then we are iterating thro' the
ui-selected class and using the jQuery each() API we identify the
seat number using the index and
selectable li selectors.
Then we are appending it to the result id.
-Girish
--
Gayatri Hitech
http://gayatri-hitech.com
_______________________________________________
ILUGC Mailing List:
http://www.ae.iitm.ac.in/mailman/listinfo/ilugc
ILUGC Mailing List Guidelines:
http://ilugc.in/mailinglist-guidelines
