：转载时请以超链接形式标明文章原始出处和作者信息及本声明
就是dojo1.0的资料太少了，一开始弄不清楚TabContainer中选择Tab页面是和哪个事件关联，疑似&onSelect&或&onChange&，总之都不对。到后来在网上查到其实是&selectChild&，实现也不难。dojo.connect(myTabContainer,&selectChild&,&mySelectFunction&);mySelectFunction=function(pane){...}其中pane是Tab中的ContentPane。不过在找到这个实现之前，我仔细看了TabContainer的代码，对其组成和工作基本有了了解。TabContainer继承了StackContainer,其中的核心为TabController(继承了StackController)，对Tab标签的生成以及页面的加载管理等工作均与它有关。可以通过以下方式获取。var myTabContainer = dijit.byId(&myTabContainerId&);&var tablist = myTabContainer.//tablist就是TabC在tablist中重要的属性是pane2button，它建立了Tab页面和Tab标签的关系。其中Tab标签是dijit.layout._TabButton(继承了dijit.layout._StackButton)的实现,当我们click它时就会触发onSelectChild事件，在TabController中可关联的方法是&onSelectChild&。所以我们也可以通过以下方法实现Tab标签事件的关联。dojo.connect(myTabContainer.tablist,&onSelectChild&,&mySelectChild&);mySelectChild=function(pane){ &//pane就是Tab页面（ContentPane） &&&&var tabbutton = myTabContainer.tablist.pane2button[pane];//tabbutton就是Tab标签； &&&&if(tabbutton.label==&myTablabel&){...} }
引用地址：
Subscribe to feed
：：深黯：wei：Li Xiaomin：Li Xiaomin：Li Xiaomin：Li Xiaomin：mxc：lyc：Dojo dijit.layout.TabContainer - how to add class to tab? - JSFiddle
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
online javascript editor, testing javascript online, online ide, online code editor, html, css, coffeescript, scss online editor
JavaScript
Embed code :
<textarea class="embedCode" data-view="embedded" data-pattern-value=''>
No autoresizing to fit the code
Render blocking of the parent page
Diff between the saved and locally drafted fiddle:
Auto-close HTML tags
Show line numbers
Enable line wrapping
Indent with tabs
Indent size:
Sublime Text
Fiddle Meta
/questions//dojo-dijit-layout-tabcontainer-how-to-add-class-to-tab
External Resources 1
AJAX Requests
/echo simulates AJAX calls:
JSON: /echo/json/
JSONP: //jsfiddle.net/echo/jsonp/
HTML: /echo/html/
XML: /echo/xml/
for more info.
Legal, Credits and Links
Created and maintained by
Hosting by
All code belongs to the poster and no license is enforced.
JSFiddle or its authors are not responsible or liable for any loss or damage of any kind during the usage of provided code.
&style type=&text/css&&
width: 200
height: 200
.myTabClass .tabLabel {
color: blue !
&div id=&tabs& dojoType=&dijit.layout.TabContainer&&
&div id=&123& dojoType=&dijit.layout.ContentPane& title=&test123&&
&div id=&456& dojoType=&dijit.layout.ContentPane& title=&test456&&
dojo.require(&dojo.parser&);
dojo.require(&dijit.layout.TabContainer&);
dojo.require(&dijit.layout.ContentPane&);
dojo.ready(function(){
dojo.parser.parse();
var tabContainer = dijit.byId(&tabs&);
dojo.addClass(tabContainer.tablist.pane2button[&123&].domNode, &myTabClass&);
XHTML 1.0 Strict
XHTML 1.0 Transitional
HTML 4.01 Strict
HTML 4.01 Transitional
HTML 4.01 Frameset
JavaScript
CoffeeScript
JavaScript 1.7
TypeScript
Frameworks & Extensions
Mootools (nightly)
Mootools 1.6.0 (compat)
Mootools 1.6.0
Mootools 1.5.2 (compat)
Mootools 1.5.2
Mootools 1.5.1
Mootools 1.5.0
Mootools 1.4.5 (compat)
Mootools 1.4.5
Mootools 1.3.2 (compat)
Mootools 1.3.2
jQuery (edge)
jQuery 3.1.0 Slim
jQuery 3.1.0
jQuery 3.0.0 Slim
jQuery 3.0.0
jQuery 2.2.4
jQuery 2.2.3
jQuery 2.2.2
jQuery 2.2.1
jQuery 2.2.0
jQuery 2.1.3
jQuery 1.9.1
Prototype 1.7.3
Prototype 1.7.2
Prototype 1.7.1
Prototype 1.6.1.0
YUI 3.17.2
YUI 3.16.0
YUI 3.14.0
YUI 3.10.1
YUI 2.8.0r4
No-Library (pure JS)
Dojo (nightly)
Dojo 1.10.4
Dojo 1.9.7
Dojo 1.8.10
Dojo 1.7.8
Dojo 1.7.2
Dojo 1.6.2
Dojo 1.5.3
Processing.js 1.4.7
Processing.js 1.4.1
Processing.js 1.3.6
Processing.js 1.2.3
ExtJS 5.1.0
ExtJS 5.0.0
ExtJS 4.2.0
ExtJS 4.1.1
ExtJS 4.1.0
ExtJS 3.4.0
ExtJS 3.1.0
Raphael 2.1.0
Raphael 1.5.2 (min)
Raphael 1.4
RightJS 2.3.1
RightJS 2.1.1
Three.js r54
Zepto 1.0rc1
Enyo (nightly)
Enyo 2.7.0
Enyo 2.5.1
Enyo 2.4.0
Enyo 2.2.0
Enyo 2.0.1
Shipyard (nightly)
Shipyard 0.2
Knockout.js 3.4.0
Knockout.js 3.0.0
Knockout.js 2.3.0
Knockout.js 2.2.1
Knockout.js 2.1.0
Knockout.js 2.0.0
The X Toolkit edge
AngularJS 2.0.0-alpha.47
AngularJS 1.4.8
AngularJS 1.2.1
AngularJS 1.1.1
Ember (latest)
Underscore 1.8.3
Underscore 1.4.4
Underscore 1.4.3
Underscore 1.3.3
Bonsai 0.4.1
KineticJS 4.3.1
KineticJS 4.0.5
FabricJS 1.5.0
FabricJS 1.4.0
FabricJS 1.2.0
FabricJS 0.9
qooxdoo 2.1
qooxdoo 2.0.3
WebApp Install 0.1
Thorax 2.0.0rc6
Thorax 2.0.0rc3
Paper.js 0.22
React 0.14.3
React 0.9.0
React 0.8.0
React 0.4.0
React 0.3.2
svg.js 2.1.1
Minified 1.0 beta1
jTypes 2.1.0
Lo-Dash 2.2.1
Brick edge
RactiveJS 0.7.3
Vue (edge)
Vue 1.0.12
JSBlocks (edge)
OpenUI5 (latest, mobile)
MithrilJS 0.2.0
Pixi 4.0.0
Pixi 3.0.11
onDomready
No wrap - in &head&
No wrap - in &body&
Framework &script> attribute
Normalized CSSstock0991 的BLOG
用户名：stock0991
文章数：233
访问量：36302
注册日期：
阅读量：5863
阅读量：12276
阅读量：325542
阅读量：1034729
51CTO推荐博文
&&&&Dojo提供了多种基本的布局方式，使用这些布局，可以有层次，有意义的组织控件，使得 web 界面获得更好的用户体验。&&&&Dojo提供布局小部件分为三类：面板、对齐方式容器和堆叠容器。1、dijit/layout/ConentPane&&&&ContentPane，顾名思义，就是用于放置若干内容的面板，是各种布局的基本元素。ContentPane 的功能类似于 iFrame。除此之外 ContentPane 还可以与其他 Layout 控件互相嵌套。ContentPane声明法示例&!DOCTYPE&html&
&&&&&meta&charset="UTF-8"&
&&&&&style&type="text/css"&
&&&&&&&&body{&width:&100%;height:&100%;&}
&&&&&/style&
&&&&&script&type="text/javascript"&src="dojo/dojo.js"&djConfig="parseOnLoad:true"&
&&&&&/script&
&&&&&script&type="text/javascript"&
&&&&&&&&dojo.require("dijit.layout.ContentPane");
&&&&&/script&
&&&&&title&ContentPane学习&/title&
&div&dojoType="dijit.layout.ContentPane"&id="myFirstContentPane"
&&&&&href="TestContentPane.html"&
&/html&ContentPane程序生成法示例&!DOCTYPE&html&
&&&&&meta&charset="UTF-8"&
&&&&&style&type="text/css"&
&&&&&&&&body{&width:&100%;height:&100%;&}
&&&&&/style&
&&&&&script&type="text/javascript"&src="dojo/dojo.js"&djConfig="parseOnLoad:true"&
&&&&&/script&
&&&&&script&type="text/javascript"&
&&&&&&&&/*1.7以前版本http://dojotoolkit.org/reference-guide/1.10/dojo/domReady.html#dojo-domready
&&&&&&&&dojo.require("dijit.layout.ContentPane");
&&&&&&&&dojo.addOnLoad(function(){
&&&&&&&&&&&&var&myFirstContentPane&=&new&dijit.layout.ContentPane({
&&&&&&&&&&&&&&&&id:&"myFirstContentPane",
&&&&&&&&&&&&&&&&href:"testcontentPane.html"
&&&&&&&&&&&&},dojo.byId("myFirstContentPane"));
&&&&&&&&&&&&myFirstContentPane.startup();
&&&&&&&&});
&&&&&&&&*/
&&&&&&&&require(["dijit/layout/ContentPane",&"dojo/domReady!"],&function(ContentPane){
&&&&&&&&&&&&var&myFirstContentPane&=&new&ContentPane({
&&&&&&&&&&&&&&&&id:&"myFirstContentPane",
&&&&&&&&&&&&&&&&href:"testcontentPane.html"
&&&&&&&&&&&&},dojo.byId("myFirstContentPane"));
&&&&&&&&&&&&myFirstContentPane.startup();
&&&&&&&&});
&&&&&/script&
&&&&&title&ContentPane学习&/title&
&div&id="myFirstContentPane"&
&/html&输出结果：& &&&&&&说明：&&&&（1）在这个例子中，ContentPane 完全实现了iFrame 的功能，但是有些区别，在代码中会把testcontentPane.html页面中的&title&测试&/title&属性带过来。&&&&（2）在使用程序生成法时，不要忘记startup()1.1 Content属性：String, DomNode, NodeList&&&&指ContentPane中显示的内容。如果没有定义 href 属性，ContentPane 组件内将显示 content 内容。否则将显示 href 页面的内容。content 可以是 String, DomNode 和 NodeList 三种类型。&!DOCTYPE&html&
&&&&&meta&charset="UTF-8"&
&&&&&style&type="text/css"&
&&&&&&&&body{&width:&100%;height:&100%;&}
&&&&&/style&
&&&&&script&type="text/javascript"&src="dojo/dojo.js"&djConfig="parseOnLoad:true"&
&&&&&/script&
&&&&&script&type="text/javascript"&
&&&&&&&&require(["dijit/layout/ContentPane",&"dojo/domReady!"],&function(ContentPane){
&&&&&&&&&&&&//&创建一个&DomNode,&table&元素
&&&&&&&&&&&&var&myDomNode&=&document.createElement("table");
&&&&&&&&&&&&//Table&的第一行是”Hello,&Dojo&World!”
&&&&&&&&&&&&var&myTD1&=&document.createElement("td");
&&&&&&&&&&&&myTD1.innerHTML&=&"Hello,&Dojo&World!";
&&&&&&&&&&&&var&myTR1&=&document.createElement("tr");
&&&&&&&&&&&&myTR1.appendChild(myTD1);
&&&&&&&&&&&&myDomNode.appendChild(myTR1);
&&&&&&&&&&&&//Table&的第二行是”Hello,&ContentPane&World!”
&&&&&&&&&&&&var&myTD2&=&document.createElement("td");
&&&&&&&&&&&&myTD2.innerHTML&=&"Hello,&ContentPane&World!";
&&&&&&&&&&&&var&myTR2&=&document.createElement("tr");
&&&&&&&&&&&&myTR2.appendChild(myTD2);
&&&&&&&&&&&&myDomNode.appendChild(myTR2);
&&&&&&&&&&&&myDomNode.border&=&1;
&&&&&&&&&&&&//&将创建的&DomNode&赋给&content&属性
&&&&&&&&&&&&var&myFirstContentPane&=&new&ContentPane({
&&&&&&&&&&&&&&&&id:&"myFirstContentPane",
&&&&&&&&&&&&&&&&//href:"TestContentPane.html"
&&&&&&&&&&&&&&&&content:&myDomNode
&&&&&&&&&&&&},dojo.byId("myFirstContentPane"));
&&&&&&&&&&&&myFirstContentPane.startup();
&&&&&&&&});
&&&&&/script&
&&&&&title&ContentPane学习&/title&
&div&id="myFirstContentPane"&
&/html&输出结果：Hello, Dojo World!Hello, ContentPane World!1.2 title属性：String&&&&title属性定义了ContentPane的标题。这个标题只有当 ContentPane 作为 TabContainer/ StackContainer 等 Layout 控件的子控件时，才可以看到。此时该属性值显示于该 Tab 页的标题处。&div&class="centerPanel"&data-dojo-type="dijit.layout.TabContainer"&data-dojo-props="region:&'center',&tabPosition:&'bottom'"&
&&&&&&&&&div&data-dojo-type="dijit.layout.ContentPane"&title="Group&1"&
&&&&&&&&&&&&&h4&Group&1&Content&/h4&
&&&&&&&&&&&&&p&Group&1&测试&/p&
&&&&&&&&&/div&
&&&&&&&&&div&data-dojo-type="dijit.layout.ContentPane"&title="Group&Two"&
&&&&&&&&&&&&&h4&Group&2&Content&/h4&
&&&&&&&&&&&&&p&Group&2&测试&/p&
&&&&&&&&&/div&
&&&&&&&&&div&data-dojo-type="dijit.layout.ContentPane"&title="Group&Three"&
&&&&&&&&&&&&&h4&Group&3&Content&/h4&
&&&&&&&&&&&&&p&Group&3&测试&/p&
&&&&&&&&&/div&
&/div&输出结果：1.3 loadingMessage/errorMessage属性：String&&&&当ContentPane内容/页面加载中，或出现错误时，ContentPane 将会显示的内容。该信息可以在loading.js文件中更改。myContentPane.attr("loadingMessage",&"Still&Loading&…");1.4&placeAt(reference, position)函数&&&&这是一个常用的方法，dojo控件都实现了这个方法。运用这个方法可以自由地放置控件的位置。该方法有两个参数：reference, 和 position。可以接受的 reference 参数类型有：String, DomNode 和 _Widget。其中 String 为引用 Dom 节点 (DomNode)，或者 dojo 控件 (_Widget) 的 id。而被position参数传入的dojo控件，必须是实现了addChild方法的类型，可接受的 position 参数类型有 Int和String。传入的 String 参数必须是”first”,”last”,”before”,”after”中的一个。ParameterTypeDescriptionreferenceString | DomNode | _WidgetWidget, DOMNode, or id of widget or DOMNodepositionString | IntOptional.If reference is a widget (or id of widget), and that widget has an
".addChild" method, it will be called passing this widget instance into that
method, supplying the optional position index passed. In this case position (if
specified) should be an integer.If reference is a DOMNode (or id matching a DOMNode but not a widget), the
position argument can be a numeric index or a string "first", "last", "before",
or "after", same as ::place().myContentPane.placeAt("OuterContentPane",&"first");&&&&该例子中，myContentPane 将被嵌套放入 OuterContentPane 的第一个位置。1.5 attr(name, value)函数&&&&attr是常用的dojo控件通用方法，用于为 dojo 控件的属性赋值。如：_Widget.attr(“value”, 3) 相当于 _Widget.setValue(3)。在新的版本中，许多用于修改属性的方法被不推荐了，如 setValue, setHref 等，均由 attr(“value”, value), attr(“href”, href) 方法取代。ParameterTypeDescriptionnameString | ObjectThe property to get or set. If an object is passed here and not a string, its
keys are used as names of attributes to be set and the value of the object as
values to set in the widget.valueObjectOptional.Optional. If provided, attr() operates as a setter. If omitted, the current
value of the named property is returned.备注：dojox.layout.ContentPane扩展了dijit.layout.ContentPane。2 dijit/TitlePane&&&&TitlePane本质上仍然是一个ContentPane, 不同点是，TitlePane自带了Title 的显示。标题栏中包括一按钮与一标题，通过按钮可控制显示或隐藏内容。在 TitlePane 中，title 属性定义了显示的标题。&!DOCTYPE&HTML&
&html&lang="en"&
&meta&charset="UTF-8"&
&link&rel="stylesheet"&href="dijit/themes/soria/soria.css"&
&script&type="text/javascript"&src="dojo/dojo.js"&djConfig="parseOnLoad:true"&&/script&
&script&type="text/javascript"&
&&&&require(["dijit/TitlePane","dojo/parser"]);
&title&TitlePane学习&/title&
&body&class="soria"&
&div&id="myTitlePane"&style="border:&solid&black&1"&
&&&&&p&id="last"&Hello&TitlePane!&/p&
&&&&&div&data-dojo-type="dijit/TitlePane"&data-dojo-props="title:&'Pane&#1'"&
&&&&&&&&I'm&pane&#1
&&&&&/div&
&&&&&div&data-dojo-type="dijit/TitlePane"&data-dojo-props="title:&'Pane&#2'"&
&&&&&&&&I'm&pane&#2
&&&&&/div&
&&&&&div&data-dojo-type="dijit/TitlePane"&data-dojo-props="title:&'Pane&#3'"&
&&&&&&&&I'm&pane&#3
&&&&&/div&
&/html&输出结果：2.1 duration属性：number&&&&收起和打开 TitlePane，是一个动画过程，duration 定义了该动画持续的时间，单位是毫秒。myTP.attr("duration",&1000);3 dojox/layout/FloatingPane&&&&FloatingPane是可以随意移动的TitlePane，可以模拟Windows窗口效果的浮动面板，可以在页面上随意拖拽该面板，该面板具有最基本的最小化、还原、最大化和关闭按钮等，可以改变大小，可以嵌套内部窗口，可以打开其他页面等。&&&&FloatingPane声明法示例：&!DOCTYPE&HTML&
&html&lang="en"&
&&&&&meta&charset="UTF-8"&
&&&&&link&rel="stylesheet"&href="dijit/themes/soria/soria.css"&
&&&&&link&rel="stylesheet"&type="text/css"&&&href="dojox/layout/resources/FloatingPane.css"&
&&&&&link&rel="stylesheet"&type="text/css"&&&href="dojox/layout/resources/ResizeHandle.css"&
&&&&&script&type="text/javascript"&src="dojo/dojo.js"&djConfig="parseOnLoad:true"&&/script&
&&&&&script&type="text/javascript"&
&&&&&&&&require(["dojox/layout/FloatingPane","dojo/parser"]);
&&&&&/script&
&&&&&title&FloatingPane学习&/title&
&body&class="soria"&
&div&dojoType="dojox.layout.FloatingPane"&id="myFloatingPane"
&&&&&title="Floating&World"&closable="true"
&&&&&resizable="true"&dockable="true"
&&&&&style="position:top:0;left:0;width:150height:150"&
&&&&The&Content&of&the&Floating&World!
&/html&&FloatingPane程序生成法示例：&!DOCTYPE&HTML&
&&&&&meta&charset="UTF-8"&
&&&&&link&rel="stylesheet"&href="dijit/themes/soria/soria.css"&
&&&&&link&rel="stylesheet"&type="text/css"&&&href="dojox/layout/resources/FloatingPane.css"&
&&&&&link&rel="stylesheet"&type="text/css"&&&href="dojox/layout/resources/ResizeHandle.css"&
&&&&&script&type="text/javascript"&src="dojo/dojo.js"&djConfig="parseOnLoad:true"&&/script&
&&&&&script&type="text/javascript"&
&&&&&&&&require(["dojox/layout/FloatingPane","dojo/parser",&"dojo/domReady!"],function(FloatingPane){
&&&&&&&&&&&&var&myFP&=&new&FloatingPane({
&&&&&&&&&&&&&&&&&&&&&&&&id:&"myFloatingPane",
&&&&&&&&&&&&&&&&&&&&&&&&content:&"&The&Content&of&the&Floating&World!",
&&&&&&&&&&&&&&&&&&&&&&&&resizable:true,
&&&&&&&&&&&&&&&&&&&&&&&&dockable:true,
&&&&&&&&&&&&&&&&&&&&&&&&title:&"Floating&World",
&&&&&&&&&&&&&&&&&&&&&&&&closable:true,
&&&&&&&&&&&&&&&&&&&&&&&&style:{&position:"absolute",&top:0,&left:0,&width:"150px",&height:"150px"}
&&&&&&&&&&&&&&&&&&&&},dojo.byId("myFloatingPane")
&&&&&&&&&&&&);
&&&&&&&&&&&&myFP.startup();
&&&&&&&&});
&&&&&/script&
&&&&&title&FloatingPane学习&/title&
&body&class="soria"&
&div&id="myFloatingPane"&
&&&&The&Content&of&the&Floating&World!
&/html&运行结果：&&&&上面创建方法得到的FloatingPane显示如下图所示，用户可以自由地在它的外层容器中移动位置。说明：&&&&（1）必须引用 FloatingPane.css；&&&&（2）如果需要具备改变容器大小 (resize) 功能，需引用 ResizeHandle.css；&&&&（3）Dojo建议在动态创建小部件结束后，调用startup()。3.1 closable属性：boolean&&&&closable 属性定义了该面板是否可以被关闭。3.2 resizable属性：boolean&&&&该属性定义了FloatingPane是否可以在运行时改变大小。当 resizable 为 true 并引用了 ResizeHandle.css时，用户可以通过拖动控制点来改变面板的大小。3.3 dockable属性：boolean&&&&该属性定义了FloatingPane是否可以被最小化到页面的最下方。与 TitlePane 可以收起面板不同的是，FloatingPane 可以将面板最小化到页面的最下方，如同 Windows 的工具栏。当dockable为true 时，用户可以通过点击面板标题位置向下的三角来最小化面板。3.4 sytle属性：object&&&&该属性定义了面板的位置。其中position定义是绝对位置还是相对位置，top和left定义了面板左上角的位置，width和height定义了面板的大小。但当面板被拖动或改变大小时，该值不会跟着变化。4&dojox/layout/ExpandoPane&&&&&与ContentPane基本类似，不过可以展开或折叠，不可以包含其他布局小部件。&!DOCTYPE&HTML&
&&&&&meta&charset="UTF-8"&
&&&&&link&rel="stylesheet"&href="dijit/themes/soria/soria.css"&
&&&&&link&rel="stylesheet"&type="text/css"&&&href="dojox/layout/resources/ExpandoPane.css"&
&&&&&style&type="text/css"&
&&&&&&&&html,&body&{
&&&&&&&&&&&&width:&100%;
&&&&&&&&&&&&height:&100%;
&&&&&&&&&&&&margin:&0;
&&&&&&&&#borderContainer&{
&&&&&&&&&&&&width:&100%;
&&&&&&&&&&&&height:&100%;
&&&&&/style&
&&&&&script&type="text/javascript"&src="dojo/dojo.js"&djConfig="parseOnLoad:true"&&/script&
&&&&&script&type="text/javascript"&
&&&&&&&&require(["dijit/layout/ContentPane","dijit/layout/BorderContainer","dojox/layout/ExpandoPane","dojo/parser",&"dojo/domReady!"]);
&&&&&/script&
&&&&&title&ExpandoPane学习&/title&
&body&class="soria"&
&div&data-dojo-type="dijit.layout.BorderContainer"&data-dojo-props="design:'sidebar',&gutters:true,&liveSplitters:true"&id="borderContainer"&
&&&&&div&data-dojo-type="dojox.layout.ExpandoPane"&title="Left&Expando"&data-dojo-props="title:&'Left&Expando',&maxWidth:225,&splitter:true,&region:'leading'"&style="width:&225"&
&&&&&&&&Hi.&I'm&the&Expando&Pane
&&&&&/div&
&&&&&div&data-dojo-type="dijit.layout.ContentPane"&data-dojo-props="splitter:true,&region:'center'"&Hi,&I'm&center&/div&
&/html&输出结果：5&dojox/layout/ScrollPane&&&&ScrollPane是可以滚动的面板。当面板内容超出了面板显示范围时，使用 ScrollPane 可以让内容滚动起来。&!DOCTYPE&HTML&
&&&&&meta&charset="UTF-8"&
&&&&&link&rel="stylesheet"&href="dijit/themes/soria/soria.css"&
&&&&&link&rel="stylesheet"&type="text/css"&href="dojox/layout/resources/ScrollPane.css"&
&&&&&script&type="text/javascript"&src="dojo/dojo.js"&djConfig="parseOnLoad:true"&&/script&
&&&&&script&type="text/javascript"&
&&&&&&&&require(["dijit/TitlePane",&"dojox/layout/ScrollPane",&"dojo/parser",&"dojo/domReady!"]);
&&&&&/script&
&&&&&title&ScrollPane学习&/title&
&body&class="soria"&
&div&style="float:&padding-right:12"&
&&&&&div&dojoType="dojox.layout.ScrollPane"&style="width:150&height:300"&&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&
&/html&结果：& & 说明：必须引用dojox/layout/resources/ScrollPane.css，否则在面板内容滚动时，不会显示滚动滑块。5.1 orientation属性：String&&&&定义了ScrollPane的滚动方向，有vertical和horizontal两种选择。需要注意的是，滚动的方向必须出现内容显示不下的情况，否则SrollPane的显示效果和ContentPane没有区别。本文出自 “” 博客，谢绝转载！
了这篇文章
类别：┆阅读(0)┆评论(0)