AccordionContainer widget的应用

最新推荐文章于 2024-09-05 10:05:59 发布

原创最新推荐文章于 2024-09-05 10:05:59 发布 · 1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#dojo #stylesheet #div #html #javascript

dojo 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用AccordionContainer创建可折叠的布局模式，并通过实例展示了如何加载Dojo库、调用AccordionContainer组件及设置多个可折叠的AccordionPane。

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>）并是一个个可折叠的布局。