AccordionContainer widget的应用

来源：互联网发布：网络测速原理编辑：程序博客网时间：2024/05/08 20:25

AccordionContainer 是可折叠的布局模式，包含一组AccordionPane组件，显示每个AccordionPane组件的标题。但是在同一时间，只能有一个AccordionPane可用。
其实AccordionContainer的用法相当简单，先看个例子：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<base href="<%=basePath%>">

<title>My JSP 'main_left.jsp' starting page</title>

<style type="text/css">

body,html {

font-family: helvetica, arial, sans-serif;

font-size: 90%;

}

</style>

<script

src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js"

djConfig="parseOnLoad: true">

 

</script>

<script type="text/javascript">

dojo.require("dijit.layout.AccordionContainer");

</script>

<link rel="stylesheet" type="text/css"

href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css" />

</head>

<body class=" claro ">

<div style="width: 100%; height: 100%">

<div dojoType="dijit.layout.AccordionContainer" style="height: 100%;">

<div dojoType="dijit.layout.ContentPane" title="人员管理">

</div>

<div dojoType="dijit.layout.ContentPane" title="申请管理">

</div>

<div dojoType="dijit.layout.ContentPane" title="设备动态管理">

</div>

<div dojoType="dijit.layout.ContentPane" title="提交申请">

</div>

<div dojoType="dijit.layout.ContentPane" title="查看设备"

selected="true">

</div>

</div>

</div>

</body>

</html>

上面的例子列出了5个AccordionPane(折叠布局)（如图），只要点击要显示的布局该布局内的内容并会显示在页面上。

要实现上面的功能，也是使用Dojo的第一步，将dojo.js等文件加载到使用它的页面中，加载方法为：

<script

src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js"

djConfig="parseOnLoad: true">

 

</script>

其中src=“http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js”为你dojo.js的文件位置。该例子使用的文件是从网上下载下来的，其实可以将dojo所需的整个文件包下载下来（下载可从官网下 http://dojotoolkit.org/download）然后将zip文件解压到项目目录内（最好单独建个文件夹现取名dojoapp）然后该例子的文件路径就可改为src=”dojoapp/dojo/dojo.js”（该位置因自己情况而定就是你解压的dojo*.zip内的dojo文件夹内的dojo.js文件相对位置）。接下来就可以执行第二步

<script type=”text/javascript”>

dojo.require(“dijit.layout.AccordionContainer”);

</script>

这一步得功能就是调用将要获取的javaScript代码（相当于java的import语句）。第三步并是：

<div dojoType=”dijit.layout.AccordionContainer” style=”height: 100%;”>

<div dojoType=”dijit.layout.ContentPane” title=”人员管理”></div>

<div dojoType=”dijit.layout.ContentPane” title=”申请管理”></div>

<div dojoType=”dijit.layout.ContentPane” title=”设备动态管理”></div>

<div dojoType=”dijit.layout.ContentPane” title=”提交申请”></div>

<div dojoType=”dijit.layout.ContentPane” title=”查看设备” selected=”true”></div>

</div>

将该代码写于要显示的地方。其中<div dojoType=”dijit.layout.AccordionContainer” style=”height: 100%;”>并是该布局。在该元素内的子元素（<div dojoType=”dijit.layout.ContentPane” title=”人员管理”></div>）并是一个个可折叠的布局。