0

アプリケーションの左側に、回転したボタンを使用してナビゲーション ツールバーを実装しようとしています。css transform:rotate を使用してボタンを回転すると、ボーダー コンテナーはボタンが回転されていないかのようにすべてのレイアウト計算を実行するため、ボタンが重なり合って垂直方向に間違った位置に配置されます。これを解決するのに十分なほど dijit/layout/utils モジュールを理解する前に、私が見ていない解決策を誰かが既に持っているかどうか疑問に思っています。

ありがとう！

ここでフィドルhttp://jsfiddle.net/eric_isakson/2bkKk/6/

JavaScript:

require(["dojo/_base/window", "dijit/Toolbar", "dijit/form/Button", "dijit/layout/BorderContainer"], function(win, Toolbar, Button, BorderContainer) {
  var bc = new BorderContainer();
  bc.placeAt(win.body(), "last");
  var tb = new Toolbar({region: "leading"});
  bc.addChild(tb);
  var b1 = new Button({label: "button1"});
  tb.addChild(b1);
  var b2 = new Button({label: "button2"});
  tb.addChild(b2);
  bc.startup();
  tb.startup();
  b1.startup();
  b2.startup();
});

CSS

html, body {
width: 100%;
height: 100%;
margin: 0;
overflow:hidden;
}

.dijitBorderContainer {
width: 100%;
height: 100%;
}

.dijitButton {
transform:rotate(-90deg);
-ms-transform:rotate(-90deg); /* IE 9 */
-webkit-transform:rotate(-90deg); /* Safari and Chrome */
display: block;
}

望ましい外観は次のとおりです。

垂直方向のボタンを反時計回りに 90 度回転

4

1 に答える 1

0

私があなたを正しく理解していれば、あなたはあなたのボタンを水平にしたいですか? 次に、ローテーションのために行を削除するだけです。

.dijitButton {
display: block;
}

よろしく、ミリアム

于 2013-10-02T08:22:07.290 に答える