<!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>
