使用 Dojo 提供的灵活多样的布局方式

　2010-08-06 00:00:00　来源：WEB开发网　　　

核心提示： ScrollPane (dojox.layout.ScrollPane)顾名思义，ScrollPane 是可以滚动的面板，使用 Dojo 提供的灵活多样的布局方式(10)，当面板内容超出了面板显示范围时，使用 ScrollPane 可以让内容滚动起来

ScrollPane (dojox.layout.ScrollPane)

顾名思义，ScrollPane 是可以滚动的面板。当面板内容超出了面板显示范围时，使用 ScrollPane 可以让内容滚动起来。

清单 13. ScrollPane: 声明法示例

…　　<head>　　<link　rel="stylesheet"　type="text/css"　href="ibmdojo/dijit/themes/soria/soria.css">　　　　　<link　rel="stylesheet"　type="text/css"　　href="ibmdojo/dojox/layout/resources/ScrollPane.css">　　</head>　　<script　type="text/javascript"　src="ibmdojo/dojo/dojo.js"　djConfig="parseOnLoad:　true">　　</script>　　<script　type="text/javascript">　　dojo.require("dijit.TitlePane");　　dojo.require("dojox.layout.ScrollPane");　　dojo.require("dojo.parser");　　</script>　　<body　class="soria">　　<div　style="float:left;　padding-right:12px;">　　　　　<div　dojoType="dojox.layout.ScrollPane"　style="width:150px;　height:300px;"　　orientation="vertical"　id="vert">　　<table　id="tableinvert">　　　　　　　　　<tr><td><div　dojoType="dijit.TitlePane"　title="1"　sytle="width:100%;　　height:100%;">title　Pane　content</div></td></tr>　　　　　　　　　<tr><td><div　dojoType="dijit.TitlePane"　title="2"　sytle="width:100%;　　height:100%;">title　Pane　content</div></td></tr>　　　　　　　　　<tr><td><div　dojoType="dijit.TitlePane"　title="3"　sytle="width:100%;　　height:100%;">title　Pane　content</div></td></tr>　　　　　　　　　<tr><td><div　dojoType="dijit.TitlePane"　title="4"　sytle="width:100%;　　height:100%;">title　Pane　content</div></td></tr>　　　　　　　　　<tr><td><div　dojoType="dijit.TitlePane"　title="5"　sytle="width:100%;　　height:100%;">title　Pane　content</div></td></tr>　　　　　　　　　<tr><td><div　dojoType="dijit.TitlePane"　title="6"　sytle="width:100%;　　height:100%;">title　Pane　content</div></td></tr>　　　　　　　　　<tr><td><div　dojoType="dijit.TitlePane"　title="7"　sytle="width:100%;　　height:100%;">title　Pane　content</div></td></tr>　　　　　　　　　<tr><td><div　dojoType="dijit.TitlePane"　title="8"　sytle="width:100%;　　height:100%;">title　Pane　content</div></td></tr>　　</table>　　</div>　　</div>　　</body>　