这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
注:需要引入 Jquery 如果需要全部功能,请引入 jquery-ui 和 jquery-ui.css 截图:
需要引入 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;
- }
来源: http://www.phperz.com/article/17/0626/280034.html