DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> jquery 簡短右鍵菜單 多浏覽器兼容
jquery 簡短右鍵菜單 多浏覽器兼容
編輯:關於JavaScript     

jquery 簡短 右鍵菜單 兼容ie6 ie7 ie8 firefox chrome


$(function(){
document.oncontextmenu=function(){return false;}//屏蔽右鍵
document.onmousemove=mouseMove;//記錄鼠標位置
});
var mx=0,my=0;
function mouseMove(ev){Ev=ev||window.event;var mousePos=mouseCoords(Ev);mx=mousePos.x;my=mousePos.y;}
function mouseCoords(ev){
if(ev.pageX||ev.pageY){return{x:ev.pageX,y:ev.pageY};}
return{x:ev.clientX,y:ev.clientY+$(document).scrollTop()};
}
$.fn.extend({RightMenu: function(id,options){options = $.extend({menuList:[]},options);var menuCount=options.menuList.length;
if (!$("#"+id)[0]){
var divMenuList="<div id=\""+id+"\" class=\"div_RightMenu\"><div><ul class='ico'>";
for(var i=0;i<menuCount;i++){
divMenuList+="<li class=\"RMli_"+options.menuList[i].menuclass+"\" onclick=\""+options.menuList[i].clickEvent+"\">"+options.menuList[i].menuName+"</li>";
}
divMenuList += "</ul></div><div>";
$("body").append(divMenuList).find("#"+id).hide().find("li")
.bind("mouseover",function(){$(this).addClass("RM_mouseover");})
.bind("mouseout",function(){$(this).removeClass("RM_mouseover");});
$(document).click(function(){$("#"+id).hide();});
}
return this.each(function(){
this.oncontextmenu=function(){
        /*這段 判斷鼠標移到頁面的最右側或者最下側 防止出現滾動條 {*/
var mw=$('body').width(),mhh=$('html').height(),mbh=$('body').height(),
w=$('#'+id).width(),h=$('#'+id).height(),
mh=(mhh>mbh)?mhh:mbh;//最大高度 比較html與body的高度
if(mh<h+my){my=mh-h;}//超 高
if(mw<w+mx){mx=mw-w;}//超 寬
      /*} 當然也可以直接跳過*/
$("#"+id).hide().css({top:my,left:mx}).show();
}
});
}
});

 

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved