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获取和设置Select选项的常用方法总结
Jul 04 Javascript
输入框过滤非数字的js代码
Sep 18 Javascript
浅谈bootstrap源码分析之tab(选项卡)
Jun 06 Javascript
详谈JS中实现种子随机数及作用
Jul 19 Javascript
AngularJs上传前预览图片的实例代码
Jan 20 Javascript
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
JS沙箱模式实例分析
Sep 04 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
Oct 29 Javascript
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 jQuery
Vue移动端右滑屏幕返回上一页附源码下载
Jun 26 Javascript
Node.js API详解之 util模块用法实例分析
May 09 Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
Jun 24 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
PHP的FTP学习(三)
2006/10/09 PHP
开发大型 PHP 项目的方法
2007/01/02 PHP
PHP获取数组最后一个值的2种方法
2015/01/21 PHP
JQuery的html(data)方法与&amp;lt;script&amp;gt;脚本块的解决方法
2010/03/09 Javascript
JS面向对象编程浅析
2011/08/28 Javascript
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
2013/01/24 Javascript
js实现在页面上弹出蒙板技巧简单实用
2013/04/16 Javascript
js实现YouKu的漂亮搜索框效果
2015/08/19 Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
2016/09/17 Javascript
JavaScript实现移动端轮播效果
2017/06/06 Javascript
JS二分查找算法详解
2017/11/01 Javascript
详解如何使用PM2将Node.js的集群变得更加容易
2017/11/15 Javascript
Async/Await替代Promise的6个理由
2019/06/15 Javascript
layer 刷新某个页面的实现方法
2019/09/05 Javascript
基于Vue CSR的微前端实现方案实践
2020/05/27 Javascript
vuex中store存储store.commit和store.dispatch的用法
2020/07/24 Javascript
[01:01:23]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第一场 11.26
2020/11/30 DOTA
让python json encode datetime类型
2010/12/28 Python
详解Python发送邮件实例
2016/01/10 Python
Python中在for循环中嵌套使用if和else语句的技巧
2016/06/20 Python
详解Python多线程Selenium跨浏览器测试
2017/04/01 Python
python读取TXT每行,并存到LIST中的方法
2018/10/26 Python
Centos部署django服务nginx+uwsgi的方法
2019/01/02 Python
Python远程视频监控程序的实例代码
2019/05/05 Python
详解Python传入参数的几种方法
2019/05/16 Python
提升Python效率之使用循环机制代替递归函数
2019/07/23 Python
使用Python获取爱奇艺电视剧弹幕数据的示例代码
2021/01/12 Python
阿提哈德航空官方网站:Etihad Airways
2017/01/06 全球购物
优衣库澳大利亚官网:UNIQLO澳大利亚
2017/01/18 全球购物
美国最大的万圣节服装网站:HalloweenCostumes.com
2017/10/12 全球购物
区三好学生主要事迹
2014/01/30 职场文书
经济信息系毕业生自荐信范文
2014/03/15 职场文书
重阳节活动主持词
2015/07/04 职场文书
朋友聚会祝酒词
2015/08/10 职场文书
2016优秀毕业生个人事迹材料
2016/02/29 职场文书
Apache Hudi数据布局黑科技降低一半查询时间
2022/03/31 Servers