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