jQuery实现右键菜单、遮罩等效果代码

前端之家收集整理的这篇文章主要介绍了jQuery实现右键菜单、遮罩等效果代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

最近要做个某管理系统的界面,然后涉及到右键菜单,因为之前没有做过所以就做了一下~感觉还可以,不过我个人不是很喜欢右键菜单的这种形式。

操作:在固定区域内点击鼠标右键出现菜单,然后选择任意一项后进行对应页面跳转。刚开始的想法是用catch..case..的方法,对应不同的选项,只改变弹出层里的内容,但是内容都要用jQuery生成拼接,所以选用了比较简单的页面跳转

下面就只贴上一个示例页面的相关代码

先上效果图:

**index.html主要代码**

Box"> 主界面

**page_test.html主要代码**

Box"> 主界面

<div id="maskBox">

管理应用
应用分类:总部
  • QQ
  • QQ
  • QQ
  • QQ
  • QQ
  • QQ
  • QQ
添加应用
名称:代码: 选择 删除">

**reset.css代码(引入主页)**

Box{ background: orange; width: 380px; border: 2px solid; } a{ text-decoration: none; color: black; } a:hover{ color: white; background: black; }

**main.css代码(引入主页和@R_260_404@)**

Box{ position:absolute; left:0; top:0; height: 100%; width: 100%; background:rgba(0,0.6); }

maskBox .module1{

width: 800px;
height: 500px;
border-radius: 15px;
border: 1px solid #BFDCE3;
margin: 0 auto;
margin-top: 40px;
}

maskBox .top{

border-radius: 15px 15px 0 0;
height: 46px;
line-height: 46px;
width: 800px;
background-color: #F1F7F2;
border: 1px solid #BFDCE3;
text-indent: 20px;
}

maskBox .mid{

height: 418px;
width: 800px;
background-color: white;
border: 1px solid #BFDCE3;
}

maskBox .end{

height: 36px;
width: 800px;
background-color: #F1F7F2;
border-radius: 0 0 15px 15px ;
border: 1px solid #BFDCE3;
}

.mid_left,.mid_right{
display: inline-block;
height: 418px;
}
.mid_left{
width: 270px;
float: left;
border-right: 1px solid #BFDCE3;

}
.mid_right{
width: 528px;
border-right: 1px solid #BFDCE3;
}
.title{

position: relative;
height: 40px;
line-height: 40px;
text-align: center;
color:#DD9A6A;
border-bottom: 1px solid #BFDCE3;
}

.mid_right .title{
text-align: left;
text-indent: 20px;
}
ul.icon_list{
height: 377px;
width: 270px;
overflow: auto;
}
ul.icon_list li{
border-bottom: 1px solid #BFDCE3;
height: 72px;
list-style: none;
line-height: 72px;
padding-left: 20px;
}
ul.icon_list li img{
vertical-align: middle;
margin-right: 20px;
}
.text1{
width: 195px;
height: 28px;
}
.text2{
width: 192px;
height: 28px;
}
.button{
width: 80px;
height: 28px;
border-radius: 5px;
background-color: white;
border:1px solid #a8a8a8;
font-size: 13px;
}
.point{
font-size: 14px;
color:red;
}

**test.css代码**

table{
margin-left: 15px;
}
table tr td{
height: 35px;

}
table tr td:nth-child(1){
height: 35px;
width: 100px;
}
table tr td:nth-child(2){
height: 35px;
width: 390px;
}
table tr:nth-child(9) td{
height: 100px;
padding: 0 50px;
}
table tr:nth-child(9) .button{
margin-right: 60px;
}
table tr:nth-child(9) .button:nth-child(3){
margin-right: 0;
}
table span{
font-size: 14px;
color:deepskyblue;
}
table span.point{
font-size: 14px;
color:red;
}

**func.js代码(引入主页)**

菜单 $(window).ready(function() { $('#myMenu').hide(); $('#textBox').bind("contextmenu",function(e){ //显示菜单 $('#myMenu').show(500);

//跟随鼠标位置
$('#myMenu').css({
'top':e.pageY+'px','left':e.pageX+'px'
});

//屏蔽默认右键菜单
return false;
});
});

**main.js代码(引入主页)**

li").bind('click',function(){ check = $(this).text();

page(check);

});
};
choose();

var page = function(check){
/*
//统一样式改变
//右键列表隐藏
$("#myMenu").hide();

//出现遮罩
$("#textBox").after("

");
checkmenu = 1;
windowwidth = $(window).width();
windowheight = $(window).height();
$("#maskBox").css({
'height': windowheight,'width': windowwidth
});
*/

switch (check){
case "管理应用":
page_admin();
break;
case "添加应用":
page_add();
break;
case "维护应用账号":
page_maintain();
break;
case "修改密码":
page_modify();
break;
case "示例界面":
page_test();
break;
}
};

var page_admin = function(){
console.log("管理应用");
window.location.href="page/page_admin.html";
};

var page_add = function(){
console.log("添加应用");
window.location.href="page/page_add.html";
};

var page_maintain = function(){
console.log("维护应用账号");
window.location.href="page/page_maintain.html";
};

var page_modify = function(){
console.log("修改密码");
window.location.href="page/page_modify.html";
};

var page_test = function(){
console.log("示例界面");
window.location.href="page/page_test.html";
};

//改变屏幕大小时
$(window).resize(function(){
if(checkmenu == 1) {
windowwidth = $(window).width();
windowheight = $(window).height();
$("#maskBox").css({
'height': windowheight,'width': windowwidth
});
}
});

**com.js代码**

//出现遮罩
$("#textBox").after("
");
checkmenu = 1;
windowwidth = $(window).width();
windowheight = $(window).height();
$("#maskBox").css({
'height': windowheight,'width': windowwidth
});

//关闭弹窗 回到主界面
$(".img_close").bind("click",function(){
window.location.href="../index.html";
});

//点击按钮后也回到主界面
$(".save").click(function(){
window.location.href="../index.html";
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/jquery/45529.html

猜你在找的jQuery相关文章