<!DOCTYPE html>
<html style="height:100%;width:100%">
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="./font-awesome/css/font-awesome.min.css">
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=67jMQ5DmYTe1TLMBKFUTcZAR"></script>
<script>
var gMoboxMap;
function collapsetree()
{
alert("fdsf");
}
function clickfolder(obj)
{
//alert(obj.className);
var point = new BMap.Point(116.404, 39.915);
gMoboxMap.centerAndZoom(point, 15);
var marker = new BMap.Marker(point); // 创建标注
gMoboxMap.addOverlay(marker); // 将标注添加到地图中
if(obj.className == "fa fa-plus-square-o")
{
obj.setAttribute("class","fa fa-minus-square-o");
}
else
{
obj.setAttribute("class","fa fa-plus-square-o");
}
var itemp=obj.parentNode;
if(itemp)
{
var itemss=itemp.getElementsByTagName("li");
var itemlen= itemss.length;
for(var i=0;i<itemlen;i++)
{
if(itemss[i].style.display == "none")
{
itemss[i].style.display = "";
}
else
{
itemss[i].style.display = "none";
}
}
}
}
function moveon(obj)
{
//alert("fdsf");
obj.style.cursor="default";
// obj.style.font-weight='900';
// obj.style.display="block";
// obj.style.border="1px solid #ADADAD";
// obj.style.background="#ADADAD";
// obj.style.width="200px";
obj.style.color='#00EC00';
// obj.setAttribute("style","text-decoration:underline");
}
function moveout(obj)
{
//alert("fdsf");
obj.style.cursor="default";
// obj.style.display="inline";
// obj.style.border="none";
// obj.style.background="#F0F0F0";
obj.style.color='black';
}
function buildTree()
{
}
window.onload = function()
{
// map initialization...
gMoboxMap = new BMap.Map("moboxmap"); // 创建Map实例
gMoboxMap.centerAndZoom(new BMap.Point(121.5, 31.2), 12); // 初始化地图,设置中心点坐标和地图级别
gMoboxMap.addControl(new BMap.MapTypeControl()); //添加地图类型控件
gMoboxMap.setCurrentCity("上海");
gMoboxMap.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
//tree inialization...
buildTree();
}
</script>
<style type="text/css">
body
{
color: #000;
background: #fff;
background-color:green;
margin:0;
padding: 0;
width: 100%;
height: 100%;
font-family: verdana,arial,sans-serif;
}
.first
{
width: 30%;
height: 100%;
float:left;
background-color: #F0F0F0;
line-height:30px;
margin-right:4px;
font-family: Georgia,sans-serif,verdana,arial;
}
.second {
width: 70%;
height: 100%;
float:left;
margin:0;
padding: 0;
background-color: #F0F0F0;
margin-right:-4px;
}
.second .map {
width: 100%;
height: 70%;
float:left;
background-color: #D0F0F0;
}
.second .table {
width: 100%;
height: 30%;
float:left;
background-color: #F0F0F0;
}
</style>
</head>
<body>
<p style="text-align:center; color:#FFFFFF">Mobox Monitor System</p>
<div class="first" id="moboxgwtree">
<li><span> Box List</span>
<ul style="list-style-type:none">
<li><span onclick="clickfolder(this)" onMousemove="moveon(this);" onMouseout="moveout(this);" class="fa fa-minus-square-o"> <span class="fa fa-building-o"> Headquater(32/28/4)</span></span>
<ul style="list-style-type:none">
<li class="testli">
<span onclick="clickfolder(this)" onMousemove="moveon(this);" onMouseout="moveout(this);" class="fa fa-minus-square-o"> <span class="fa fa-sitemap"> G19780001</span></span>
<ul style="list-style-type:none">
<li><span class="file">File 2.1.1</span></li>
<li><span class="file">File 2.1.2</span></li>
</ul>
</li>
<li><span class="folder">Subfolder 2.2</span>
<ul>
<li><span class="file">File 2.2.1</span></li>
<li><span class="file">File 2.2.2</span></li>
</ul>
</li>
</ul>
</li>
<li class="closed"><span class="folder">Folder 3 (closed at start)</span>
<ul>
<li><span class="file">File 3.1</span></li>
</ul>
</li>
<li><span class="file">File 4</span></li>
</ul>
</li>
</ul>
</div>
<div class="second">
<div class="map" id="moboxmap"></div>
<div class="table" id="moboxtable"></div>
</div>
</body>
</html>