jQuery UI 布局“浮动按钮”

Question

我在我的应用程序中使用了jQuery UI Layout 插件，但用户似乎在切换西面板和东面板时遇到了一些问题。这是因为切换按钮相对较小。

Google 有一个漂亮的“襟翼”浮动按钮（见图），我想在 jQuery UI 布局插件中实现相同的效果；但我很难做到这一点。我发现我可以在切换器中添加自定义按钮（如 example 所示），但它们位于 div 和 overflow:hidden 中，所以我不能让它们比边框的 5 个像素更宽很宽。

有人知道如何在 jQuery UI 布局中重新创建 Google 按钮样式吗？

Answer 1

我发现：

我为按钮添加了额外的divs，如下所示：

        options["west__togglerContent_closed"] = '<div class="btnToggler close west"></div>';
        options["west__togglerContent_open"]   = '<div class="btnToggler open  west"></div>';

        options["east__togglerContent_closed"] = '<div class="btnToggler close east"></div>';
        options["east__togglerContent_open"]   = '<div class="btnToggler open  east"></div>';

        options["north__togglerContent_closed"] = '<div class="btnToggler close north"></div>';
        options["north__togglerContent_open"]   = '<div class="btnToggler open  north"></div>';

        options["south__togglerContent_closed"] = '<div class="btnToggler close south"></div>';
        options["south__togglerContent_open"]   = '<div class="btnToggler open  south"></div>';

并添加样式：

.btnToggler.north,
.btnToggler.south
{
    height:5px;
    width:50px;
    background-image: url("./arrow_up_down.png");
    background-size:contain;
    background-position:top center;
    background-repeat: no-repeat;
    background-color:white;
    transition:0.2s;
    border: 1px solid #ccc;
    opacity:0.8;

}

.btnToggler.west,
.btnToggler.east
{
    height:50px;
    width:7px;
    background-image: url("./arrow_left_right.png");
    background-size:contain;
    background-position:center left;
    background-repeat: no-repeat;
    transition:0.2s;
    border-right: 1px solid #ccc;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    opacity:0.8;

}

.btnToggler.south
{
    position:absolute;
    bottom:0px;
    left:0px;
    border-left: 1px solid #ccc;
}

.btnToggler.east
{
    position:absolute;
    right:0px;
    top:0px;
    border-left: 1px solid #ccc;
}

.btnToggler.east:hover,
.btnToggler.west:hover
{
    opacity:1;
    background-color:white;
    width:15px;
    transition:0.2s;
}
.btnToggler.north:hover,
.btnToggler.south:hover
{
    opacity:1;
    background-color:white;
    height:15px;
    transition:0.2s;
}