dojox/layout/FloatingPane浮动面板小部件

来源：互联网发布：开淘宝店需要交费吗编辑：程序博客网时间：2024/06/05 10:38

该小部件让contentPane内容面板浮动，并且通过拖拽标题可以移动该面板。该小部件提供了最小化、最大化、关闭、可调整大小的功能。我们可以在浮动面板里面放置html元素，来显示在面板上。

注解：有时html元素的布局与样式需要配合bootstrap来使用，效果更好。注意的是创建小部件时有时需要引入相应的CSS样式，否则显示会有问题。

例如：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动面板</title>
<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_v43_api/arcgis_js_api/library/4.3/4.3/esri/css/main.css"/>
<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_v43_api/arcgis_js_api/library/4.3/4.3/dijit/themes/soria/soria.css"/>
<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_v43_api/arcgis_js_api/library/4.3/4.3/dojox/layout/resources/FloatingPane.css"/>
<script type="text/javascript" src="http://localhost/arcgis_js_v43_api/arcgis_js_api/library/4.3/4.3/init.js"></script>
<style type="text/css">
html,body{ margin: 0px;padding:0px;width:100%;height:100%}
</style>
<script type="text/javascript">
require(["dojo/_base/window",
"dojo/_base/declare",
"dojox/layout/FloatingPane",
"dojo/dom-construct",
"dojo/on",
"dojo/domReady!"],
function(Win,declare,FloatingPane,domConstruct,on)
{
var divNode=domConstruct.create("div",{},Win.body());
var b = "<div id='wrj_lb' style='width:99%;height:575px;margin-left: 2px;'>"
+"<div id='querydiv'>"

+"<div class='input-group' style='margin-top: 2px;'>"
+"<input name='s' id='search' type='text' placeholder='输入查询信息...' class='form-control input-sm' style='width:200px;height:21px;color: #547088; margin-left: 15px;font-size: 14px;'>"
+"<select id = 'select' name='s.asasas' style='color: #999999;font-size: 14px; height: 27px;margin-left:7px;width:200px;'>"
+"<option value=''>请选择设备</option>"
+"<option value='0'>无人机</option>"
+"<option value='1'>地面设备</option>"
+"</select>"
+"</div>"
+"</div>"

+"<div id='asdsdas'>"
+"<div style='margin-top: 2px;'>"
+"<input type='text' placeholder='请选择第一个时间...' id='date1' name='s.kssj' style='color: #547088;width:200px;margin-left: 15px;height:21px;font-size: 14px;'>"
+"<input type='text' ' placeholder='请选择第二个时间...' id='date2' name='s.jssj' style='color: #547088;width:196px;margin-left: 7px;margin-bottom: 4px;height:21px;font-size: 14px;'>"
+"<a class='input-group-addon btn btn-info' id='sousuo' style='width:407px;background-color: #16C3FC;'><i class='glyphicon glyphicon-search'>查询</i>"
+"</a>"
+"</div>"
+"</div>"

+"<div id='datagird' style='width:99%;height:480px;margin-left: 2px;margin-top: 35px;'>"
+"</div>"
+"</div>";
var floatPane=new FloatingPane(
{
id:"myFloatPane",
title:"浮动面板",
resizable:true,//是否允许调整大小
closable:true,//关闭按钮
dockable:false,//最小化后的停靠
content:b,
style:"width:450px;height:600px;top:2%;left:50px;overflow:hidden;padding:0px;z-index:999",
//通过在对象内绑定事件
close:function()
{
alert("浮动面板被关闭！");
this.destroyRecursive();//销毁浮动面板机内容
}
},divNode);
floatPane.startup();//完成创建

});
</script>
</head>
<body class="soria">
</body>
</html>

效果图：

阅读全文

0 0