jQuery UI Layout'浮动按钮'

Question

我在我的应用程序中使用了jQuery UI Layout插件，但用户似乎在切换西部和东部面板时遇到了一些问题。这是因为触发器按钮相对较小。谷歌有一个漂亮的'瓣'浮动按钮（见图），我想在jQuery UI布局插件中实现相同的效果;但我很难这样做。我发现我可以在切换器中添加自定义按钮（如example所示），但它们位于div的overflow:hidden中，所以我不能将它们制作得比边框宽的5个像素宽。

有没有人有关于如何在jQuery UI布局中重新创建Google按钮样式的线索？

Answer 1

我发现：

我添加额外的div S为按钮，像这样：

 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; 
}