前面的第八节，讲述了Dojo widget的 用于页面布局的layout widget。其中，layout widget包括九种widget。 第八节只是举例说明了这九种widget的用法，并没有深入。随着，不断的学习和应用，对每一种widget都有了更深入的了解。在本小节，通过实例重点说明一下FloatingPane widget 的用法。
第一部分，FloatingPane widget 的概念
FloatingPane widget 是浮动面板，可以模拟windows窗口的效果。
浮动：意指可以在页面上随意拖拽；
模拟windows窗口的效果：意指它具有windows窗口的特性，比如，它具有最基本的最小化、还原、最大化、关闭按钮等，可以改变大小，可以嵌套内部窗口，可以打开其他页面等等。
第二部分，引入FloatingPane widget
说明：引入dojo.js包，根据自己建立的路径书写src ; 引入FloatingPane ，仍然使用dojo.require。示例如下：
<script type="text/javascript">
var djConfig = {
isDebug: true
};
</script>
<script type="text/javascript" src="dojo-0.3.1-ajax/dojo.js">
</script>
<script language="JavaScript" type="text/javascript">
dojo.require("dojo.widget.FloatingPane");
</script>
第三部分，FloatingPane widget 模拟windows窗口的基本属性
说明：请注意用到的参数，运行示例后可以看出每个参数的作用。
case 1 ：页面直接加载一个FloatingPane
当运行页面的时候，将FloatingPane 直接显示在页面上方，相当于onload。那么，在这里应该如何应用FloatingPane 呢？示例如下：
<div id="floatingpane" dojoType="FloatingPane" title="Outer window" constrainToContainer="true" " style="width: 300px; height: 200px; left: 200px">
This is the first FloatingPane .
main panel with <a href="http://www.dojotoolkit.org/%22%3Ea link</a>
</div>
case 2 ：页面直接加载一个FloatingPane，标题栏含有图片图标
当运行页面的时候，将FloatingPane 直接显示在页面上方，同时，使得标题栏含有图片图标。关键属性值是iconSrc。示例如下：
<div id="floatingpane2" dojoType="FloatingPane" title="Outer window" constrainToContainer="true" iconSrc="images/check.gif" style="width: 300px; height: 200px; left: 200px">
This is the second FloatingPane .
main panel with <a href="http://www.dojotoolkit.org/%22%3Ea link</a>
</div>
说明：iconSrc的路径根据自己建立的路径而定。
case 3 ：页面直接加载一个FloatingPane，标题栏含有图片图标，具有最小化、还原、最大化、关闭功能
当运行页面的时候，满足case2的基础上增加FloatingPane最小化、还原、最大化、关闭的功能。关键的属性值是什么呢，请看下面的示例：
<div id="floatingpane3"
dojoType="FloatingPane"
title="Resizable window w/shadow"
constrainToContainer="true"
displayMinimizeAction="true"
displayMaximizeAction="true"
displayCloseAction="true"
iconSrc="images/note.gif"
style="width: 300px; height: 200px; left: 600px;"
>
This is the third FloatingPane .
</div>
case 4 ：页面直接加载一个FloatingPane，标题栏含有图片图标，具有最小化、还原、最大化、关闭功能，同时，可以改变FloatingPane大小
当运行页面的时候，满足case3的基础上增加任意改变FloatingPane大小的功能。关键的属性值是什么呢，请看下面的示例：
<div id="floatingpane4"
dojoType="FloatingPane"
title="Resizable window w/shadow"
constrainToContainer="true"
hasShadow="true"
resizable="true"
displayMinimizeAction="true"
displayMaximizeAction="true"
displayCloseAction="true"
iconSrc="images/note.gif"
style="width: 300px; height: 200px; left: 600px;"
>
This is the forth FloatingPane .
</div>
第四部分，FloatingPane widget 的嵌套
FloatingPane的嵌套方式，类似于以往的嵌套模式。比如，在Dojo widget的layout widget中，可以使用嵌套，用来承载页面的CotentPane，一般情况下，它会被加入到LayoutContainer、SplitContainer、TabContainer和AccordionContainer中的某一种容器里。FloatingPane也不例外，可以将许多widget作为子组件形成嵌套。
需要注意的一点：嵌套其他widget时，需要引入相应的widget，方法见本节的第二部分。
case 1 ：页面加载一个FloatingPane，在其内部加载另一个FloatingPane
当页面运行时，加载一个内嵌FloatingPane的FloatingPane
<div dojoType="FloatingPane"
title="inner window w/shadow"
constrainToContainer="true"
hasShadow="true"
resizable="true"
displayMinimizeAction="true"
displayMaximizeAction="true"
displayCloseAction="true"
iconSrc="images/note.gif"
style="width: 300px; height: 200px; left: 600px;"
>
outer floatingpane。
<div dojoType="FloatingPane"
title="Inner window"
constrainToContainer="1"
style="left: 20px; top: 60px; width: 120px; height: 80px;"
>
inner floatingpane。
</div>
</div>
case 2 ：页面加载一个FloatingPane，在其内部加载TabContainer
当页面运行时，加载一个内嵌含有两个标签页的TabContainer的FloatingPane
<div dojoType="FloatingPane" id="tfp" title="Tabbed Floating Pane" hasShadow="true" resizable="true" style="width: 300px; height: 300px;">
<div dojoType="TabContainer" id="tabs" layoutAlign="client">
<div dojoType="ContentPane" label="tab1">Tab1 Content</div>
<div dojoType="ContentPane" label="tab2">Tab2 Content</div>
</div>
</div>
case 3 ：页面加载一个FloatingPane，在其内部加载LayoutContainer
当页面运行时，加载一个内嵌LayoutContainer的FloatingPane
<div dojoType="FloatingPane"
title="Layout window w/shadow"
constrainToContainer="true"
hasShadow="true"
resizable="true"
displayMinimizeAction="true"
displayMaximizeAction="true"
iconSrc="images/save.gif"
style="width: 300px; height: 200px; top: 600px; left: 400px;"
>
<div dojoType="ContentPane" layoutAlign="top" style="border: solid white;">TOP</div>
<div dojoType="ContentPane" layoutAlign="bottom" style="border: solid white;">BOTTOM</div>
<div dojoType="ContentPane" layoutAlign="left" style="border: solid white;">LEFT</div>
<div dojoType="ContentPane" layoutAlign="right" style="border: solid white;">RIGHT</div>
<div dojoType="ContentPane" layoutAlign="client" style="border: solid white;">CENTER</div>
</div>
case 4 ：页面加载一个FloatingPane，在其内部加载Tree
当页面运行时，加载一个内嵌Tree的FloatingPane
<div dojoType="FloatingPane"
title="Content pane is tree"
constrainToContainer="true"
hasShadow="true"
resizable="true"
displayMinimizeAction="true"
displayMaximizeAction="true"
contentWrapper="none"
style="width: 300px; height: 200px; top: 100px; left: 400px;"
>
<div dojoType="Tree" publishSelectionTopic="treeSelected" toggle="fade" widgetId="firstTree">
<div dojoType="TreeNode" title="Item 1">
<div dojoType="TreeNode" title="Item 1.1"><br/></div>
<div dojoType="TreeNode" title="Item 1.2">
<div dojoType="TreeNode" title="Item 1.2.1"></div>
<div dojoType="TreeNode" title="Item 1.2.2"></div>
</div>
<div dojoType="TreeNode" title="Item 1.3">
<div dojoType="TreeNode" title="Item 1.3.1"></div>
<div dojoType="TreeNode" title="Item 1.3.2"></div>
</div>
<div dojoType="TreeNode" title="Item 1.4">
<div dojoType="TreeNode" title="Item 1.4.1"></div>
</div>
</div>
</div>
</div>
case 5 ：页面加载一个FloatingPane，在其内部加载另一个页面
当页面运行时，加载一个内嵌另一个页面内容的FloatingPane
<div dojoType="FloatingPane" style="width: 300px; height: 300px; left: 100px; top: 100px;" href="doc0.html" executeScripts="true" title="externally loaded">
</div>
case 6 ：页面加载一个FloatingPane，在其内部加载Button
当页面运行时，加载一个内嵌button的FloatingPane
<div dojoType="FloatingPane" style="width: 300px; height: 300px; left: 100px; top: 100px;" href="doc0.html" executeScripts="true" title="externally loaded">
<div id="modify" dojoType="Button" style="width:70px; height:25px" > OK </div>
</div>
…………………………
以上列出的仅仅是几种情况，大家可以根据实际需求，应用更多的情况。
第五部分，FloatingPane widget 的综合应用实例
实现的功能：当主页面加载时，页面显示一个button，当点击button时触发隐藏的FloatingPane。
分析页面内容：主页面——button（显示）——单击事件——JavaScript
主页面——引入包——FloatingPane（隐藏）——button触发
示例代码：
1. 引入包的方法及内容：详见本小节的第二部分。
<script language="JavaScript" type="text/javascript">
dojo.require("dojo.widget.FloatingPane");
dojo.require("dojo.widget.Button");
dojo.require("dojo.widget.TabContainer");
</script>
2. 单击事件JavaScript：
<script language="JavaScript" type="text/javascript">
var fp;
function init(e){
fp=dojo.widget.byId("floatpane");
}
dojo.addOnLoad(init);
</script>
3. 主页面的button
<input id="dd" type="button" value="点击触发浮动窗口" onClick="javascript:fp.show();"/>
4. 主页面的floatingpane
<div id="floatpane" dojoType="FloatingPane" title=" Widget Settings" constrainToContainer="true" iconSrc="images/edit.gif" hasShadow="true" resizable="true" displayMinimizeAction="true" displayMaximizeAction="true" displayCloseAction="true" style="width: 530px; height: 400px; left: 200px; display:none">
<div id="mainTabContainer" dojoType="TabContainer" style="width: 500px; height: 300px" selectedTab="tab1">
<div id="tab1" dojoType="ContentPane" label="Settings">
<table width="400" border="0" cellspacing="0" cellpadding="0">
<tr height="20px">
<td>
</td>
<td>
</td>
</tr>
<tr>
<td width="35">
</td>
<td width="350">
<span class="STYLE3">
<label id="color" title="color">
Color: Widget Border Color
</label>
</span>
</td>
</tr>
<tr>
<td>
</td>
<td>
<table width="350" border="0" height="25px">
<tr>
<td>
<input type="text" value="" id="nowColor" style="width:400px; height:25px"/>
</td>
<td>
<div id="pageColorViews" style="background:#000; width:50px; height:30px;">
</div>
</td>
<td>
</td>
<td>
<img id="bordercolor" src="images/edit.gif"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div id="tab2" dojoType="ContentPane" label="Advanced">
<table width="400" border="0" cellspacing="0" cellpadding="0">
<tr height="20px">
<td></td>
<td></td>
</tr>
<tr>
<td width="35">
</td>
<td width="350">
<span class="STYLE3">
<label id="title" title="title">
Title: Title of widget
</label>
</span>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="text" id="texttitle" style="width:350px; height:25px"/>
</td>
</tr>
<tr>
<td></td>
<td>
<span class="STYLE3">
<label id="version" title="version">
Version: Version of widget(1.0.0)
</label>
</span>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="text" id="textversion" style="width:350px; height:25px" value="1.2.0"/>
</td>
</tr>
</table>
</div>
</div>
<table width="400" border="0" cellspacing="0" cellpadding="0">
<tr height="20px" style="width:200px">
<td></td>
<td></td>
</tr>
<tr>
<td style="width:100px">
</td>
<td align="center">
<div id="modify" dojoType="Button" style="width:70px; height:25px" onClick="javascript:modifyTitle();">
OK
</div>
</td>
<td align="center">
<div id="cancel" dojoType="Button" style="width:70px; height:25px" onClick="javascript:modifyTitle();">
cancel
</div>
</td>
</tr>
</table>
</div>
</div>
小结：
啰里啰嗦的写了上面那么多，希望大家能够明白，希望对学习者有所帮助。
