完美Web仿Mac菜单界面设计

网上已经有一些仿Mac菜单的Web设计，但实现有局限且功能非常有限，本文真正实现了Mac菜单设计。（完美实现了拖拽删除、拖拽排序、强制恢复大小等细节）​

大家先看看实际效果，觉得适用再看具体代码：​

http://v.youku.com/v_show/id_XODk0NTE1Nzcy.html

具体代码及分析：

<%String contextPath = request.getContextPath();%>

<script src="<%=contextPath%>/myJs/guide.js">script> 

<script src="<%=contextPath%>"/jquery/jquery-1.11.2.js' type='text/javascript' charset='utf-8'>script>



<script src="<%=contextPath%>/jquery-easyui-1.3.6/jquery.easyui.min.js" type="text/javascript">script>
<script src="<%=contextPath%>/jquery-easyui-1.3.6/locale/easyui-lang-zh_CN.js" type="text/javascript">script>

<link href="<%=contextPath%>/jquery-easyui-theme/default/easyui.css" rel="stylesheet" type="text/css" /> 
<link href="<%=contextPath%>/jquery-easyui-theme/icon.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
//页面初始化
$(function(){
//垃圾桶隐藏
$('#dustbin').hide();
  $.messager.show("操作提醒", "保存常用系统用户名、密码，实现自动一键登录。
点\"这里\"试试吧！", "info", "topCenter");
  //侧向工具栏收放
  window.guide.initSideBar();
<%if (!StringUtils.isBlank(account)) {%>
  $('#sideBarMask').show();
  $('#addMenuIcon').show();
$('#userMenu').html("您未添加导航菜单，点击添加");

  window.guide.setAccount('<%=account%>');

  window.guide.initUserMenu();
window.guide.setUserMenus($('.dragTitle'));

  //实现Mac效果菜单
window.guide.initMacFilter();
  //强制恢复菜单原始状态
window.guide.initHtmlFilter();
  //拖拽组件实现
  window.guide.initUserMenuDraggable();
  window.guide.initDustBinDroppable();
  //初始化html页面的快速统一登录对话框
  window.guide.initHtmlNav();
  //初始化html页面的跳转记录功能
  window.guide.initJumpFilter('<%=loginlId%>');
  //初始化html页面的跳转提示功能
  window.guide.initHtmlDivTip();

  <%}else{%>
  $('#sideBarMask').hide();
  $('#addMenuIcon').hide();
  $.messager.show("操作提醒", "登录系统可以实现更强大的导航功能。
点\"这里\"登录！", "info", "topCenter");
  $('#userMenu').html("您未登录，点击登录");
  <%}%>
});
script>

<div class="easyui-layout" data-options="fit:true" >
<div id="userMenuPanel"  data-options="region:'north',minHeigth: 100, maxHeigth: 120" data-options="fit:true" style="height:100px;padding: 0px; border: 0px;background-color: #fbf9f8;">
<div ><a id="addMenuIcon" href="#" onclick="javascript:window.guide.initJumpGoto();"><img src="myIcons/icon-standard/32x32/add.png"/>a>div>
<div id="dustbin" class="easyui-droppable" data-options="accept:'img'" style="width:80px;height:80px"><img src="myIcons/icon-standard/64x64/garbage.png"/>div>​
<div id="div1" >
<p id="userMenu"><a href="#" onclick="javascript:window.guide.initJumpGoto();">您未登录或还没有自定义菜单，点击添加a>p>
div>

div>
div>
div>

关键guide.js及分析

