仿Mac菜单guide.js全部代码

(function($) {

    $.util.namespace("guide");


    //存储数据库信息
    var userMenuMap=new Map();
    //判断userMenu是否被访问过
    var isUserMenuVisited=false;
    //初始化用户定义列表
    var menuImgs="<div id=\"{0}\" class=\"dragTitle\" style=\"padding:10px 1px;;display:inline\"><a href=\"{1}\" class=\"easyui-tooltip\" target=\"_blank\" title=\"{2}\" ><img  width=\"64px\" src=\"{3}\" alt=\"{2}\"/></a></div>";
    var menuImgsNoTip="<div id=\"{0}\" class=\"dragTitle\" style=\"padding:10px 1px;;display:inline\"><a href=\"{1}\" target=\"_blank\"><img  width=\"64px\" src=\"{3}\" alt=\"{2}\"/></a></div>";
    var divBeforeCount='<span style="color:#fff">正在统计近期访问情况...</span>';

    var userMenus,account="";
    var userMenu="#userMenu",userMenuPanel="#userMenuPanel",htmlPanel="#htmlPanel",
        navHtmls=".navHtml",navRecs=".navRec",navTips=".navTip",divDivs=".dragTitle", 
        sideBarMask="#sideBarMask",addMenuIcon="#addMenuIcon";

    window.guide.setUserMenus=function(data){
        userMenus=$(data);
    };

    window.guide.resetUserMenus=function(){
        userMenus=$(divDivs);
    };
    window.guide.setAccount=function(data){
        account=data;
    };
    //设定超链接统计窗口
    window.guide.initHtmlDivTip=function(){
        //var div='<span style="color:#fff">{0} {1}</span>';
        for(var i=0;i<$(navTips).size();i++)
        {
            var navTip=$(navTips)[i];

            $(navTip).mouseover(function(){window.guide.initHtmlTip(this);}); $(navTip).mouseout(function(){ try{ $(navTip).tooltip('tip'); $(navTips).tooltip('hide'); }catch(e){ } }); } }; window.guide.initHtmlTip=function(navTip){ try{ $(navTip).tooltip('tip'); }catch(e){ $(navTip).tooltip({ position: 'bottom', content: divBeforeCount, onShow: function(){ $(this).tooltip('tip').css({ backgroundColor: '#666', borderColor: '#666' }); } }); $(navTip).tooltip('show'); setTimeout(function(){window.guide.showNavCount(navTip);}, 1000);  //window.guide.showNavCount(navTip); } }; window.guide.showNavCount=function(navTip){ if($(navTip).tooltip('options').content==divBeforeCount){ var title=$(navTip).attr('alt'); var url=$(navTip).attr('href'); var posturl=hy.contextPath+'/jumpl!getJumpLogByLoginlInThirtyDays.action'; var posturl1=hy.contextPath+'/jumpl!getJumpLogByLoginlInCurrentWeek.action'; var countIn30=0,countInWeek=0; $.ajax({url:posturl,async:false,data:{ 'data.title':title, 'data.url':url }, success:function(result){ if(result!=null){ countIn30=result; } },dataType:'json'}); //为了性能不再统计本周情况，以后可以考虑使用ehcache $.ajax({url:posturl1,async:false,data:{ 'data.title':title, 'data.url':url }, success:function(result){ if(result!=null){ countInWeek=result; } },dataType:'json'}); setTimeout(function(){ $(navTip).tooltip({ position: 'bottom', content: '<span style="color:#fff">近30天访问'+countIn30+'次；本周访问'+countInWeek+'次</span>', //content: '<span style="color:#fff">近30天访问'+countIn30+'次</span>', onShow: function(){ $(this).tooltip('tip').css({ backgroundColor: '#666', borderColor: '#666' }); } }); $(navTip).tooltip('show'); }, 2000); } }; //初始化Html页面快速登录窗口 window.guide.initHtmlNav=function(){ $(navHtmls).bind("click",function(e){ var urlString=$(this).attr("name"); var href=$(this).attr("href"); //var title=$(this).attr("alt"); e.preventDefault(); htmlLoginDialog=$.easyui.showDialog({ top: 280, left: 380, width: 250, height:155, enableApplyButton:false, enableSaveButton:false, enableCloseButton:false, iconCls:'icon-my-standard-fast-forward', model:true, topMost:true, title: "快速通道", href: hy.contextPath + '/securityJsp/base/nav/htmlLogin.jsp', buttons: [{ text: "登录", iconCls: "icon-ok", index: 0, handler: function (dialog) { var username=dialog.form("getData").username, password=dialog.form("getData").password; var url=hy.formatString(urlString,username,password); window.open(url); if(dialog.form("getData").save){ $.cookie('navUsername',username); //$.cookie(title+'navPassword',password); }else{ $.cookie('navUsername',null); //$.cookie(title+'navPassword',null); } dialog.dialog("close"); } },{ text: "跳过", iconCls: "icon-cancel", index: 1, handler: function (dialog){ dialog.dialog("close"); window.open(href);  } }] }); $(navTips).tooltip('hide'); }); }; //记录跳转地址 window.guide.recordJump=function(href,loginId){ if(loginId!=""){ var url=hy.contextPath+'/jumpl!saveJumpl.action'; $.post(url,{ 'id':loginId, 'data.url':$(href).attr('href'), 'data.title':$(href).attr('alt') }, function(result){ if(result.success){ //console.log('jump Record OK!'); } },'json'); } }; window.guide.initJumpFilter=function(loginId){ $(navRecs).bind('click',function(e){ window.guide.recordJump(this,loginId); } ); }; //打开新建用户菜单窗口 window.guide.initJumpGoto=function(){ dialogAddNav=$.easyui.showDialog({ top: 220, left: 280, width: 270, height:350, enableApplyButton:false, enableSaveButton:true, enableCloseButton:false, model:true, topMost:true, title: '添加我的菜单', href: hy.contextPath + '/securityJsp/base/nav/addNav.jsp', onSave: function (dialogAddNav) { //$.easyui.showOption(dialogAddNav.form("getData"), { title: "您输入的数据为" }); var validate = dialogAddNav.form("validate"); var name=dialogAddNav.form("getData").name; var pwd=dialogAddNav.form("getData").pwd; var params=dialogAddNav.form("getData").params; var url=dialogAddNav.form("getData").url; var iconcls=dialogAddNav.form("getData").iconcls; var ordernum=dialogAddNav.form("getData").ordernum; var title=dialogAddNav.form("getData").title; if(name.length>0&&params.length==0){ params=name+","+pwd; } var postUrl = hy.contextPath + '/nav!save.action'; $.post(postUrl, { 'data.username':account, 'data.title':title, 'data.url':url, 'data.params':params, 'data.ordernum':ordernum, 'data.iconcls':iconcls }, function(result) { if (result.success) { history.go(0); }else{ $.messager.show("信息","添加失败，请重试！", "info", "topCenter"); } }, 'json'); dialogAddNav.dialog('close'); } }); };  window.guide.initUserMenu=function(){ var userMenuString=""; var url=hy.contextPath + '/nav!getNavByUsername.action'; $.ajax({url:url,type:"POST",cache:false,async:false,success:function(result){ if(result.length>=12){$(addMenuIcon).hide();} if(result.length>0){ for(var i=0;i<result.length;i++){ var href=hy.formatListString(result[i].url,result[i].params.split(',')); params=result[i].params; var data = new Object(); data.id=result[i].id; data.url=result[i].url; data.username= account; data.params=params; data.title=result[i].title; data.iconcls=result[i].iconcls; data.ordernum=result[i].ordernum; userMenuMap.put(result[i].id,data); if(result[i].title==undefined||result[i].title==""){ userMenuString+=hy.formatString(menuImgsNoTip,result[i].id,href,result[i].title,result[i].iconcls); }else{ userMenuString+=hy.formatString(menuImgs,result[i].id,href,result[i].title,result[i].iconcls); } } } },dataType:'json'});  if(userMenuString!=""){ userMenuString=userMenuString.replace('64x64','128x128'); $(userMenu).replaceWith(userMenuString); } }; //初始化对鼠标位置的捕捉 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;i<aImg.length;i++) { d=getDistance(aImg[i]); d=Math.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;i<userMenus.length;i++){ var oDiv=document.getElementById('div1'); var aImg=oDiv.getElementsByTagName('img'); $(aImg[i]).attr('width','64px'); } isUserMenuVisited=false; } }); } }; window.guide.initSideBar=function(){ //折叠侧向工具条 $(sideBarMask).animate({left:'-70px'}); //主面板点击时自动折叠侧向工具条 $(htmlPanel).click(function(){ if($(sideBarMask).offset().left>0){ $(sideBarMask).animate({left:'-72px'}); } $(navTips).tooltip('hide'); }); //侧向工具条收放 $(sideBarMask).click(function(){ if($(sideBarMask).offset().left>0){ $(sideBarMask).animate({left:'-72px'}); }else{ $(sideBarMask).animate({left:'1px'}); } }); }; //暂停对鼠标位置的捕捉 window.guide.defectMacFilter=function(){ if($(userMenuPanel).get(0).onmousemove!=null){ //console.log('defectMacFilter'); $(userMenuPanel).get(0).onmousemove=null; } }; //初始化用户菜单拖拽功能 window.guide.initUserMenuDraggable=function(){ var indicator = $('<div class="indicator">▲</div>').appendTo('body'); //var userMenus=$('#div1 img'); for(var i=0;i<userMenus.length;i++) { $(userMenus[i]).draggable({ //edge:30, cursor:'move', proxy:'clone',/*function(source){ //console.log($(source).clone().attr('src')); var p = $('<div style="border:2px solid #ccc;width:65px;height:65px"></div>'); 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<userMenus.length;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'); } }); } }); }; window.guide.showKindPieDialog=function(){ $.easyui.showDialog({ top: 220, left: 280, width: 600, height:500, enableApplyButton:false, enableSaveButton:false, enableCloseButton:true, iconCls:'icon-my-standard-fast-forward', model:true, topMost:true, title: "访问量分类统计", href: hy.contextPath + '/securityJsp/base/nav/kindChart.jsp' }); }; window.guide.showTimeBarDialog=function(){ $.easyui.showDialog({ top: 220, left: 280, width: 700, height:480, enableApplyButton:false, enableSaveButton:false, enableCloseButton:true, iconCls:'icon-my-standard-fast-forward', model:true, topMost:true, title: "访问量时间走势", href: hy.contextPath + '/securityJsp/base/nav/timeChart.jsp' }); }; window.guide.showUserManagerDialog=function(){ $.easyui.showDialog({ top: 220, left: 280, width: 490, height:480, enableApplyButton:false, enableSaveButton:false, enableCloseButton:true, iconCls:'icon-my-standard-fast-forward', model:true, topMost:true, title: "用户管理", href: hy.contextPath + '/securityJsp/base/ldap/userManager.jsp' }); }; })(jQuery);