jQueryのUIレイアウト 'フローティングボタン'

Question

私のアプリケーションではjQuery UI Layoutプラグインを使用していますが、ユーザーは西と東のパネルを切り替える際に問題があるようです。これは、トグルボタンが比較的小さいためです。

Googleには「フラップ」フローティングボタンが付いています（画像参照）。jQuery UIレイアウトプラグインでも同じ効果が得られます。しかし、私はそうするのが難しいです。私は（exampleのように）トグルでカスタムボタンを追加できますが、divにはoverflow:hiddenというように配置されているので、境界線が広い5ピクセルよりも広くすることはできません。

誰かがjQuery UIレイアウトでGoogleボタンスタイルを再作成する方法のヒントを持っていますか？

Answer 1

私が見つけた：

を、私はこのように、ボタンのための余分なdiv秒を追加します。

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