Note: jquery needs to be introduced.
If the upload function is full, import jquery-uiand jquery-ui.css.
:
JS Code:
$ (Function () {// menu list var menu_list = $ (". menu-List "); // workspace var working = $ (". working "); working. click (function () {menu_list.hide (); $ (". content-menu "). hide ("slow") ;}); // click the menu icon $ (". menu "). BIND ("click", function () {menu_list.show () ;}); Arrange (); $ (window ). resize (function () {arrange () ;}); // shield the right-click menu $ (document ). contextmenu (function () {return false ;}); // right-click the workspace and choose $ (". working "). contextmenu (function (event) {var x = Event. clientx; var y = event. clienty; var menu = $ (". content-menu "); // determines the coordinate var width = document. body. clientwidth; var Height = document. body. clientheight; X = (x + menu. width ()> = width? Width-menu.width (): X; y = (Y + menu. Height ()> = height-40? Height-menu.height (): Y; // alert ("visible height:" + height + ", mouse Height:" +yunc;;menu.css ("TOP", yunc;;menu.css ("Left", x); menu. show () ;}); // content-menu $ (". content-menu ul li "). click (function () {var text = $ (this ). text (); Switch (text) {Case "refresh": document. location. reload (); break; Case "log out": If (confirm ("do you want to log out? ") {} Break; default: break;} $ (". content-menu "). hide () ;}); // function arrange () {var ul =$ (". icons "); var working =$ (". working "); // Location Coordinate var position = {X: 0, Y: 0, bottom: 110, width: 50, height: 50, parent: {Height: 0, width: 0}, padding: {top: 10, left: 10, right: 0, bottom: 10 }}; position. parent. height = working. height ()-40; position. parent. width = working. width (); ul. find ("Li "). each (function (INDEX) has been (this%.css ("TOP", position. Y + "PX" has been written (this%.css ("Left", position. X + "PX"); position. height = $ (this ). height (); position. width = $ (this ). width (); position. y = position. Y + position. height + position. padding. bottom + position. padding. bottom; If (position. y> = position. parent. height-position.bottom) {position. y = 0; position. X = position. X + position. width + position. padding. left ;}});}
HTML code:
<! Doctype HTML public "-// IETF // DTD level1/EN"> <HTML>
CSS code:
@ Charset "UTF-8"; body, HTML {overflow: hidden; Height: 100%; width: 100%; margin: 0px; padding: 0px ;}. working {Height: 100%; width: 100%; Background-image: URL (".. /images/untitled.png "); background-repeat: No-Repeat; Background-color: RGB (235,236,238); padding: 20px ;}. working ul {Height: 100%; position: relative ;}. working ul Li {position: absolute; display: block; width: 90px; Height: 90px; text-align: center; margin: 0px 10px 10px; float: Left; Border: inherit 1px inherit; overflow: hidden; cursor: pointer ;}. taskbar {position: absolute; Height: 35px; line-Height: 35px; width: 100%; bottom: 0px; Background-color: # CCC; Z-index: 999; filter: alpha (opacity = 80); opacity: 0.8; padding: 0px 10px ;}. menu {display: block; width: 50px; Height: 30px; float: Left ;}. menu-list {position: absolute; left: 0px; bottom: 35px; width: 350px; Height: 500px; Border: # CCC 1px solid; Background-color: White; filter: alpha (opacity = 90); opacity: 0.9; border-radius: 5px; display: none;} ul {margin: 0px; padding: 0px ;}. menu-Icon {cursor: pointer ;}. menu-Icon ul Li {display: block; width: 15px; Height: 15px; float: Left; margin: 1px; Background-color: White; border-radius: 3px ;}. menu-icon: hover Li {background-color: red ;}. icons Li IMG {max-Height: 70px; max-width: 90px ;}. text {position: static; Height: 20px; line-Height: 20px; width: 100%; margin: 0px; font-size: 12px; font-family:; color: white ;}. icons-move {border: RGB (161,194,219) 1px solid; Background-color: RGB (194,208,226); filter: alpha (opacity = 60); opacity: 0.6; border-radius: 3px ;}. icons-focus {border: RGB (161,194,219) 1px solid; Background-color: RGB (194,208,226); filter: alpha (opacity = 100); opacity: 1; border-radius: 3px ;}. window {Height: 200px; width: 200px; Border: # CCC 1px solid; Background-color: White; border-radius: 5px; position: absolute; top: 0px; z-index: 10;}/** right-click menu */. content-menu {position: absolute; width: 150px; Height: auto; Background-color: RGB (255,255,255); Border: # CCC 1px solid; display: none; border-radius: 5px; Z-index: 999 ;}. content-menu ul {margin: 0px; padding: 0px ;}. content-menu ul Li {list-style: none; line-Height: 30px; Height: 30px; margin: 3px 0px; padding: 0px; font-size: 13px ;}. content-menu ul Li a {text-Decoration: none; display: block; font-family:; padding: 0px 5px; width: 140px; Height: 100%; color: #333; outline: none ;}. content-menu ul Li A: hover {background-color: # DDD ;}. content-menu ul HR {margin: 1px 0px; Height: 0px; Border: 0px; border-bottom: # CCC 1px solid ;}