欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery實現(xiàn)右鍵菜單、遮罩等效果代碼

 更新時間：2016年09月27日 14:34:34   作者：你腦子有bug  
這篇文章主要介紹了jQuery實現(xiàn)右鍵菜單、遮罩、彈出層效果，適應管理系統(tǒng)界面,具有一定的參考價值，感興趣的小伙伴們可以參考一下

最近要做個某管理系統(tǒng)的界面，然后涉及到右鍵菜單，因為之前沒有做過所以就做了一下~感覺還可以，不過我個人不是很喜歡右鍵菜單的這種形式。

操作：在固定區(qū)域內(nèi)點擊鼠標右鍵出現(xiàn)菜單，然后選擇任意一項后進行對應頁面的跳轉。剛開始的想法是用catch..case..的方法，對應不同的選項，只改變彈出層里的內(nèi)容，但是內(nèi)容都要用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">(字母、數(shù)字及組合；唯一)</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){
/*
 //統(tǒng)一樣式改變
 //右鍵列表隱藏
 $("#myMenu").hide();

 //出現(xiàn)遮罩
 $("#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代碼**

//統(tǒng)一樣式改變
//右鍵列表隱藏
$("#myMenu").hide();

//出現(xiàn)遮罩
$("#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";
});

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關文章

最新評論