用于jquery布局的自定义切换器

Question

我正在使用layout.jquery插件。 我正在尝试为Wast Pane创建一个自定义切换器。 如何创建旋转文本div作为切换器。 见下图。

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

HTML：

class PropertyEquipmentTransformer implements DataTransformerInterface

JS：

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

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变换）和背景颜色，还是文本/选项卡的图像。根据您的选择，方法不同......

图像切割方法

如果使用图像，则使用CSS指定。如果需要，您可以将不同的图像用于窗格的打开和关闭状态。

要定位布局中的特定窗格，请将“side”附加到togglers或resizer / splitters的泛型类，例如......

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

要进一步细化选择器以定位特定的“状态”，请附加状态，如...

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

toggler元素超出了包含它的resizer-bar的边界（你的选项设置为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);
}

除了您已经提出的问题之外，还有相关的布局选项。请注意，toggler元素的高度/长度应该在此设置而不是在CSS中设置，以便布局可以正确地将其放在缩放器栏中...

togglerLength_open:   50,
togglerLength_closed: 50

如果使用图像背景，应该这样做。

旋转文本方法

您还可以在toggler元素中插入文本或HTML 。由于切换器是自动生成的，因此您可以在选项中指定此内容。

此方法的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取消绑定标准点击事件，然后添加自己的事件。如果使用包含多个按钮/操作的更复杂的自定义切换器，则必须执行此操作。您可以在布局网站上找到此类切换器的样本。