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


Posted in Javascript onSeptember 27, 2016

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

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

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

先上效果图:

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

**index.html主要代码**

<div id="myMenu" >
 <ul>
 <li>管理应用</li>
 <li>添加应用</li>
 <li>维护应用账号</li>
 <li>修改密码</li>
 <li>示例界面</li>
 </ul>
</div>
<div id="mask"> </div>
<div id="textbox">
主界面
</div>

**page_test.html主要代码**

<div id="textbox">
 主界面
</div>

<div id="maskbox">
 <div id='admin' class='module1'>
 <div class='top'>
  管理应用
  <img class="img_close" src="../images/close.png" alt="">
 </div>
 <div class='mid'>
  <div class='mid_left'>
  <div class='title'>应用分类:总部</div>
  <ul class='icon_list'>
   <li><img src='../images/45x45/qq.jpg' alt=''> <span>QQ</span></li>
   <li><img src='../images/45x45/qq.jpg' alt=''> <span>QQ</span></li>
   <li><img src='../images/45x45/qq.jpg' alt=''> <span>QQ</span></li>
   <li><img src='../images/45x45/qq.jpg' alt=''> <span>QQ</span></li>
   <li><img src='../images/45x45/qq.jpg' alt=''> <span>QQ</span></li>
   <li><img src='../images/45x45/qq.jpg' alt=''> <span>QQ</span></li>
   <li><img src='../images/45x45/qq.jpg' alt=''> <span>QQ</span></li>
  </ul>
  </div>
  <div class='mid_right'>
  <div class='title'>添加应用</div>
  <div class="content">
   <form action="">
   <table>
    <tr>
    <td>应用机构:</td>
    <td>
     <select class="text1" name="">
     <option value=""></option>
     </select>
    </td>
    </tr>
    <tr>
    <td>应用类型:</td>
    <td>
     <select class="text1" name="">
     <option value=""></option>
     </select>
    </td>
    </tr>
    <tr>
    <td>应用名称:</td>
    <td>
     <input type="text" class="text2">
    </td>
    </tr>
    <tr>
    <td>应用代码:</td>
    <td>
     <input type="text" class="text2">
     <span class="point">(字母、数字及组合;唯一)</span>
    </td>
    </tr>
    <tr>
    <td>接入类型:</td>
    <td>
     <select class="text1" name="">
     <option value=""></option>
     </select>
    </td>
    </tr>
    <tr>
    <td>超时时间:</td>
    <td>
     <select class="text1" name="">
     <option value=""></option>
     </select>
    </td>
    </tr>
    <tr>
    <td>选择图标:</td>
    <td>
     <input type="text" class="text2">
     <span>选择</span>
    </td>
    </tr>
    <tr>
    <td>应用地址:</td>
    <td>
     <input type="text" class="text2">
    </td>
    </tr>
    <tr>
    <td colspan="2">
     <input type="button" class="del button" value="删除">
     <input type="button" class="reset button" value="重置">
     <input type="button" class="save button" value="保存">
    </td>
    </tr>
   </table>

   </form>
  </div>
  </div>
 </div>
 <div class='end'></div>
 </div>
</div>

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

*{
 padding: 0;
 margin: 0;
 font-family: '微软雅黑'
}
#mask{
 position: absolute;
 left: 0;
 top: 0;
 z-index: 9000;
 display: block;
}
#myMenu{
 position: absolute;
 display: none;
 z-index: 9999;
 background: white;
 border: 1px solid;
 width: 130px;
 height: 130px;
}
ul li{
 list-style: none;
 height: 25px;
 line-height:25px;
 font-size: 14px;
 cursor: pointer;
 margin-left: 5px;
 border-bottom: 1px solid black;
}
ul li:nth-child(5){
 border-bottom:none;
}
#textbox{
 background: orange;
 width: 380px;
 border: 2px solid;
}
a{
 text-decoration: none;
 color: black;
}
a:hover{
 color: white;
 background: black;
}

**main.css代码(引入主页和跳转页)**

