目前只实现了停靠在left和top
//script脚本
//鼠标悬停
function showTreeMenu() {
//获取treeMenu的top和left的值
var posTop = document.getElementById("treeMenu").offsetTop+document.body.scrollTop;
var posLeft = document.getElementById("treeMenu").offsetLeft;
if(posLeft<=0){ //判断当前是否停靠在左侧
//$("img[name=switch]").attr("src", "images/closeTree.jpg"); //设置图片
$("#treeMenu").attr("style",
"width:200px;height:250px;left:0px;top:"+posTop+"px;");
}
if(posTop<=-10){ //判断当前是否停靠在屏幕上方
//$("img[name=switch]").attr("src", "images/closeTree.jpg"); //设置图片
$("#treeMenu").attr("style",
"width:200px;height:250px;left:"+posLeft+"px;top:-10px;");
}
}
//鼠标移出
function hideTreeMenu(){
var posTop = document.getElementById("treeMenu").offsetTop+document.body.scrollTop;
var posLeft = document.getElementById("treeMenu").offsetLeft;
if(posLeft<=0){ //判断当前是否停靠
//$("img[name=switch]").attr("src", "images/openTree.jpg");
$("#treeMenu").attr("style",
"width:200px;height:250px;left:-155px;top:"+posTop+"px;");
}
if(posTop<=-10){
//$("img[name=switch]").attr("src", "images/openTree.jpg");
$("#treeMenu").attr("style",
"width:200px;height:250px;left:"+posLeft+"px;top:-210px;");
}
}
$(function(){
$("#treeMenu").draggable({
//easyUI的div拖拽
//onStopDrag:拖拽停止时触发
onStopDrag: function (e) {
var posTop = document.getElementById("treeMenu").offsetTop+document.body.scrollTop;
var posLeft = document.getElementById("treeMenu").offsetLeft;
if(posLeft<0){
$("#treeMenu").attr("style",
"width:200px;height:250px;left:-155px;top:"+posTop+"px;");
}
if(posTop<-10){
$("#treeMenu").attr("style",
"width:200px;height:250px;left:"+posLeft+"px;top:-210px;");
}
}
});
});
//需要隐藏的树形菜单
//使用easyui和zTree
<div id="treeMenu" class="easyui-draggable"
style="width:200px;height:210px;left:-155px;top:100px;"
onmouseover = "showTreeMenu()" onmouseout = "hideTreeMenu()">
<ul id="positionzTree" class="ztree"
style="width:150px;height:200px;float:left"></ul>
</div>