Dojo TitlePane ContentPane BorderContainer

在用dojo 写布局的时候 用到 了 BorderContainer， 关键就在于这个。。下面注释已经明确指出。。这个不仅仅会导致 布局，而且 TitlePane 的样式 也会改变
贴代码更详细:

<html>
<head>
<title>Dojo TitlePane Example</title>

  <style type="text/css">

  <!-- 这里的顺序 具体怎么放 还真不确定，不过，要是把dojo.css 放到前面有的时候有问题 -->
   @import "../dojoroot/dijit/themes/soria/soria.css";    

  @import "../dojoroot/dojo/resources/dojo.css";
  </style>

    <script type="text/javascript" src="../dojoroot/dojo/dojo.js" djConfig="parseOnLoad:true"></script>

  <script type="text/javascript">
 dojo.require("dojo.parser");
 dojo.require("dijit.TitlePane");
 dojo.require("dijit.layout.ContentPane");
 dojo.require("dijit.layout.BorderContainer");

</script>

</head>

<!--  应用soria 主题 -->
<body class="soria">  

 <!-- -->

<!--注意的点一： 如果要用 dijit.layout.BorderContainer  一定要指定他的宽度高度 否则 不会显示你想要的布局-->
 <div dojoType="dijit.layout.BorderContainer" design="headline" style="width:900px;height:600px">


 <div dojoType="dijit.layout.ContentPane" align="right" splitter="true" region="top" style="background-color:white" >
  <div> 欢迎您，xxx  </div>
 </div>

 <div dojoType="dijit.layout.ContentPane"  splitter="true" region="left"   style="width:180px;">
  
  <div class="titleAlign" dojoType="dijit.TitlePane"   title="<b>&nbsp&nbsp&nbsp&nbsp快速入口</b>" >
  
  <a href="/">kuaisurukou</a>

  </div>
     <div class="titleAlign" dojoType="dijit.TitlePane" title="<b>哈哈哈</b>" open="false">
                <div>
                           <center>呵呵</center>
                 </div>
                                      

  </div>
 
  </div>

  <div dojoType="dijit.layout.ContentPane"   splitter="true" region="center"  style="background-color:white">

  
  <div  class ="titleAlign" dojoType="dijit.TitlePane" title="<b>天气预报收购信息提醒</b>">
 <iframe name="weather_inc" src="http://tianqi.xixik.com/cframe/9" 
 width="500" height="60" frameborder="0" marginwidth="0"
 marginheight="0" scrolling="no"></iframe>

     </div>

  <div class="titleAlign" dojoType="dijit.TitlePane" title="<b>地图</b>">
 
    这里显示的是地图。。。。。 
                                 

  </div>
 
  </div>

  <div dojoType="dijit.layout.ContentPane"  splitter="true" region="right"
  style="width: 180px;">
<div class="titleAlign" dojoType="dijit.TitlePane" title="<b>公告</b>">
 
  <img src="" width="330" height="330" />

  </div>
  <div class="titleAlign" dojoType="dijit.TitlePane" title="<b>站内信</b>">
 
  <img src="" width="330" height="330" />
  </div>
  <div class="titleAlign" dojoType="dijit.TitlePane" title="<b>系统整合</b>">
 
  <img src="" width="330" height="330" />

  </div>

  
  </div>

  
</div>
  </body>
</html>

 

posted @ 2012-09-07 14:24  yunyinet  阅读(2421)  评论(0)    收藏  举报