学习Ajax框架之dojo：第八节——Dojo的Layout Widget（附源代码）

Layout Widget包括以下几种widget：LayoutContainer，SplitContainer，TabContainer，AccordionContainer，ContentPane，TitlePane，Dialog，FloatingPane，WizardContainer、WizardPane。下面分别把他们的用法一一介绍下，并给出了示例。

第一种：LayoutContainer

Dojo通过LayoutContainer对页面布局进行管理，LayoutContainer Widget无法决定内部子组件的位置，因此LayoutContainer容器里面的组件必须设置layoutAlign属性来确定自身的位置。

下面看一下示例代码：

</style>

left

</div>

<div dojoType="ContentPane" layoutAlign="top" style="background-color: #b39b86; margin: 5px;">
top bar

</div>

bottom bar
</div>

inner left
</div>

      <div dojoType="ContentPane" layoutAlign="right" style="background-color: #eeeeee; width: 100px; margin: 5px;">
           inner right
      </div>

This is the main panel. It expands to fill all the left-over space after placing all the top/bottom/left/right panels.
</div>

</div>

第二种：SplitContainer

SplitContainer也是用于布局的容器，与LayoutContainer不同的是，SplitContainer布局分离出来的区块可以通过拖动显示边界动态改变每个区域的大小。

下面看一下示例代码：

<div dojoType="SplitContainer" orientation="horizontal" sizerWidth="5" activeSizing="0" style="width: 100%; height: 100%; background: #eeeeee; padding: 10px;"
>
     <div dojoType="ContentPane" sizeShare="20" style="overflow: auto;">
           I'm a content pane, and I'm the first child of the SplitContainer, so I appear on the left.My initial size is 20%, but if you adjust it and come back to the demo,
           my parent (the SplitContainer) will remember the size you set. On my right is a split container. (The parent split container contains a child split container.)
    </div>

    <div dojoType="SplitContainer" id="rightPane" orientation="vertical" sizerWidth="5" activeSizing="0" sizeShare="60">
         <div dojoType="ContentPane" sizeShare="50">
              This is the top part of the inner split container.
         </div>
         <div dojoType="ContentPane" sizeShare="50">
              ...and this is the bottom.
         </div>
    </div>

<div dojoType="ContentPane" sizeShare="20">
I'm another content pane, on the right.
</div>
</div>

第三种：TabContainer

TabContainer是TAB标签容器，其中每一个子组件都将会被显示成Tab标签。

示例代码如下：

</style>

<p>
These tabs are made up of local and external content. Tab 1 and Tab 2 are loading files tab1.html and tab2.html. Tab 3 and Another Tab are using content that is already part of this page.
</p>

<div id="mainTabContainer" dojoType="TabContainer" style="width: 100%; height: 70%" selectedTab="tab1">

       <div id="tab1" dojoType="ContentPane" label="Tab 1">
             <h1>First Tab</h1>
             I'm the first tab and my content is local. Try clicking tab#2. It's loading remotely.
       </div>

       <a dojoType="LinkPane" href="http://www.cnblogs.com/tests/widget/tab2.html" refreshOnShow="true" style="display: none">Tab 2</a>

       <div dojoType="ContentPane" label="Tab 3" style="display: none">
             <h1>I am tab 3</h1>
             <p>

Did you know that the children of a TabContainer can be any widget, such as a SplitContainer or LayoutContainer? The next tab is itself a TabContainer...

</p>
</div>

       <div id="subTabContainer" dojoType="TabContainer" label="Sub TabContainer">
             <a dojoType="LinkPane" href="http://www.cnblogs.com/tests/widget/tab1.html" style="display: none">SubTab 1</a>
             <a dojoType="LinkPane" href="http://www.cnblogs.com/tests/widget/tab2.html" selected="true">SubTab 2</a>
       </div>

</div>

第四种：AccordionContainer

AccordionContainer是可折叠的布局容器，显示的样式类似于手风琴，单击容器中子组件的标签，将显示该子组件而隐藏其他子组件。

示例代码如下：

.label :hover {
cursor: pointer;
}

.accBody {
background: #ededed;
overflow: auto;
}
</style>

                <p>
                    这是pane1
                </p>
      </div>

      <div dojoType="ContentPane" label="Pane 2">
           <h2> Pane 2 </h2>
           <p>
               这是pane2
          </p>
      </div>
      <div dojoType="SplitContainer" label="Pane 3">
           <p dojoType="ContentPane">

               这是pane3
           </p>
           <p dojoType="ContentPane">
               这是pane3
         </p>
     </div>
</div>

第五种：ContentPane

ContentPane用来承载页面的内容，一般情况下，它会被加入到LayoutContainer、SplitContainer、TabContainer和AccordionContainer中的某一种容器里。从上面给出的示例可以看出，ContentPane应用广泛，经常结合其他的框架来使用。

示例代码如下所示：

<title>Pane External Content Test</title>

   var docPane = dojo.widget.byId("docpane");
   var file = clickedTreeNode.object;
   if (!file){
    docPane.setContent("Try clicking doc0, doc1 or doc2 instead...");
   }else{
    docPane.setUrl(file);
   }
     };
}

