jqueryレイアウトのカスタムトグラー

Question

私はlayout.jqueryプラグインを使用しています。 Wast Pane用のカスタムトグラーを作成しようとしています。 回転したテキストdivをトグルラとして作成する方法を教えてください。 下記の添付イメージを参照してください。

JSFIDDLE：https://jsfiddle.net/kap0e06s/3/

HTML：

<div class="myDiv" style="height:400px"> 
    <div class="ui-layout-center">Center</div> 
    <div class="ui-layout-north">North</div> 
    <div class="ui-layout-south">South</div> 
    <div class="ui-layout-east">East</div> 
    <div class="ui-layout-west">West</div> 
</div> 

JS：

$('.myDiv').layout({ 
    resizeWhileDragging: true, 
    sizable: false, 
    animatePaneSizing: true, 
    fxSpeed: 'slow', 
    west__spacing_closed: 0, 
    west__spacing_open: 0, 
    north__spacing_closed: 0, 
    north__spacing_open: 0, 

    }); 

Answer 1

申し訳ありませんが...トンを作成できませんでした。彼は正しくjsfiddle。ここで変更されたコードは次のとおりです。 JS：

 // OUTER-LAYOUT 
    $('.myDiv').layout({ 
     resizeWhileDragging: true, 
     sizable: false, 
      livePaneResizing:   true, 
     animatePaneSizing: true, 
     fxSpeed: 'slow', 
     west__spacing_closed: 0, 
     west__spacing_open: 0, 
     north__spacing_closed: 0, 
     north__spacing_open: 0, 

     east__spacing_open: 50, 

    }); 

CSS：

 body { 
     background-color: white; 
    } 

    .ui-layout-center, 
    .ui-layout-north, 
    .ui-layout-south, 
    .ui-layout-east, 
    .ui-layout-west { 
     border: 0px; 
    } 

    .ui-layout-toggler{ 
     background-image: url("http://placehold.it/50/ff9933/ffffff?text=Panel"); 

     } 

Answer 2

カスタムトグラーのために使用できるオプションがいくつかあります。

まず、実際に回転したテキスト（CSSトランスフォームを使用）と背景色、またはテキスト/タブの画像を選択する必要があります。あなたが選択したかに応じて、方法が異なっている...

IMAGEトグラーMETHOD

画像を使用している場合、CSSでこれを割り当てます。必要に応じて、ペインの開いた状態と閉じた状態に異なるイメージを使用できます。

は... togglers、またはリサイザ/スプリッタ、等のための一般的なクラスに「側」を追加、レイアウト内の特定のウィンドウを対象とするには

.ui-layout-resizer-west 
.ui-layout-toggler-west 

さらに具体的な「状態をターゲットとするセレクタを絞り込むには

」、トグラー要素は、それを含むサイズ変更バーの境界を越えて拡張し

.ui-layout-toggler-west-open 
.ui-layout-toggler-west-closed 

...のように、状態を追加（あなたのオプションは、その0PX幅に設定されている）、そのオーバーフローCSSが設定されていることを確認しますこれを可能にする。これは、イメージメソッドまたは回転テキストメソッドを使用するかどうかに関係なく適用されます。

これをまとめるサンプルCSSはここにあります。いくつかのプロパティは、レイアウトによって要素にハードコードされたスタイルを上書きすることが「重要」必要とすることをここで

.ui-layout-resizer-west { 
    overflow: visible !important; 
} 
.ui-layout-toggler-west { 
    backgound: url(close-panel-image.png) center; 
    width: 16px; 
} 
.ui-layout-toggler-west-closed { 
    backgound-image: url(open-panel-image.png); 
} 

は、あなたの質問が既に示したものに加えて、関連するレイアウトオプションです...注意してください。レイアウトが正しくサイズ変更バーの内側にそれをセンタリングできるように、トグラー要素の高さ/長さではなくCSSよりも、ここで設定する必要があることに注意してください...画像の背景を使用している場合、それを行う必要があります

togglerLength_open: 50, 
togglerLength_closed: 50 

。

あなたはまた、トグラー要素内のテキストまたはHTML を挿入することができます

回転TEXT方法。トグラーは自動生成されるので、オプションでこのコンテンツを指定します。

CSSは、古いブラウザをサポートするために、ほとんどこの方法でも同じですが、代わりに背景画像の、あなたが欲しい書式設定色とフォントを指定...

.ui-layout-resizer-west { 
    overflow: visible !important; 
} 
.ui-layout-toggler-west { 
    backgound-color: orange; 
    color: white; 
    font-size: 12px !important; 
    font-weight: bold; 
    transform: rotate(-90deg); 
    width: 16px; 
} 

、変換のブラウザプレフィックスを追加します。あなたは両方の開閉状態のために同じテキストをしたい場合は... https://css-tricks.com/snippets/css/text-rotation/

あなたはレイアウトオプションでテキストを指定

togglerLength_open: 50, 
togglerLength_closed: 50, 
togglerContent_open: 'CLOSE', 
togglerContent_closed: 'PANEL' 

を参照してください、私はあなただけtogglerContentオプションを使用することができると信じています。それをテストして、必要に応じて確認することができます。次のいずれかの方法でパネルを開いたり、閉じたときに

最後に、あなたは

1. は標準のコールバックを使用して...追加のロジックを追加することができます。これらには、 onclose_startのようなオプションが含まれています。を中止することができます。必要に応じて、クローズアクション

2. レイアウトが作成されたら、標準のjQueryを使用して標準のクリックイベントをバインド解除し、独自のイベントを追加します。これは、複数のボタン/アクションを含むより複雑なカスタムトグルラを使用する場合に必要です。このようなトグルのサンプルは、レイアウトWebサイトで見つけることができます。