*{
 font-size: 16px;
 color:black;
 padding: 0;
 margin: 0;
 font-family: 微软雅黑;
}
/*.top{
 background: url("../images/close.png")760px center no-repeat;
}*/
.top img{
 float: right;
 margin-top: 13px;
 margin-right: 20px;
}
/*遮罩样式*/
#maskbox{
 position:absolute;
 left:0;
 top:0;
 height: 100%;
 width: 100%;
 background:rgba(0,0,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代码**

/*mid_right*/

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代码(引入主页)**

//获得选择的操作名
var check;
var checkmenu;
var choose = function(){
 $("#myMenu ul>li").bind('click',function(){
 check = $(this).text();

 page(check);

 });
};
choose();

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

 //出现遮罩
 $("#textbox").after("<div id='maskbox'></div>");
 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代码**

//统一样式改变
//右键列表隐藏
$("#myMenu").hide();

//出现遮罩
$("#textbox").after("<div id='maskbox'></div>");
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";
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 选择器部分整理
Oct 28 Javascript
使用jQuery模板来展现json数据的代码
Oct 22 Javascript
jQuery的初始化与对象构建之浅析
Apr 12 Javascript
实例讲解JS中数组Array的操作方法
May 09 Javascript
js上传图片及预览功能实例分析
Apr 24 Javascript
介绍JavaScript的一个微型模版
Jun 24 Javascript
JavaScript获取当前时间向前推三个月的方法示例
Feb 04 Javascript
vue实现百度搜索下拉提示功能实例
Jun 14 Javascript
vue轮播图插件vue-concise-slider的使用
Mar 13 Javascript
解决betterScroll在vue中存在图片时,出现拉不动的问题
Sep 27 Javascript
初学vue出现空格警告的原因及其解决方案
Oct 31 Javascript
vue-router结合vuex实现用户权限控制功能
Nov 14 Javascript
jQuery实现图片轮播效果代码
Sep 27 #Javascript
JS不完全国际化&amp;本地化手册 之 理论篇
Sep 27 #Javascript
Javascript json object 与string 相互转换的简单实现
Sep 27 #Javascript
js转html实体的方法
Sep 27 #Javascript
JSON与String互转的实现方法(Javascript)
Sep 27 #Javascript
通过JS获取Request.QueryString()参数的值实现方法
Sep 27 #Javascript
微信小程序使用第三方库Underscore.js步骤详解
Sep 27 #Javascript
You might like
点评山进PR-D3L三波段收音机
2021/03/02 无线电
一次编写,随处运行
2006/10/09 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
Yii框架使用PHPExcel导出Excel文件的方法分析【改进版】
2019/07/24 PHP
Iframe thickbox2.0使用的方法
2009/03/05 Javascript
jQuery筛选器children()案例详解(图文)
2013/02/17 Javascript
Angular2 (RC4) 路由与导航详解
2016/09/21 Javascript
Bootstrap实现导航栏的2种方式
2016/11/28 Javascript
JavaScript实现二叉树的先序、中序及后序遍历方法详解
2017/10/26 Javascript
Vue2.0实现组件数据的双向绑定问题
2018/03/06 Javascript
基于Vue实现拖拽功能
2020/07/29 Javascript
小程序的上传文件接口的注意要点解析
2019/09/17 Javascript
微信小程序中限制激励式视频广告位显示次数(实现思路)
2019/12/06 Javascript
React 实现车牌键盘的示例代码
2019/12/20 Javascript
用pywin32实现windows模拟鼠标及键盘动作
2014/04/22 Python
Python标准库之多进程(multiprocessing包)介绍
2014/11/25 Python
利用matplotlib+numpy绘制多种绘图的方法实例
2017/05/03 Python
windows下安装python的C扩展编译环境(解决Unable to find vcvarsall.bat)
2018/02/21 Python
python中reader的next用法
2018/07/24 Python
Python使用folium excel绘制point
2019/01/03 Python
python列表推导式入门学习解析
2019/12/02 Python
利用python读取YUV文件 转RGB 8bit/10bit通用
2019/12/09 Python
简单了解Java Netty Reactor三种线程模型
2020/04/26 Python
The North Face北面荷兰官网:美国著名户外品牌
2019/10/16 全球购物
销售员求职个人的自我评价
2014/02/19 职场文书
讲文明知礼仪演讲稿
2014/09/13 职场文书
大学生见习报告范文
2014/11/03 职场文书
2014年计划生育工作总结
2014/11/14 职场文书
考试作弊检讨书怎么写?
2014/12/21 职场文书
2015年保洁工作总结范文
2015/04/28 职场文书
实习证明模板
2015/06/16 职场文书
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
2021/04/03 Javascript
Go语言带缓冲的通道实现
2021/04/26 Golang
Java实现多文件上传功能
2021/06/30 Java/Android
Spring boot admin 服务监控利器详解
2022/08/05 Java/Android