Note: Jquery needs to be introduced.
If the upload function is full, import jquery-uiand jquery-ui.css.
:
Js Code:
Copy codeThe Code is as follows: $ (function (){
// Menu list
Var menu_list = $ (". menu-list ");
// Work zone
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 to display the menu
$ (". Working"). contextmenu (function (event ){
Var x = event. clientX;
Var y = event. clientY;
Var menu = $ (". content-menu ");
// Determine coordinates
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:" + y );
Menu.css ("top", y );
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 ();
});
});
// Arrange the icon Section
Function arrange (){
Var ul = $ (". icons ");
Var working = $ (". working ");
// Coordinates
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 ){
((This).css ("top", position. y + "px ");
((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. The height-position.bottom ){
Position. y = 0;
Position. x = position. x + position. width + position. padding. left;
}
});
}
Html code:Copy codeThe Code is as follows: <! Doctype html public "-// IETF // DTD LEVEL1 // EN">
<Html>
<Head>
<Title> index.html </title>
<Meta http-equiv = "keywords" content = "keyword1, keyword2, keyword3">
<Meta http-equiv = "description" content = "this is my page">
<Meta http-equiv = "content-type" content = "text/html; charset = GBK">
<Link rel = "stylesheet" type = "text/css" href = "css/window.css">
<Link rel = "stylesheet" type = "text/css" href = "css/jquery-ui.css">
<Script language = "JavaScript" src = "js/jquery-1.10.0.js"> </script>
<Script language = "JavaScript" src = "js/jquery-ui.js"> </script>
<Script language = "JavaScript" src = "js/window. js"> </script>
</Head>
<Body>
<Div class = "working">
<Ul class = "icons">
<Script>
For (var I = 1; I <= 4; I ++ ){
Var html = "";
Html + = '<li> ';
Html + = ' ';
Html + = '<div class = "text"> icon' + I + '</div> ';
Html + = '</li> ';
Document. write (html );
}
</Script>
</Ul>
</Div>
<Div class = "taskbar">
<Div class = "menu-list">
<Ul>
<Li> </li>
</Ul>
</Div>
<Div class = "menu">
<Div class = "menu-icon">
<Ul> <li> </ul>
</Div>
<A href = "javascript:;"> </a>
</Div>
</Div>
<Div class = "window" title = "form"> form </div>
<Div class = "content-menu">
<Ul>
<Li> <a href = "javascript:;"> refresh </a> </li>
<Li> <a href = "javascript:;"> Settings </a> </li>
<Hr/>
<Li> <a href = "javascript:;"> help </a> </li>
<Hr/>
<Li> <a href = "javascript:;"> about </a> </li>
<Hr/>
<Li> <a href = "javascript:;"> system Settings </a> </li>
<Li> <a href = "javascript:;"> log out </a> </li>
</Ul>
</Div>
<Script>
$ (". Icons li"). mousemove (function (){
$ (This). addClass ("icons-move ");
});
$ (". Icons li"). mouseout (function (){
$ (This). removeClass ("icons-move ");
});
$ (". Icons li"). mousedown (function (){
$ (". Icons li"). removeClass ("icons-focus ");
$ (This). addClass ("icons-focus ");
// Change the current index
$ (". Icons li" ).css ("z-index", 0 );
((This).css ("z-index", 1 );
});
$ (". Icons li"). dblclick (function (){
Alert ("double click ");
});
// Key event
$ (Document). keyup (function (event ){
Var UP = 38;
Var DOWM = 40;
Var ENTER = 13;
Var elem = $ (". icons-focus ");
If(elem.html () = "undefined") return;
If (event. keyCode = UP ){
$ (". Icons li"). removeClass ("icons-focus ");
Elem. prev (). addClass ("icons-focus ");
}
If (event. keyCode = DOWM ){
$ (". Icons li"). removeClass ("icons-focus ");
Elem. next (). addClass ("icons-focus ");
}
// Press enter to open the selected icon
If (event. keyCode = ENTER ){
Var open = $ (". icons-focus ");
Alert ("OK enevt is enter ");
}
});
// Drag the icon
$ (". Icons li"). draggable ();
// Register the resize event
$ (". Window"). draggable ({containment: 'parent '});
$ (". Window"). resizable ({containment: 'parent '});
</Script>
</Body>
</Html>
CSS code:Copy codeThe Code is as follows: @ 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 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 the 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 {
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;
}