註：需要引入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;}Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
