目前只實現了停靠在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>