0

我正在使用layout.jquery插件。我正在尝试为废窗格创建一个自定义切换器。如何创建旋转文本 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,

  });
4

2 回答 2

0

有许多选项可用于自定义切换器。

首先，您需要在使用真正的旋转文本（使用 CSS 变换）和背景颜色或文本/选项卡的图像之间进行选择。根据您的选择，方法是不同的...

图像切换方法

如果使用图像，则使用 CSS 分配它。如果需要，您可以为窗格的打开和关闭状态使用不同的图像。

要定位布局中的特定窗格，请将“side”附加到切换器或调整器/拆分器的通用类，例如...

.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。由于切换器是自动生成的，因此您可以在选项中指定此内容。

此方法的 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解绑标准点击事件，然后添加你自己的事件。如果使用包含多个按钮/操作的更复杂的自定义切换器，这是必要的。您可以在 Layout 网站上找到此类切换器的示例。

于 2016-09-29T17:32:30.817 回答
0

抱歉...无法正确创建 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");

      }
于 2016-09-29T15:53:31.963 回答