0

ウェブサイトで jquery-ui-layout プラグインを使用しています: jQuery UI Layout Hompage

トグラー内に html を配置できるオプションがありますtogglerContent_open。togglerContent_closedEAST ペインにテキストを含めたいのですが、問題は、テキストが垂直トグルを横切って水平に表示されるため、最初の文字しか見えないことです。

トグラーが悪い

代わりに縦に読むように表示するにはどうすればよいですか? 以下のオプションのいずれか（悲しい、非常に大まかなモックアップ）のように。jQuery UI Layout のオプションですか、それとも css だけですか?

トグラー希望

編集: jQuery UI レイアウト設定を変更することでこれが可能かどうかは誰にもわかりませんか?

4

1 に答える 1

0 

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

transformCSS3プロパティを利用できます。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>

お役に立てれば！！！

于 2015-06-09T18:35:18.160 に答える