Как сделать текст вертикальным в переключателе макета пользовательского интерфейса jQuery?

Question

Я использую плагин jquery-ui-layout на веб-сайте: jQuery UI Layout Hompage

Есть варианты togglerContent_open а также togglerContent_closed что позволит вам разместить HTML внутри переключателя. Я хочу включить текст в мою панель EAST, но моя проблема в том, что текст отображается горизонтально по вертикальному переключателю, поэтому можно увидеть только первый символ.

Как я могу отобразить его так, чтобы он читался вертикально? Как любой из (извините, очень грубый макет) вариантов ниже. Это вариант в JQuery UI Layout или просто CSS?

РЕДАКТИРОВАТЬ: Кто-нибудь знает, возможно ли это, изменив настройки макета пользовательского интерфейса jQuery?

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>

Надеюсь это поможет!!!