注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

星期五

明天不上班

 
 
 

日志

 
 
关于我

一个特立独行的Java程序员,比较宅,上上网,写博客,听音乐,看电影。

网易考拉推荐

Dojo Layout入门(一)  

2013-12-02 22:30:00|  分类: Javascript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
页面布局是构建一个web应用所遇到一个基本问题,这是我们必须解决的,一般情况下,我们会有两个方案,一是CSS方式,另一种是Javascript方式。但是当我们所创建的布局非常复杂并且还需要可交互,可配置的话,CSS方式就不太容易实现了。这时候Javascript方式成为了首要选择。
Dojo Layout选择的是Javascript方式,通过几个基本,灵活的JS组件,实现复杂的web应用。
那么我们开始我们的Dojo Layout之旅吧!

第一,从基本的dijit/layout/ContentPane, ContentPane从字面意思理解,也就是内容面板,它是dojo layout里面最基本的布局widget。任何复杂的应用都是以它作为基础的,我们可以在它里面添加html内容,如果在其中加入css和Javascript,它是不会解析执行的。(如果想要添加css和Javascript且生效,你可以使用dojox/layout/ContentPane)另外也可以通过href属性引入html片段作为其内容。

第二,就是我们的dijit/layout/BorderContainer,先从其父类 dijit/layout/LayoutContainer说起。
如何使用LayoutContainer?

设置region
LayoutContainer 规定每一个孩子元素必须有一个属性 region 去表明它自己的位置
region:

  • top
  • bottom
  • right
  • left
  • center
  • leading: used have flexible layout in left-to-right/right-to-left environments. In ltr, it will be equivalent to left, in rtl equivalent to right.
  • trailing: opposite of ‘leading’: right in ltr, left in rtl

设置大小

通过CSS为元素设置大小, 为top 和 bottom 设置高(设置宽度没有意义),为left和right设置宽度(设置高度没有意义), center不需要设置。

设置模式

配置design属性,选择一种布局模式。
design:
  • sidebar
Dojo Layout入门(一) - 星期五 - 星期五
 
  • headline
Dojo Layout入门(一) - 星期五 - 星期五
 
其他属性设置(这些属性可以在API中找到,不同的container下的子元素可配置属性是不同的)

Dojo Layout入门(一) - 星期五 - 星期五
 
Dojo Layout入门(一) - 星期五 - 星期五
 
几个比较常见的
minSize,maxSize: 设置区域可以改变的最小值和最大值
splitter: 值为true时,允许resize区域的大小

Dojo Layout入门(一) - 星期五 - 星期五

说了这么多,给个实例吧!dojo提供两种方式去实现布局,一种是dojo标签方式,一种是程序方式。
使用标签方式直观,简单。
CSS (控制子元素大小)

<link rel="stylesheet" href="http://zhenghaoju700.blog.163.com/blog/./dojo-release-1.9.1-src/dijit/themes/claro/claro.css">
<style type="text/css">
html, body {
height: 100%;
margin: 0;
overflow: hidden;
padding: 0;
}
#appLayout {
height: 100%;
}
.claro .demoLayout .edgePanel {
background-color: #d0e9fc;
}
</style>

JS(引入我们需要的模块)

<script src="http://zhenghaoju700.blog.163.com/blog/./dojo-release-1.9.1-src/dojo/dojo.js"></script>
<script>
require(["dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/TabContainer", "dijit/layout/ContentPane",
"dojox/layout/ContentPane", "dijit/layout/StackContainer"], function(){

});
</script>

HTML(dojo标签写法)

<body class="claro">
<div id="appLayout" class="demoLayout" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design: 'headline'">
<div class="centerPanel" data-dojo-type="dijit/layout/TabContainer" data-dojo-props="region: 'center', tabPosition: 'bottom'" >
<div data-dojo-type="dojox/layout/ContentPane" data-dojo-props="title: 'Group 1', href: 'grid.html'">
</div>
</div>
<div class="edgePanel" style="height: 60px;" data-dojo-type="dojox/layout/ContentPane" data-dojo-props="region: 'top'">Top</div>
<div class="edgePanel" style="height: 25px;" data-dojo-type="dojox/layout/ContentPane" data-dojo-props="region: 'bottom'">Bottom</div>
<div class="edgePanel" style="width: 100px;" data-dojo-type="dojox/layout/ContentPane" data-dojo-props="region: 'left'">Left</div>
<div class="edgePanel" style="width: 100px" data-dojo-type="dojox/layout/ContentPane" data-dojo-props="region: 'right'">Right</div>
</div>
</body>

参考资料:

  评论这张
 
阅读(1542)| 评论(1)
推荐

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017