首页 > 软件开发 > HTML >

MyEclipse2014下如何用Dojo上中下布局

来源:互联网 2023-03-16 19:10:45 79

dojo是一个用JavaScript语言实现的工具包,包括dojo、dijit、dojox,其中dojo包是dojo核心工具包,dijit包是dojo的Widget组件,dojox是dojo中的扩展性的工具。dojo中的dijit包包含有form表单以及布局容器,现在主要讲解一下,如何利用BorderContainer和ContentPane实现上中下布局,详细讲解如下:LIJ办公区 - 实用经验教程分享!

MyEclipse2014下如何用Dojo上中下布局LIJ办公区 - 实用经验教程分享!

工具/原料

  • dojo 1.10.0
  • MyEclipse 2014
  • Tomcat 7.0.x
  • JDK1.7.x
  • CSS
  • HTML

方法/步骤

  • 1

    第一步,首先,新建一个Web项目,将dojo中的三个(dojo、dijit和dojox)拷贝到WebRoot中新建的文件夹dojo下;LIJ办公区 - 实用经验教程分享!

    接着在WebRoot下新建jsp文件夹,并在该文件夹下新建一个jsp页面“Container.jsp”,在页面中引入dojo样式文件LIJ办公区 - 实用经验教程分享!

    link rel="stylesheet" href="../fusioncharts/dojo/dijit/themes/claro/claro.css"/>LIJ办公区 - 实用经验教程分享!

    如下图所示:LIJ办公区 - 实用经验教程分享!

    MyEclipse2014下如何用Dojo上中下布局LIJ办公区 - 实用经验教程分享!

  • 2

    第二步,然后,向页面引入关键js文件,dojo.js;加入dojo解析模块的属性标签LIJ办公区 - 实用经验教程分享!

    script type="text/javascript" src="../fusioncharts/dojo/dojo/dojo.js"LIJ办公区 - 实用经验教程分享!

    data-dojo-config="isDebug: true, parseOnLoad: true">/script>LIJ办公区 - 实用经验教程分享!

    如下图所示:LIJ办公区 - 实用经验教程分享!

    MyEclipse2014下如何用Dojo上中下布局LIJ办公区 - 实用经验教程分享!

  • 3

    第三步,由于页面需要用到BorderContainer和ContentPane,需要引入它们相关的jsLIJ办公区 - 实用经验教程分享!

    dojo.require("dijit.layout.BorderContainer");LIJ办公区 - 实用经验教程分享!

    dojo.require("dijit.layout.ContentPane");LIJ办公区 - 实用经验教程分享!

    如下图所示:LIJ办公区 - 实用经验教程分享!

    MyEclipse2014下如何用Dojo上中下布局LIJ办公区 - 实用经验教程分享!

  • 4

    第四步,样式文件和js文件引入完成后,现在准备在body>/body>中进行布局,以“BorderContainer”作为外部整体框架,如下图所示:LIJ办公区 - 实用经验教程分享!

    MyEclipse2014下如何用Dojo上中下布局LIJ办公区 - 实用经验教程分享!

  • 5

    第五步,在“BorderContainer”中,进行上中下布局。利用ContentPane容器以及它的属性“region”,进行布局LIJ办公区 - 实用经验教程分享!

    上:region:"top"LIJ办公区 - 实用经验教程分享!

    中:region:"center"LIJ办公区 - 实用经验教程分享!

    下:region:"bottom"LIJ办公区 - 实用经验教程分享!

    具体代码见下图:LIJ办公区 - 实用经验教程分享!

    MyEclipse2014下如何用Dojo上中下布局LIJ办公区 - 实用经验教程分享!

    MyEclipse2014下如何用Dojo上中下布局LIJ办公区 - 实用经验教程分享!

    MyEclipse2014下如何用Dojo上中下布局LIJ办公区 - 实用经验教程分享!

  • 5本页面未经许可获取自百度经验
  • 注意事项

    • 要保证页面美观,必须引入dojo中的样式文件
    • 要保证dojo正确解析,必须引入dojo的核心js文件以及相关的属性
    • dojo中的容器是否包含得注意

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!LIJ办公区 - 实用经验教程分享!


    标签: MYECLIPSECSSHTML

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码