使用 Dojo 提供的灵活多样的布局方式
2010-08-06 00:00:00 来源:WEB开发网清单 12. FloatingPane: 程序生成法示例
…
<head>
<link rel="stylesheet" type="text/css" href="ibmdojo/dijit/themes/soria/soria.css">
<link rel="stylesheet" type="text/css"
href="ibmdojo/dojox/layout/resources/FloatingPane.css">
<link rel="stylesheet" type="text/css"
href="ibmdojo/dojox/layout/resources/ResizeHandle.css">
</head>
<script type="text/javascript" src="ibmdojo/dojo/dojo.js"
djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dojox.layout.FloatingPane");
dojo.addOnLoad(function(){
var myFP = new dojox.layout.FloatingPane({
id: "myFloatingPane",
content: " The Content of the Floating World!",
resizable:true,
dockable:true,
title: "Floating World",
closable:true,
style:{ position:"absolute", top:0, left:0, width:"150px", height:"150px"}
},dojo.byId("myFloatingPane")
);
myFP.startup();
});
</script>
<body class="soria">
<div id="myFloatingPane" />
</body>
需要注意的是:1. 必须引用 FloatingPane.css; 2. 如果需要具备改变容器大小 (resize) 功能,需引用 ResizeHandle.css.
更多精彩
赞助商链接