Js分离与引用的帮助参考文档以及layout实现细节如下
Js、css分离:
1、.html的文件所在的文件夹,新建一个文件夹grid和import.css
2、在grid文件夹新建main.js、addLoad.js
3、<style type=”text/css” ></style>标签对里的内容剪切到import.css文件中,同时在.html文件中改成< link rel="stylesheet" type=”text/css” href=”import.css”></style>
4、将<head>标签对中的<script type=”text/javascript”>标签对里的内容剪切到main.js文件中,同时将<script>标签对改成<script type=”text/javascript” src=”grid/main.js” djConfig="isDebug:true","parseOnLoad: true"></script>
5、将<body>标签对中的<script type=”text/javascript”>标签对里的内容剪切到addLoad.js文件中,同时将<script>标签对改成<script type=”text/javascript” src=”grid/addLoad.js” djConfig="isDebug:true","parseOnLoad: true"></script>
注意红字部分:由于import.js是和.html在同一个根目录下,在引入的时候只要写“import.js”就行了。而main.js 、addLoad.js和.html不在同一个目录下,故要引入与.html同目录下的grid文件夹。
Layout实现:
任务:1、实现layout的显示
2、在layout中显示图片,并且使图片能自由放大,缩小。
3、js、css文档分离
完成情况:1、layout空间可以显示,通过region的相关值显示不同位置的控件,左中右上。
2、在layout的控件中显示两种图片形式,即改变像素和不改变像素
3、设置了layout空间的背景颜色。
4、layout控件中添加文字
遇到的问题:1、在不改变图片宽和高的比例的条件下,改变图片的大小。(未解决)
使用到相关组件:
1、 dijit.layout.BorderContainer
2、 dijit.layout.ContentPane
dojo开源代码文件:
1、 dojox.dx.js
2、 Claro.css
实现截图:
重要代码:
//定义了BorderContainer的大容器,其中包含了7个ContentPane容器
程序说明文档
dijit.layout.BorderContainer是一个对齐方式容器。
design属性:headline、sidebar。design 为“ headline ”,上下两个区域的宽度就会与 BorderContainer 的宽度相同;如果 design 为“ sidebar ”,左右两个区域的高度就会和 BorderContainer 的高度相同。
gutters属性:true、false(默认为true)。“True”为可以修改窗格与附近图表的边之间的距离。从而使窗格与窗格、窗格与BorderContainer之间保持一定距离。
liveSplitters属性:true、false。 “ true ”为用户可以自己调节屏面大小。“ false ”为不允许用户自己调节屏面大小。
liveSizing属性:true、false。“ true ”为用户即时地看到拖曳的效果。
dijit.layout.ContentPane: ContentPane是一个默认为空白的面板容器。ContentPane 可以盛放文本、图片、图表,甚至其它 widgets 。
splitter属性:true、false。True为允许拖曳隔条将修改尺寸。如果你想让用户的拖曳有个限度,可以指定minSize或maxSize的属性值来实现。尺寸限制了指定区域的长宽。其最小值和最大值默认分别是0px和"Infinity",表示没有限制。
region属性: top、bottom、leading、tailing和center。
参考网址:
http://www.ibm.com/developerworks/cn/web/wa-lo-dojointro5/
http://www.cn-cuckoo.com/category/support
http://blog.163.com/eboge@126/blog/static/257055072010757426883/