Question

我必须使用HTML，CSS和jQuery为飞机构建座位图。一般情况下没问题，但我不知道如何在飞机上添加机翼。目前我标记了座位（放置在机翼上方），外边缘较暗。但这并不好。我想添加一些＆＃34;翅膀＆＃34;他们必须去的飞机本身。或者，如果不是翅膀式的话，至少在外面的＃34;飞机上应该有一个边界。任何想法如何做到这一点？

<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/

好的，我有另一个小提琴，有点更新。在这里，我们可以更好地了解机翼的位置（或应该是） - ＆gt; 小提琴2：http://jsfiddle.net/SchweizerSchoggi/0Lu4vspq/3/

问题仍然存在，我想要飞机外侧的边界，而不是机舱内的边界。

Answer 1

我有一个将wingRowTop和wingRowBottom类添加到tr wingseat的游戏。

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

或在第一个细胞中使用:before在翅膀上创建一个斜坡（红色，这样你就可以看到） http://jsfiddle.net/0Lu4vspq/5/

使用负边距和边界崩溃，这就是我想出的。我确信有更多的HTML类和border-radius可以在单元格中创建一个翼形。

.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

Answer 2

这是我的解决方案，两翼的CSS：

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

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

和

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

代码之前和之后。

<强>更新

您可以通过PHP动态编辑CSS。你需要一个不同的值，但在一个平面上只有两个翅膀。

如果位置相同（或者不是，你可以使用两个CSS代码用于左翼和右翼），你只需要找到翼开始的点和它的长度。

此时CSS改变了这两点：

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

第二次更新

如果你想要一个更像翼的东西，CSS将是：

#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;，因为它是多余的。

Answer 3

谢谢大家的大力支持！最后，我将使用两种解决方案的组合： Wf4已经包含了关于机翼定位的给定解决方案，并制定了第一个“机舱外的机翼”方法。 Giacomo Alessandroni同时对机翼布局有个好主意。

这是我最后的小提琴： http://tinyurl.com/kr5de25

Answer 4

所以，我看到这个并且非常有趣，我正在为机场检查编写一个模拟器。所以谢谢@SchweizerSchoggi提出问题并保持这个想法。

我认为有用的一件事是座位图的生成器，我已经在这个小提琴上做了第一次尝试：http://jsfiddle.net/Mikebert4/0Lu4vspq/34/

在我的待办事项上将把它变成一个合适的构造函数对象，即：

var seatmap = new SeatMap(options);

此外，这只会呈现完整的排座位（使用Math.floor（）来计算要显示的行数。但这只是一个开始！

为飞机建造一个带有翅膀的座位图

4 个答案: