注:需要引入Jquery
如果需要全部功能,请引入jquery-ui和jquery-ui.css
截图:
js代码:
$(function() { //菜单列表 var menu_list=$(".menu-list"); //工作区 var working=$(".working"); working.click(function() { menu_list.hide(); $(".content-menu").hide("slow"); }); //菜单图标单击 $(".menu").bind("click",function() { menu_list.show(); }); arrange(); $(window).resize(function() { arrange(); }); //屏蔽右键菜单 $(document).contextmenu(function() { return false; }); //点击工作区的时候 显示右键菜单 $(".working").contextmenu(function(event) { var x=event.clientX; var y=event.clientY; var menu=$(".content-menu"); //判断坐标 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("可视高度:"+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 "刷新": document.location.reload(); break; case "退出登录": if(confirm("是否要退出登录?")){ } break; default: break; } $(".content-menu").hide(); }); }); //排列图标部分 function arrange(){ var ul=$(".icons"); var working=$(".working"); //位置坐标 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代码:
<!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 += '<img src="images/'+i+'.gif">'; html += '<div class="text">图标'+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="窗体">窗体</div> <div class="content-menu"> <ul> <li><a href="javascript:;">刷新</a></li> <li><a href="javascript:;">设置</a></li> <hr/> <li><a href="javascript:;">帮助</a></li> <hr/> <li><a href="javascript:;">关于</a></li> <hr/> <li><a href="javascript:;">系统设置</a></li> <li><a href="javascript:;">退出登录</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"); //改变当前的索引 $(".icons li").css("z-index",0); $(this).css("z-index",1); }); $(".icons li").dblclick(function(){ alert("double click"); }); //按键事件 $(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"); } //回车打开选中的图标 if(event.keyCode==ENTER){ var open=$(".icons-focus"); alert("ok enevt is enter"); } }); //图标拖拽 $(".icons li").draggable(); //注册resize事件 $(".window").draggable({containment: 'parent'}); $(".window").resizable({containment: 'parent'}); </script> </body> </html>
CSS代码:
@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; } /* * 右键菜单 */ .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; }