如何在jQuery UI Layout toggler中使文本垂直？

Question

我在网站上使用jquery-ui-layout插件：jQuery UI Layout Hompage

有选项togglerContent_open和togglerContent_closed，可让您将html放置在切换器内。我想在我的EAST窗格中包含文本，但我的问题是文本在垂直切换器上水平显示，因此只能看到第一个字符。

如何显示它以使其垂直读取？像（sry，非常粗糙的模拟）中的任何一个选项如下。它是jQuery UI Layout中的一个选项还是只是css？

编辑：有人知道修改jQuery UI布局设置是否可行吗？

Answer 1

.parentPane {
    border: 1px solid #ccc;
}

.parentPane > div {
    display:inline-block;
    height:100px;
    vertical-align:top;
    text-align:center;
}

.eastPane {
    background-color:#CA7DBD;
    width: 49.5%;
}

.westPane {
    background-color:#4679BD;
    width: 49.5%;
}

.rotator {
    background-color:#ccc;
    display:inline-block;
    margin-top: 20px;
    position:relative;
    transform: rotate(90deg);
}
.wizard1 {
    left:0;
}
.wizard2 {
    right:40px;
    ;
}
.wizard2 {
    right:40px;
    ;
}
.wizard3 {
    right:80px;
    ;
}
.wizard4 {
    right:120px;
    ;
}

<div class="parentPane">
    <div class="eastPane">East Pane</div>
    <div class="westPane"><div>West Pane</div>
        <div class="rotator wizard1">Wizard 1</div>
        <div class="rotator wizard2">Wizard 2</div>
        <div class="rotator wizard3">Wizard 3</div>
        <div class="rotator wizard4">Wizard 4</div>
    </div>
</div>

您可以使用CSS3 transform属性。这将旋转文本，但是对齐不会使各种类似的容器（div's或span's）分开。因此，您可以使用relative positioning将它们彼此相邻对齐。这是您使用rotation的一般语法。

transform: rotate(90deg);

利用相对定位，您可以定义多个内容之间的距离（文本垂直的位置）。

请参阅以下代码段

.rotator {
    background-color:#ccc;
    display:inline-block;
    margin-top: 20px;
    position:relative;
    transform: rotate(90deg);
}

.wizard1 {
     left:0;
}

.wizard2 {
     right:40px;;
}

.wizard2 {
     right:40px;;
}

.wizard3 {
     right:80px;;
}

.wizard4 {
     right:120px;;
}

<div class="rotator wizard1">Wizard 1</div>
<div class="rotator wizard2">Wizard 2</div>
<div class="rotator wizard3">Wizard 3</div>
<div class="rotator wizard4">Wizard 4</div>

希望这有帮助!!!