用飞机的翅膀建立座位图 [英] Building a seatmap with kind of wings for the plane
问题描述
我必须为飞机构建座位图，仅使用HTML，CSS和jQuery。一般来说这没有问题，但我不知道如何添加翅膀到飞机。
目前我标记的座位（它被放置在翅膀）与更暗的外部边界。但这不是很好。我想添加一种翅膀到飞机本身，他们必须是。或者，如果不是翅膀风格，至少应该有一个边界在飞机外面。任何想法如何做到这一点？
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>
小提琴1： http://jsfiddle.net/SchweizerSchoggi/0Lu4vspq/1/
好吧，我有另一个小提琴，有点更新。
这里我们更好地了解翅膀在哪里（或应该） - >
Fiddle 2： http://jsfiddle.net/SchweizerSchoggi/0Lu4vspq/3/
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.
推荐答案
这是我的解决方案，有两个翅膀的CSS：
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;
}
和
<div id="wings"></div>
代码之前和之后。
UPDATE
您可以通过PHP动态编辑CSS。你需要一个不同的值，但在飞机上只有两个翅膀。
You can edit dynamically the CSS via PHP. You need a different value but in a plane there are only two wings.
如果位置是相同的（或不是，你可以使用两个CSS代码左翼和
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.
在这一点上，CSS在这两点上发生了变化：
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
}
strong>
SECOND UPDATE
如果你想要更像一个翅膀，CSS将是：
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/
注意：我已移除 border：solid 5px＃333; ，因为它是多余的。
Note: I have removed border: solid 5px #333; because it is redundant.
这篇关于用飞机的翅膀建立座位图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