//初始化对鼠标位置的捕捉
window.guide.initMacFilter=function(){
if($(userMenuPanel).get(0).onmousemove==null){
$(userMenuPanel).get(0).onmousemove=function mymove(e){  
var oEvent=e||window.event;
var oDiv=document.getElementById('div1');
var aImg=oDiv.getElementsByTagName('img');
var d=0;
//变化范围---应有边缘图标最小化，没有修改该值(下方640，上方200)
var iMax=200;
var i=0;
function getDistance(obj)
{
//console.log(obj.offsetLeft+oDiv.offsetLeft-oEvent.clientX+obj.offsetWidth/2, 2);
return Math.sqrt
(
Math.pow(obj.offsetLeft+oDiv.offsetLeft-oEvent.clientX+obj.offsetWidth/2, 2)+
Math.pow(obj.offsetTop+oDiv.offsetTop-oEvent.clientY+obj.offsetHeight/2, 2)
);
}

for(i=0;iMath.min(d, iMax);
//调整图片变化幅度就修改这句
//aImg[i].width=((iMax-d)/(iMax-300))*200+64;//放置页面下方
aImg[i].width=((iMax-d)/iMax)*30+64;//放置页面上方
}
if(!isUserMenuVisited){
isUserMenuVisited=true;
}
};
}
};

//强制恢复图标大小
window.guide.initHtmlFilter=function(){
//恢复用户菜单图标大小
if($(htmlPanel).get(0).mousemove==null){
$(htmlPanel).mousemove(function mymove(ev){
if(isUserMenuVisited){
for(var i=0;ivar oDiv=document.getElementById('div1');
var aImg=oDiv.getElementsByTagName('img');

$(aImg[i]).attr('width','64px');
}
isUserMenuVisited=false;
}
       });
}
};

//初始化用户菜单拖拽功能
window.guide.initUserMenuDraggable=function(){
var indicator = $('
▲
').appendTo('body');
//var userMenus=$('#div1 img');
for(var i=0;i//edge:30,
cursor:'move',
proxy:'clone',/*function(source){
//console.log($(source).clone().attr('src'));
var p = $('
');
p.html($(source).html()).appendTo('body');
return p;
},*/
revert:true,
onStartDrag:function(){
$('#dustbin').show();
window.guide.defectMacFilter();
},
onStopDrag:function(){
$('#dustbin').hide();
window.guide.initMacFilter();
} 
}).droppable({
onDragOver:function(e,source){
indicator.css({
display:'block',
left:$(this).offset().left+75,
top:$(this).offset().top+$(this).outerHeight()-5
});
},
onDragLeave:function(e,source){
indicator.hide();
},
onDrop:function(e,source){
$(source).insertAfter(this);
//var userMenus=$('#div1 img');
var url=hy.contextPath+'/nav!update.action';
window.guide.resetUserMenus();
for(var i=0;i//console.log($(userMenus[i]).attr('id'));
//userMenuOrder.put(i,$(userMenus[i]).attr('id'));
var data=userMenuMap.get($(userMenus[i]).attr('id'));
data.ordernum=i;
//console.log(data.id);

$.post(url,{
'data.id':data.id,
'data.url':data.url,
'data.params':data.params,
'data.title':data.title,
'data.iconcls':data.iconcls,
'data.username':data.username,
'data.ordernum':data.ordernum
},function(result){
//console.log(result);
if(result.success){
//console.log('setSuccess!');
}
}
,'json'); 
}
indicator.hide();
}
});
}
};
//初始化垃圾篓丢放操作
window.guide.initDustBinDroppable=function(){
$('#dustbin').droppable({
accept:'.dragTitle',
onDragEnter:function(){
$(this).addClass('over');
},
onDragLeave:function(){
$(this).removeClass('over');
},
onDrop:function(e,source){
$(this).removeClass('over');
var c = $(source).clone().addClass('assigned');
$.messager.confirm('提示','确定删除该链接？',function(confirm){
if(confirm){
var url=hy.contextPath + '/nav!delete.action';
$.post(url,{id:c.attr('id')},function(result){
if(result.success){
history.go(0);
}else{
$.messager.show('信息','删除失败，请刷新后重试!' ,"alert", "center");
}
},'json');
}
});
}
});
};