最近要做个某管理系统的界面,然后涉及到右键菜单,因为之前没有做过所以就做了一下~感觉还可以,不过我个人不是很喜欢右键菜单的这种形式。
操作:在固定区域内点击鼠标右键出现菜单,然后选择任意一项后进行对应页面的跳转。刚开始的想法是用捕捉.情况.的方法,对应不同的选项,只改变弹出层里的内容,但是内容都要用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=' mask box ' div id=' admin ' class=' module 1 ' div class=' top '管理应用img类='img_close' src='http:/images/关闭。png ' alt=' '/div class=' mid ' div class=' mid _ left ' div class=' title '应用分类:总部/div ul class=' icon _ list ' liimg src='./images/45x 45/QQ。jpg ' alt=' SPan Qq/SPan/Li Li img src='./images/45x 45/QQ。jpg ' alt=' SPan Qq/SPan/Li Li img src='./images/45x 45/QQ。jpg ' alt=' SPan Qq/SPan/Li Li img src='./images/45x 45/QQ。jpg ' alt=' SPan Qq/SPan/Li Li img src='./images/45x 45/QQ。jpg ' alt=' SPan Qq/SPan/Li Li img src='./images/45x 45/QQ。jpg ' alt=' SPan Qq/SPan/Li Li img src='./images/45x 45/QQ。jpg ' alt=' SPanQQ/SPan/Li/ul/div div class=' mid _ right ' div class=' title '添加应用/div class=' content ' form action=' table tr TD应用机构:/TD TD选择类=' text 1 '名称=' option value=' '/option/select/TD/tr TD应用类型:/TD TD选择类=' text 1 '名称=' option value=' '/option/select/TD/tr TD应用名称:/td td输入类型=' text ' class=' text 2 '/TD/tr TD应用代码:/td td输入类型=' text ' class=' text 2 ' span class=' point '(字母、数字及组合;唯一)/span /td /tr tr td接入类型:/TD TD选择类=' text 1 '名称=' option value=' '/option/select/TD/tr TD超时时间:/TD TD选择类=' text 1 '名称=' option value=' '/option/select/TD/tr TD选择图标:/td td输入类型='text' class='text2' span选择/span /td /tr应用地址:/td td输入类型=' text ' class=' text 2 '/TD/tr TD colspan=' 2 '输入类型=' button ' class=' del button ' value='删除输入类型=' button ' class=' reset button ' value='重置输入类型='按钮'类='保存按钮'值='保存/TD/tr/table/form/div/div/class=' end '/div/div/div * *重置。半铸钢钢性铸铁(Cast Semi-Steel)代码(引入主页)**
* { padd : 0;保证金: 0;字体系列: '微软雅黑} # mask { position : absolute eleft : 0;top : 0;z指数: 9000;显示器:块;} # MyMenu {位置:绝对值;显示器:无;z指数: 9999;背景:白色;border: 1px固体;宽度: 130像素;高度: 130像素;} ul Li {列表式:无;高度: 25px线高:25 pxfont-size : 14px光标:指针;左边距left : 5pxborder-bottom : 1 px纯黑;} ul Li : th-child(5){ border-bottom :无;} # textbox {背景:橙色;宽度: 380 pxborder: 2px固体;} a { text-decoration : none颜色:黑色;} a:hover { color: white背景:黑色;}**main.css代码(引入主页和跳转页)**
* { font-size : 16px颜色:黑色;padd : 0;保证金: 0;字体系列:微软雅黑;}/*.top{ background: url('./images/close.png')760px中心无重复;}*/.顶部img{ float:右侧;保证金-top : 13px;右边距: 20px}/*遮罩样式*/#屏蔽框{位置:绝对值;左侧left:0top:0高度: 100%;宽度: 100%;background:rgba(0,0,0,0.6);} #遮罩框。模块1 {宽度: 800 px高度: 500像素;边框半径: 15pxborder: 1px固体# BFDCE3margin: 0自动边距-top : 40px;}#maskbox .顶部{边框半径: 15px 15px 0 0高度: 46px线高: 46px宽度: 800像素;背景-颜色: # F1F 7 F 2;border: 1px固体# BFDCE3Text-缩进: 20px}#maskbox .中间{高: 418像素宽度: 800像素;背景-颜色:白色;border: 1px固体# BFDCE3}#maskbox .end { height: 36px宽度: 800像素;背景-颜色: # F1F 7 F 2;边框半径: 0 0 15px 15pxborder: 1px固体# BFDCE3}。中间偏左右中{显示: in-block;高度: 418像素;}.左中部{宽度: 270像素向左浮动:右边框: 1px实心# BFDCE3}。中间_右侧{宽度: 528 pxborder-右侧: 1px实心# BFDCE3}。标题{位置:相对;高度: 40px线高: 40px文本对齐:中心;color: # DD9A6A边框-bottom: 1px实心# BFDCE3}。右中title { text-align : left文本-缩进: 20px} ul。icon _ list { height : 377 px宽度: 270像素;飞越:汽车;} ul。icon _ list Li {边框-底部: 1px实心# BFDCE 3;高度: 72pxlist-style:无;线高: 72px左填充left : 20px } ul . icon _ list Li img {竖排:中间;右边距: 20px} .文本1 {宽度: 195 px高度: 28px} .文本2 {宽度: 192 px高度: 28px}.按钮{ width: 80px高度: 28px边界半径: 5px背景-颜色:白色;border:1px实心# a8a 8;font-size : 13px}.点{ font-size : 14pxcolor:red}**test.css代码**
/* mid _ right */table { margin-left : 15px;}表tr td { height: 35px}表tr TD : th-child(1){身高: 35px宽度: 100像素;}表tr TD : th-child(2){身高: 35px宽度: 390像素;}表tr : th-child(9)TD {身高: 100 pxpadding: 0 50px }表tr : th-child(9).按钮{右边距: 60px}表tr : th-child(9)。按钮: th-child(3){ margin-right : 0;}表格跨度{ font-size : 14px颜色:深天蓝色;}表格跨度。点{ font-size : 14pxcolor:red}**func.js代码(引入主页)**
//鼠标右击菜单$(窗口)。ready(function() { $('#myMenu ')).hide();$(“# textbox”).绑定(“contextmenu”,函数(e){ //显示菜单$('#myMenu ').演出(500场);//跟随鼠标位置$('#myMenu ').css({ 'top':e.pageY 'px ',' left ' : e . Pagex ' px ' });//屏蔽默认右键菜单返回false });});**main.js代码(引入主页)**
//获得选择的操作名风险值检查;var checkmenuvar choose=function(){ $(' # my menu ulli ')).bind('click '),function(){ check=$(this).text();页面(检查);});};选择();var page=function(check){/* //统一样式改变//右键列表隐藏$('#myMenu ').hide();//出现遮罩$(“# textbox”).在(' div id='maskbox'/div ')之后;检查菜单=1;windowwidth=$(窗口)。宽度();windowheight=$(窗口)。高度();$('#maskbox ').css({ 'height': windowheight,' width ' : window width });*/switch (check){ case '管理应用: page _ admin();打破;案例添加应用: page _ add();打破;案例维护应用账号: page _ maintenance();打破;案例修改密码: page _ modify();打破;案例示例界面: page _ test();打破;}};var page _ admin=function(){ console。日志('管理应用');窗户。位置。href=' page/page _ admin。html ';};var page _ add=function(){ console。日志('添加应用');窗户。位置。href=' page/page _ add。html ';};var page _ maintenance=function(){ console。日志('维护应用账号');窗户。位置。href=' page/page _ maintenance。html ';};var page _ modify=function(){ console。日志('修改密码');窗户。位置。href=' page/page _ modify。html ';};var page _ test=function(){ console。日志('示例界面');窗户。位置。href=' page/page _ test。html ';};//改变屏幕大小时$(窗口)。resize(function(){ if(check menu==1){ window width=$(window))。宽度();windowheight=$(窗口)。高度();$('#maskbox ').css({ 'height': windowheight,' width ' : window width });}});**com.js代码**
//统一样式改变//右键列表隐藏$('#myMenu ').hide();//出现遮罩$(“# textbox”).在(' div id='maskbox'/div ')之后;检查菜单=1;windowwidth=$(窗口)。宽度();windowheight=$(窗口)。高度();$('#maskbox ').css({ 'height': windowheight,' width ' : window width });//关闭弹窗回到主界面$('.img _ close’).bind('click ',function(){ window。位置。href='./index。html ';});//点击按钮后也回到主界面$('.保存")。单击(function(){ window。位置。href='./index。html ';});以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。