JQuery implements right-click menu, mask, and other effects code, jquery mask

JQuery implements right-click menu, mask, and other effects code, jquery mask

Recently, I want to create a management system interface, which involves the right-click menu, because I have not done it before ~ Yes, but I personally do not like the right-click menu.

Operation: Right-click a menu in a fixed area and select any item to jump to the corresponding page. The first thought was to use catch .. case .. corresponding to different options, only the content in the pop-up layer is changed, but the content must be spliced using jQuery, so a relatively simple page Jump is selected.

The following shows only the code of the Sample Page.

First:

** Main index.html code **

<Div id = "myMenu"> <ul> <li> Manage An application </li> <li> Add an application </li> <li> maintain an application account </li> <li> Change Password </li> <li> example </li> </ul> </div> <div id = "mask"> </div> <div id = "textbox"> main interface </div>

** Main code of page_test.html **

<Div id = "textbox"> main interface </div> <div id = "maskbox"> <div id = 'admin' class = 'lele1'> <div class = 'top '> Manage applications  </div> <div class = 'mid '> <div class = 'mid _ left'> <div class = 'title'> application category: headquarters </div> <ul class = 'icon _ list'> <li>  <span> QQ </span> </li>  <span> QQ </span> </li>  <span> QQ </span> </li>  <span> QQ </span> </li>  <span> QQ </span> </li>  <span> QQ </span> </li>  <span> QQ </span> </li> </ul> </div> <div class = 'mid _ right'> <div class = 'title'> Add an application </div> <div class = "content"> <form action = ""> <table> <tr> <td> application institution: </td> <select class = "text1" name = ""> <option value = ""> </option> </select> </td> </ tr> <td> application type: </td> <select class = "text1" name = ""> <option value = ""> </option> </select> </td> </ tr> <td> Application name: </td> <input type = "text" class = "text2"> </td> </tr> <td> application code: </td> <input type = "text" class = "text2"> <span class = "point"> (letters, numbers, and combinations; unique) </span> </td> </tr> <td> access type: </td> <select class = "text1" name = ""> <option value = ""> </option> </select> </td> </ tr> <td> Timeout: </td> <select class = "text1" name = ""> <option value = ""> </option> </select> </td> </ tr> <td> select the icon: </td> <input type = "text" class = "text2"> <span> select </span> </td> </tr> <td> application address: </td> <input type = "text" class = "text2"> </td> </tr> <td colspan = "2"> <input type = "button" class = "del button" value = "delete"> <input type = "button" class = "reset button" value = "reset"> <input type = "button" class = "save button" value = "save"> </td> </tr> </table> </form> </div> </div> <div class = 'end'> </div>

** Reset.css code (introduced to the homepage )**

* {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: pixel PX; border: 2px solid ;} a {text-decoration: none; color: black;} a: hover {color: white; background: black ;}

** Main.css code (introducing the home page and jump page )**

* {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;}/* mask style */# maskbox {position: absolute; left: 0; top: 0; height: 100%; width: 100%; background: rgba (0.6, 0,);} # maskbox. module1 {width: 800px; height: 500px; border-radius: 15px; border: 1px solid # bfd137; 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 # bfdc4; text-indent: 20px;} # maskbox. mid {height: 418px; width: 800px; background-color: white; border: 1px solid # bfdc4;}# maskbox. end {height: 36px; width: 800px; background-color: # F1F7F2; border-radius: 0 0 15px 15px; border: 1px solid # bfdc4 ;}. mid_left ,. mid_right {display: inline-block; height: 418px ;}. mid_left {width: 270px; float: left; border-right: 1px solid # bfdc4 ;}. mid_right {width: 528px; border-right: 1px solid # bfdpushed ;}. title {position: relative; height: 40px; line-height: 40px; text-align: center; color: # DD9A6A; border-bottom: 1px solid # bfdc4 ;}. 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 # bfdc4; 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 code **

/*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 Code (introduced to the homepage )**

// Right-click the menu $ (window ). ready (function () {$ ('# myMenu '). hide (); $ ('# textbox '). bind ("contextmenu", function (e) {// display menu $ ('# myMenu '). show (500); // follow the cursor position ('{mymenu'}.css ({'top': e. pageY + 'px ', 'left': e. pageX + 'px '}); // shield the default right-click menu return false ;});});

** Main. js Code (introduced to the home page )**

// Obtain the selected operation name var check; var checkmenu; var choose = function () {$ ("# myMenu ul> li "). bind ('click', function () {check = $ (this ). text (); page (check) ;}; choose (); var page = function (check) {/* // unified style change // right-click the list to hide $ ("# myMenu "). hide (); // mask $ ("# textbox "). after ("<div id = 'maskbox'> </div>"); checkmenu = 1; expires wwidth = $ (window ). width (); returns wheight = $ (window ). height (); $ ("# maskbox" ).css ({'height': Running wheight, 'width': Running wwidth}); */switch (check) {case "": page_admin (); break; case "add application": page_add (); break; case "maintain application account": page_maintain (); break; case "Change Password ": page_modify (); break; case "example interface": page_test (); break ;}}; var page_admin = function () {console. log ("manage applications"); window. location. href = "page/page_admin.html" ;}; var page_add = function () {console. log ("add application"); window. location. href = "page/page_add.html" ;}; var page_maintain = function () {console. log ("maintain application account"); window. location. href = "page/page_maintain.html" ;}; var page_modify = function () {console. log ("Change Password"); window. location. href = "page/page_modify.html" ;}; var page_test = function () {console. log ("sample interface"); window. location. href = "page/page_test.html" ;}; // change the screen size by hour $ (window ). resize (function () {if (checkmenu = 1) {export wwidth = $ (window ). width (); returns wheight = $ (window ). height (); $ ("# maskbox" ).css ({'height': Running wheight, 'width': Running wwidth });}});

** Com. js Code **

// Unified style change // right-click the list to hide $ ("# myMenu "). hide (); // mask $ ("# textbox "). after ("<div id = 'maskbox'> </div>"); checkmenu = 1; expires wwidth = $ (window ). width (); returns wheight = $ (window ). height (); $ ("# maskbox" ).css ({'height': Running wheight, 'width': Drawing wwidth}); // close the pop-up window and return to the main interface $ (". img_close "). bind ("click", function () {window. location. href = ".. /index.html ";}); // click the button to return to the main interface $ (". save "). click (function () {window. location. href = ".. /index.html ";});

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.