var displayer = new DisplayTreeContent();

var nodeSelectionTopic = dojo.event.topic.getTopic("nodeSelected");
nodeSelectionTopic.subscribe(displayer, "update");
function contentLoadError(e){
  var chkbox = dojo.byId("defaultLoadError");
  if(chkbox && chkbox.checked){
   // use built in
   return;
  }
  e.preventDefault(); // or e.returnValue = false;
  var pane = dojo.widget.byId('docpane')
  pane.setContent("Custom Loaderror goes here<br/><img src='images/x.gif' style='float:left;'/> file not found");
  dialogHandler();// turn off loading dialog
}

// display custom Error(Content java/javascript eval error) or use built in method
function contentExecError(e){
  var chkbox = dojo.byId("defaultEvalError");
  if(chkbox && chkbox.checked){
   // use built in
   return;
  }
  e.preventDefault();
  alert('Oops! error occured:'+arguments[0]);
}

// display loading dialog or use built in "Loading..." message
function contentDownloadStart(e){
  var chkbox = dojo.byId("defaultLoadInfo");
  if(chkbox && chkbox.checked){
   // use built in
   return;
  }
  dialogHandler(e, true);
}

// show / hide loading dialog
function dialogHandler(e, show){
  var dialog = dojo.widget.byId("statusDialog");
  if(show){
   e.preventDefault();
   dialog.show();
   return;
  }
  dialog.hide();
}
</script>
<style>
html, body {
height: 100%;
width: 100%;
overflow: hidden;
}
#main {
height: 95%;
width: 95%;
left: 2%;
top: 2%;
position: relative;
}

.dojoDialog {
background : white;
border : 1px solid #999;
-moz-border-radius : 5px;
padding : 4px;
text-align: center;
}

</style>
</head>
<body>
<div dojoType="LayoutContainer" id="main" layoutChildPriority='left-right'>
<div dojoType="LinkPane" layoutAlign="left" style="width: 200px; background-color: #acb386;"
  href="tree.html"></div>
<div dojoType="ContentPane" layoutAlign="client" style="background-color: #f5ffbf; padding: 10px;"
  id="docpane" executeScripts="true">
  This is the initial content of the pane (inlined in the HTML file), but it will be overriden when you click "doc0" or "doc1" or "doc2" in the tree on the left (underneath   "Item 1")
</div>
</div>
</body>
</html>

第六种：TitlePane

带有标题栏的显示面板，单击标题栏可以切换TitlePane内子组件的显示/隐藏状态。

示例代码如下：

<div dojoType="TitlePane" label="TestLabel" labelNodeClass="label" containerNodeClass="content">
点击TestLabel标题栏时，内容隐藏，再点击内容显示

</div>

第七种：Dialog

模拟模态对话框的效果。

</script>
<style type="text/css">
body { font-family : sans-serif; }
.dojoDialog {
background : #eee;
border : 1px solid #999;
-moz-border-radius : 5px;
padding : 4px;
}

form {
margin-bottom : 0;
}
</style>

<div dojoType="dialog" id="DialogContent" bgColor="white" bgOpacity="0.5" toggle="fade" toggleDuration="250">
<form onsubmit="return false;">
  <table>
   <tr>
    <td>Name:</td>
    <td><input type="text"></td>
   </tr>
   <tr>
    <td>Location:</td>
    <td><input type="text"></td>
   </tr>
   <tr>
    <td>Description:</td>
    <td><input type="text"></td>
   </tr>
   <tr>
    <td>Location:</td>
    <td><input type="file"></td>
   </tr>
   <tr>
    <td colspan="2" align="center">
     <input type="button" id="hider" value="OK"></td>
   </tr>
  </table>
</form>
</div>

第八种：FloatingPane

FloatingPane是浮动面板，可以模拟widows窗口的效果。

示例代码如下：

dojo.addOnLoad(function() {
dojo.event.topic.subscribe("floatingPaneMove",
    function (info){
    var pos = dojo.style.getAbsolutePosition(info.source.domNode);
    if (info.source.widgetId == 'pane1'){
     document.getElementById('p1status').innerHTML = 'pane 1 : '+pos[0]+','+pos[1];
    }
    if (info.source.widgetId == 'pane2'){
     document.getElementById('p2status').innerHTML = 'pane 2 : '+pos[0]+','+pos[1];
    }
   }
  );
});

</script>

<div dojoType="FloatingPane"
      widgetId="pane1"
      title="Outer window"
      constrainToContainer="true"
      style="width: 300px; height: 200px; left: 200px; top: 100px"
>
      a floating pane
</div>

another floating pane
</div>

<p id="p1status">pane 1 hasn't moved</p>
<p id="p2status">pane 2 hasn't moved</p>

第九种：WizardContainer、WizardPane

WizardContainer、WizardPane两者联合使用可以模拟向导对话框。

示例代码如下：

posted on 2008-09-07 12:16 飞翔的Angela 阅读(6169) 评论(2) 编辑收藏举报