javascript - 用于 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");

      }