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

对不起......无法创建ŧ他很好地工作。下面是修改后的代码： 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

有很多，你可以使用自定义toggler选项。

首先，您需要选择使用真正的旋转文字（使用CSS转换）和背景颜色，或文本/标签的图像。根据您选择的方法是不同的...

IMAGE TOGGLER方法

如果使用的图像，然后用CSS指定这一点。如果需要，可以为窗格的打开和关闭状态使用不同的图像。

要定位在布局的特定窗格中的“侧”追加到用于togglers，或大小调整器/分配器，如通用类...

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

为了进一步缩小选择指定特定“状态”，追加的状态，就像...

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

的toggler元件延伸包含它的缩放工具栏的边界之外（你的选项设置为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 

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

旋转的文本方法

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

的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来解除标准的点击事件，然后添加自己的事件。如果使用包含多个按钮/动作的更复杂的自定义切换器，则这是必需的。您可以在布局网站上找到这些切换器的样本。