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 相关文章推荐
js中的window.open返回object的错误的解决方法
Aug 15 Javascript
js仿百度有啊通栏展示效果实现代码
May 28 Javascript
BootStrap文件上传样式超好看【持续更新】
May 10 Javascript
简单总结JavaScript中的String字符串类型
May 26 Javascript
深入解析JavaScript中的arguments对象
Jun 12 Javascript
jQuery插件实现可输入和自动匹配的下拉框
Oct 24 Javascript
Bootstrap table的使用方法
Nov 02 Javascript
AngularJs ng-change事件/指令的用法小结
Nov 01 Javascript
基于ES6作用域和解构赋值详解
Nov 03 Javascript
Angularjs中的$apply及优化使用详解
Jul 02 Javascript
vue实现移动端悬浮窗效果
Dec 01 Javascript
微信小程序实现带参数的分享功能(两种方法)
May 17 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
常用星际术语索引(新手指南)
2020/03/04 星际争霸
php动态生成版权所有信息的方法
2015/03/24 PHP
PHP测试成功的邮件发送案例
2015/10/26 PHP
php getcwd与dirname(__FILE__)区别详解
2016/09/24 PHP
JQuery 入门实例1
2009/06/25 Javascript
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
2011/04/27 Javascript
jquery拖动插件(jquery.drag)使用介绍
2013/06/18 Javascript
js判断横竖屏及禁止浏览器滑动条示例
2014/04/29 Javascript
AngularJS  $on、$emit和$broadcast的使用
2016/09/05 Javascript
BootStrap组件之进度条的基本用法
2017/01/19 Javascript
JavaScript实现简单精致的图片左右无缝滚动效果
2017/03/16 Javascript
Bootstrap DateTime Picker日历控件简单应用
2017/03/25 Javascript
使用Node.js实现RESTful API的示例
2017/08/01 Javascript
关于express与koa的使用对比详解
2018/01/25 Javascript
Vue.js点击切换按钮改变内容的实例讲解
2018/08/22 Javascript
Python对小数进行除法运算的正确方法示例
2014/08/25 Python
Python实现屏幕截图的代码及函数详解
2016/10/01 Python
使用python和pygame绘制繁花曲线的方法
2018/02/24 Python
pandas DataFrame实现几列数据合并成为新的一列方法
2018/06/08 Python
Python实现在某个数组中查找一个值的算法示例
2018/06/27 Python
postman模拟访问具有Session的post请求方法
2019/07/15 Python
使用 Python 快速实现 HTTP 和 FTP 服务器的方法
2019/07/22 Python
python的pyecharts绘制各种图表详细(附代码)
2019/11/11 Python
浅析Python迭代器的高级用法
2020/07/16 Python
Html5实现首页动态视频背景的示例代码
2019/09/25 HTML / CSS
解决方案设计综合面试题
2015/08/31 面试题
党员学习十八大感想
2014/01/17 职场文书
农林环境专业求职信
2014/03/13 职场文书
安全保证书范文
2014/04/29 职场文书
模具设计与制造专业自荐书
2014/07/01 职场文书
2014年药房工作总结
2014/11/22 职场文书
新郎父亲婚礼致辞
2015/07/27 职场文书
PHP实现rar解压读取扩展包小结
2021/06/03 PHP
TV动画「神渣☆爱豆」公开第一弹主视觉图
2022/03/21 日漫
Mybatis-Plus 使用 @TableField 自动填充日期
2022/04/26 Java/Android
GoFrame框架数据校验之校验结果Error接口对象
2022/06/21 Golang