实现只对蓝色的Div弹出自定义菜单,其他位置弹出默认的浏览器菜单
js代码如下:
<script type="text/javascript">
$(function(){
var html='';
html +='<div id="qj_box" class="widget" >';
for(var i=0;i<10;i++){
html += '<div id="box'+i+'" class="box" >'+i+'</div>';
}
html +='</div>';
if($('#qj_box')[0] ==null ){
$('body').append(html);
}
// 判断鼠标点击是由那个键触发的,1是左键,2是滚轮键,3是右键
$('.box').mousedown(function(event){
if(event.which==3){
var itemId=$(this).attr('id');
showMenu(itemId);
}else{
closeMenu();
}
});
// 左键点击关闭自定义菜单
$(document).on('click',function(){
closeMenu();
});
});
// 屏蔽浏览器自带的右键
document.οncοntextmenu=function(event){
if($(event.target).attr('class')=='rk_menubox'){
return false;
}
};
// 弹出菜单代码
function showMenu(itemId){
var mhtml='<div id="rk_menubox" class="rk_menubox">' +
'<div class="rk_menuitem" οnclick="closeItem('+itemId+',1)">关闭此标签</div> ' +
'<div class="rk_menuitem" οnclick="closeItem('+itemId+',2)">关闭其他标签</div> ' +
'<div class="rk_menuitem" οnclick="closeItem('+itemId+',3)">关闭所有标签</div>'+
'</div>';
if($('#rk_menubox')[0]==null){
$('body').append(mhtml);
}
var evt=window.event || arguments[0];
// 获取鼠标右键按下后的位置,据此定义菜单显示的位置
var rightedge=$('#rk_menubox').width()+evt.clientX;
// 判断弹出的菜单是否有溢出浏览器窗口的宽度
if(rightedge>$(window).width()){
var _left=evt.clientX-$('#rk_menubox').width();
$('#rk_menubox').css({top:evt.clientY+'px',left:_left+'px'});
}else{
$('#rk_menubox').css({top:evt.clientY+'px',left:evt.clientX+'px'});
}
}
function closeMenu(){
if($('#rk_menubox')[0]!=null){
$('#rk_menubox').remove();
}
}
function closeItem(tag,opt){
var tagid=$(tag).attr('id');
if(opt==1){
$('#qj_box').children().filter('div[id='+tagid+']').remove();
}else if(opt==2){
$('#qj_box').children().not('div[id='+tagid+']').remove();
}else if(opt==3){
$('#qj_box').children().remove();
}
}
</script>
生成的html代码如下:
<body>
<div id="qj_box" class="widget">
<div id="box0" class="box">0</div>
<div id="box1" class="box">1</div>
<div id="box2" class="box">2</div>
<div id="box3" class="box">3</div>
<div id="box4" class="box">4</div>
<div id="box5" class="box">5</div>
<div id="box6" class="box">6</div>
<div id="box7" class="box">7</div>
<div id="box8" class="box">8</div>
<div id="box9" class="box">9</div>
</div>
</body>
样式CSS代码如下:
.widget{display:inline-block;background:#ff9900;}
.box{width:50px;height:50px;background:#00b7ee;margin:5px;float:left;}
.rk_menubox{width:100px;border:1px solid #ddd;position:absolute;z-index:999;background:#fff;}
.rk_menuitem{line-height:20px;cursor:pointer;padding:0px 5px;}
.rk_menuitem:hover{background:#f4f4f4;}
========= 完结 ===========