custom toggler for jquery layout

Question

I am using layout.jquery plugin. I am trying to create a custom toggler for Wast Pane. How can I create rotated text div as toggler. See attached image below.

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

Sorry... Could not create the jsfiddle properly. Here is modified code: 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

There are a number of options you can use for a custom toggler.

First you need to choose between using real rotated text (using CSS transform) and a background color, or an image of the text/tab. Depending on which you choose, the method is different...

IMAGE TOGGLER METHOD

If using an image, then assign this with CSS. If desired, you can use different images for the open and closed states of the pane.

To target a specific pane in a layout, append the 'side' to the generic class for togglers, or resizers/splitters, like...

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

To further refine selectors to target specific 'states', append the state, like...

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

The toggler element extends beyond the boundary of the resizer-bar that contains it (your options set that to 0px width), so ensure that the overflow CSS is set to allow this. This applies whether using the image method or rotated text method.

Here is sample CSS to put this together. Note that some properties require 'important' to override styles hard-coded on the elements by Layout...

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

Here are the relevant layout options, in addition to those your question already show. Note that the height/length of the toggler element should be set here rather than in the CSS so that layout can properly center it inside the resizer-bar...

togglerLength_open:   50,
togglerLength_closed: 50

That should do it if using an image background.

ROTATED TEXT METHOD

You can also insert text or HTML inside the toggler element. Since the toggler is autogenerated, you specify this content in the options.

The CSS is almost the same for this method, but instead of a background image, specify the colors and font formatting you want...

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

To support older browsers, add browser prefixes for transform; see https://css-tricks.com/snippets/css/text-rotation/

Specify the text you want in the layout options...

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

If you want the same text for both the open and closed states, I believe you can just use a togglerContent option. You can test that to confirm if desired.

Lastly, you can add additional logic when opening or closing the panel in one of two ways...

1. Use the standard callbacks. These include options like onclose_start, which allows you to abort the close action if desired.

2. After the layout is created, use standard jQuery to unbind the standard click event, and then add you own event. This is necessary if using a more complex custom toggler that contains more than one button/action. You can find samples of such togglers on the Layout website.