<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>内容面板的演示</title>
<link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.16/3.16/dijit/themes/tundra/tundra.css" />
<!--<link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.16/3.16/dojox/layout/resources/FloatingPane.css"/>-->
<link href="css/FloatingPane.css" rel="stylesheet" />
<link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.16/3.16/esri/css/esri.css" />
<script>
dojoConfig = { isDebug: true, async: true };
</script>
<script src="http://localhost/arcgis_js_api/library/3.16/3.16/init.js"></script>
<script src="script/jsapi_vsdoc10_v37.js"></script>
<script type="text/javascript">
require(["dojo/parser", "dijit/layout/ContentPane", "dijit/form/Button", "dojo/domReady!"],
function (parser) {
parser.parse();
});
function makeAboutBox() {
require(["dojo/request", "dojo/_base/window", "dojo/dom-style", "dojox/layout/FloatingPane"],//引用模块
function (request, win, style, FloatingPane) {
//创建一个div,并动态加载里面的内容
var floaterDiv = document.createElement("div");
win.body().appendChild(floaterDiv);
floaterDiv.appendChild(document.createElement("br"));
var textarea = document.createElement("div");
textarea.innerHTML = "加载中...";
floaterDiv.appendChild(textarea);
//创建一个浮动的div
var temp = new FloatingPane({
title: "<b>关于本app</b>",
closeable: true,//允许滚动条
resizable: true,//
dockable: false,
resizeAxis: 'xy'//设置小部件的参数
}, floaterDiv);
//调用小部件浮动面板
temp.startup();
//调用小部件的方法进行大小调整.
temp.resize({
w: 350,
h: 200
});
//调用dojo/dom-style功能模块set函数进行样式的更改;style.set(一个节点,一个样式名,样式的值)
style.set(temp.domNode, "top", "100px");
style.set(temp.domNode, "left", "100px");
style.set(temp.domNode, "z-index", 500);
//显示
temp.show();
//require API说明
//require(["dojo/request"], function (request) {
// request(url, options).then(
// function (response) {
// //处理成功是返回的数据response
// },
// function (error) {
// //处理失败后返回的数据error
// },
// function (evt) {
// //处理progress事件
// });
//});
//dojo/request第一个参数是请求的url;第二个参数是可选的json,用于定制请求的参数:
//json的详细参数:method:请求方式,例如:"GET"||request.get;
//sync:是否异步.
//query:字符串或key-value对象,请求参数;
//data,timeout,handleAs(字符串,返回参数的类型:text(默认))
//preventCache:默认false,true是服务器不能提供缓冲
//headers:key-value,
request("about.html").then(
function (response) {
textarea.innerHTML = response;
}, function (response) {
alert("出错,原因是" + response);
textarea.innerHTML = '不能找到执行的HTML';
});
//将返回的文件内容显示在textarea中.
temp.bringToTop();
});
}
</script>
</head>
<body class="tundra">
<div data-dojo-type="dijit/layout/ContentPane" style="width: 100px; height: 200px; float: left;border:1px solid black"></div>
<div data-dojo-type="dijit/form/Button">
相关信息
<script type="dojo/on" data-dojo-event="click" data-dojo-args="evt">
makeAboutBox();
</script>
</div>
<div data-dojo-type="dijit/form/Button">zeadfafsd</div>
</body>
</html>
浙公网安备 33010602011771号