Note: jquery needs to be introduced
If all features are required, please introduce Jquery-ui and JQUERY-UI.CSS
Screenshots:
JS Code:
Copy Code code as follows:
$ (function () {
Menu List
var menu_list=$ (". Menu-list");
Work area
var working=$ (". Working");
Working.click (function () {
Menu_list.hide ();
$ (". Content-menu"). Hide ("slow");
});
Menu Icon Click
$ (". Menu"). Bind ("click", Function () {
Menu_list.show ();
});
Arrange ();
$ (window). Resize (function () {
Arrange ();
});
Screen right button menu
$ (document). ContextMenu (function () {
return false;
});
Click on the workspace to display the right button menu
$ (". Working"). ContextMenu (function (event) {
var X=event.clientx;
var Y=event.clienty;
var menu=$ (". Content-menu");
Judging 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 ("Visual 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 "Exit Login":
if (confirm) ("Do you want to exit login?") ")){
}
Break
Default
Break
}
$ (". Content-menu"). Hide ();
});
});
Arrange Icons Section
function Arrange () {
var ul=$ (". Icons");
var working=$ (". Working");
Position 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.height-position.bottom) {
position.y=0;
Position.x=position.x+position.width+position.padding.left;
}
});
}
HTML code:
Copy Code code as follows:
<! DOCTYPE HTML Public "-//ietf//dtd level1//en" >
<title>index.html</title>
<meta http-equiv= "keywords" content= "keyword1,keyword2,keyword3" >
<meta http-equiv= "description" content= "This are 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>
<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></li><li></li><li></li><li></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>
<li><a href= "javascript:;" > Help </a></li>
<li><a href= "javascript:;" > About </a></li>
<li><a href= "javascript:;" > System Settings </a></li>
<li><a href= "javascript:;" > Exit Login </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 events
$ (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");
}
Enter to open the selected icon
if (event.keycode==enter) {
var open=$ (". Icons-focus");
Alert ("OK enevt is enter");
}
});
Icon Drag
$ (". Icons Li"). Draggable ();
Registering Resize Events
$ (". Window"). Draggable ({containment: ' parent '});
$ (". Window"). Resizable ({containment: ' parent '});
</script>
</body>
CSS code:
Copy Code code 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: Microsoft Ya-hei;
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: Microsoft Ya-hei;
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;
}
