Building a seatmap with kind of wings for the plane

问题:

I have to build a seatmap for planes, using only HTML, CSS and jQuery. In general that's no problem, but I don't know how to add wings to the plane. Currently I mark the seats (which are placed over the wings) with a darker outside border. But this is not nice. I would like to add kind of "wings" to the plane itself where they have to be. Or, if not wings-style, at least there should be a border on the "plane outside". Any ideas how to do this?

<div id="seatmap">     <div id="plane">         <table class="rows">         <tr>             <td>F</td>         </tr>         <tr>             <td>D</td>         </tr>         <tr>             <td></td>         </tr>         <tr>             <td>C</td>         </tr>         <tr>             <td>A</td>         </tr>         </table>          <div id="cabin">                     <table>             <tr>                 <td title="1F" class="seatAvailable"></td>                 <td title="2F" class="seatUnavailable"></td>                 <td title="" class="noSeatGalley"></td>                 <td title="4F" class="ExtraPay"></td>                 <td title="5F" class="seatAvailable wingSeat"></td>                 <td title="6F" class="seatUnavailable wingSeat"></td>                 <td title="7F" class="seatAvailable wingSeat"></td>                 <td title="8F" class="noSeatStorage wingSeat"></td>                 <td title="9F" class="seatAvailable"></td>                 <td title="10F" class="seatAvailable"></td>                 <td title="11F" class="seatAvailable LargeSeat"></td>             </tr>             <tr>                 <td title="1D" class="seatAvailable"></td>                 <td title="2D" class="seatUnavailable"></td>                 <td title="" class="noSeatGalley"></td>                 <td title="4D" class="ExtraPay"></td>                 <td title="5D" class="seatAvailable"></td>                 <td title="6D" class="seatUnavailable"></td>                 <td title="7D" class="seatAvailable"></td>                 <td title="8D" class="noSeatStorage"></td>                 <td title="9D" class="seatAvailable"></td>                 <td title="10D" class="seatAvailable"></td>                 <td title="11D" class="seatAvailable ExtraPay LargeSeat"></td>             </tr>             <tr>                 <td class="noSeatGalley">1</td>                 <td class="noSeatGalley">2</td>                 <td class="noSeatGalley"></td>                 <td class="noSeatGalley">4</td>                 <td class="noSeatGalley">5</td>                 <td class="noSeatGalley">6</td>                 <td class="noSeatGalley">7</td>                 <td class="noSeatGalley">8</td>                 <td class="noSeatGalley">9</td>                 <td class="noSeatGalley">10</td>                 <td class="noSeatGalley">11</td>             </tr>             <tr>                 <td title="1C" class="seatAvailable"></td>                 <td title="2C" class="seatAvailable"></td>                 <td title="" class="noSeatGalley"></td>                 <td title="4C" class="ExtraPay"></td>                 <td title="5C" class="seatUnavailable"></td>                 <td title="6C" class="seatAvailable"></td>                 <td title="7C" class="seatAvailable"></td>                 <td title="8C" class="noSeatLavatory"></td>                 <td title="9C" class="seatAvailable"></td>                 <td title="10C" class="seatAvailable"></td>                 <td title="11C" class="seatAvailable ExtraPay LargeSeat"></td>             </tr>             <tr>                 <td title="1A" class="seatAvailable"></td>                 <td title="2A" class="seatAvailable"></td>                 <td title="" class="noSeatGalley"></td>                 <td title="4A" class="ExtraPay"></td>                 <td title="5A" class="seatUnavailable wingSeat"></td>                 <td title="6A" class="seatAvailable wingSeat"></td>                 <td title="7A" class="seatAvailable wingSeat"></td>                 <td title="8A" class="noSeatLavatory wingSeat"></td>                 <td title="9A" class="seatAvailable"></td>                 <td title="10A" class="seatAvailable"></td>                 <td title="11A" class="seatUnavailable ExtraPay LargeSeat"></td>             </tr>             </table>                     </div>         <div style="clear: both;"></div>     </div> </div> 

Fiddle 1: http://jsfiddle.net/SchweizerSchoggi/0Lu4vspq/1/

OK, I have another Fiddle, a bit updated. Here we have a better idea of where the wings are (or should be) -> Fiddle 2: http://jsfiddle.net/SchweizerSchoggi/0Lu4vspq/3/

The problem still is, that I want the border on the outside of the plane, not inside the cabin.

回答1:

This is my solution, with a CSS for the two wings:

http://jsfiddle.net/0Lu4vspq/6/

#wings {     border: solid 5px #333;     width: 80px;     position: relative;     left: 155px; } 

And

<div id="wings"></div> 

Before and after your code.

UPDATE

You can edit dynamically the CSS via PHP. You need a different value but in a plane there are only two wings.

If there position are the same (or not, you can use two CSS codes for wing left and wing right) you have only to find the point where the wing start and its length.

At this point the CSS change in this two points:

#wings {     border: solid 5px #333;     width: 80px;   % <-- Length the wing     position: relative;     left: 153px;   % <-- Where the wing start } 

SECOND UPDATE

If you would like something more like a wing, the CSS will be:

#wings_down {     left: 155px;     width: 80px;     position: relative;     height: 50px;     -webkit-transform: skew(20deg);        -moz-transform: skew(20deg);          -o-transform: skew(20deg);     transform: skew(20deg);     background: #333; }  #wings_up {     left: 155px;     width: 80px;     position: relative;     height: 50px;     -webkit-transform: skew(-20deg);        -moz-transform: skew(-20deg);          -o-transform: skew(-20deg);     transform: skew(-20deg);     background: #333; } 

http://jsfiddle.net/0Lu4vspq/17/

Note: I have removed border: solid 5px #333; because it is redundant.

回答2:

I had a play adding a class of wingRowTop and wingRowBottom to the tr which has the wingseat.

http://jsfiddle.net/0Lu4vspq/4/

or with :before in the first cells to create a slope on the wings (in red so you can see) http://jsfiddle.net/0Lu4vspq/5/

using negative margins and border-collapse, this is what I came up with. I'm sure with some more HTML classes and border-radius that its possible to create a wing shape in the cells.

.wingRowTop { border-collapse: collapse; border-spacing: 0px; position:absolute; margin-top:-37px;  } .wingRowBottom { position:absolute; border-collapse: collapse; border-spacing: 0px; } #cabin tr:first-child td.wingSeat { background-color: #DEDEDE; border-right:5px solid #DEDEDE;} #cabin tr:last-child td.wingSeat { background-color: #DEDEDE; border-right:5px solid #DEDEDE 

回答3:

Thank you all for your great support! At the end I am going to use a combination of both of your solutions: Wf4 has included the given solution regarding wings positioning and worked out the first "wings outside the cabin" approach. Giacomo Alessandroni meanwhile had a great idea for the wings layout.

Here is my final Fiddle: http://tinyurl.com/kr5de25

回答4:

So, I saw this and funnily enough, I'm writing a simulator for airport checkin. So thankyou @SchweizerSchoggi for asking the question and keeping the idea going.

One thing I thought would be useful is a generator for the seatmap, I've made a first attempt over at this fiddle: http://jsfiddle.net/Mikebert4/0Lu4vspq/34/

On my todo will be to make this into a proper constructor object, ie:

var seatmap = new SeatMap(options); 

Also, this only renders full rows of seats (uses Math.floor() to calculate the number of rows to display. But it's a start!

文章来源: Building a seatmap with kind of wings for the plane