程序博客网 > 软件服务质量保证措施

Creating an OS Web Interface in jQuery (Part I)

来源：互联网 发布：软件服务质量保证措施 编辑：程序博客网 时间：2024/05/16 15:43

Finally here you have the First Part of this series of tutorials to recreate an OS Web Interface with our lovely jQuery javascript library.

As you could see in the preview of this tutorial we will focus to create the drag & drop interaction, thedouble click on icons and a basic taskbar with a start disabled button and a real clock of the system.

As always, here you have a preview of the final result:

It will be very interesting how we can achieve all our goals without using thir party plugins etc.

You can try the living example before continue reading the tutorial.

Tested in: Firefox, Internet Explorer 6 (bad display of PNG icons, IE bug) & 7, Opera, Safari & Chrome.

So let’s go guys!

 

What we want to do

As we said, we will try to recreate recreate an OS Web Interface using jQuery but we won’t use jQuery UI, draggable.js, droppable.js, etc… just will create all this plugins by ourselves to save resources and don’t them on plugins and libraries that do the job for us.

So we only need:

  • xHTML
  • CSS
  • jQuery
  • Pay attention :D

Let’s begin the first step!

Step 1: Thinking & designing our OS Web Interface

Before jump into the xHTML layout, I want to show you a little schema of our web system, nothing special and very similar to a Windows Interface. Let’s take a look:

We will use a background from other spanish project called eyeOS because I suck at background design hehe :P. So continue reading guys…

Step 2: The Layout

First of all we will create the xHTML layout (as always!) and then add the CSS part. Here you have the code for our index.html file:

view plaincopy to clipboardprint?
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">  
  3. <head>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
  5.     <title>yensdesign.com - yensdesign OS</title>  
  6.     <link rel="stylesheet" href="css/general.css" type="text/css" media="screen" />  
  7.     <!--[if IE 7]>  
  8.         <link rel="stylesheet" href="css/ie7.css" type="text/css" media="screen," />  
  9.     <![endif]–>  
  10.     <!–[if IE 6]>  
  11.         <link rel="stylesheet" href="css/ie6.css" type="text/css" media="screen," />  
  12.     <![endif]–>  
  13. </head>  
  14. <body>  
  15.     <div id="main">  
  16.         <div id="mipc" class="icon">  
  17.             <div class="name">Mi PC</div>  
  18.         </div>  
  19.         <div id="home" class="icon">  
  20.             <div class="name">Home</div>  
  21.         </div>  
  22.         <div id="usb" class="icon">  
  23.             <div class="name">USB</div>  
  24.         </div>  
  25.         <div id="trash" class="icon">  
  26.             <div class="name">Trash</div>  
  27.         </div>  
  28.         <div id="taskbar">  
  29.             <div id="start">Start</div>  
  30.             <div id="clock">00:00:00</div>  
  31.         </div>  
  32.     </div>  
  33.     <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>  
  34.     <script type="text/javascript" src="js/core.js"></script>  
  35. </body>  
  36. </html>  

Nothing special, we have a main division called main that contain all the interface it will have 100% in width & height at CSS.

As you can see we have 2 conditional comments for IE 6 & 7 but in this first part we won’t need it. I don’t know if some of you noticed but it’s interesting put the scripts at the end of the html code, before closing the body element.

It’s recommended to put scripts at the end, before closing the body element. Scripts block all parallel downloads and the HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname. Our images and other files will suffer this block if you do that :(

Remember guys that using better practices makes better our websites ;)

Step 3: Adding style to our awesome OS Web!

This will be fast, here you have the code:

view plaincopy to clipboardprint?
  1. @CHARSET "UTF-8";  
  2. /******* GENERAL RESET *******/  
  3. html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,  
  4. font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,  
  5.  tfoot, thead, tr, th, td {  
  6. border:0pt none;  
  7. font-family:inherit;  
  8. font-size: 100%;  
  9. font-style:inherit;  
  10. font-weight:inherit;  
  11. margin:0pt;  
  12. padding:0pt;  
  13. vertical-align:baseline;  
  14. }  
  15. body{  
  16.     background: #fff;  
  17.     line-height:14px;  
  18.     font-size: 11px;  
  19.     font-family: Tahoma, Arial,  Verdana, Helvetica, sans-serif;  
  20.     margin:0pt;  
  21.     overflow: hidden;  
  22.     cursor: default !Important;  
  23. }  
  24. html,body{  
  25.     height:100%;  
  26. }  
  27. .clear{  
  28.     clear: both;  
  29.     height: 0;  
  30.     visibility: hidden;  
  31.     display: block;  
  32. }  
  33. a{  
  34.     text-decoration: none;  
  35. }  
  36. /******* GENERAL RESET *******/  
  37. /******* MAIN *******/  
  38. #main{  
  39.     height: 100%;  
  40.     background: transparent url(images/background.jpg) no-repeat scroll center center;  
  41.     overflow: none;  
  42. }  
  43. /******* /MAIN  *******/  
  44. /******* ICONS *******/  
  45. #main div.icon{  
  46.     min-width: 48px;  
  47.     min-height: 48px;  
  48.     padding: 0px 14px 8px;  
  49.     border: 1px solid transparent;  
  50.     margin: 0pt auto;  
  51.     text-align: left;  
  52.     position: absolute;  
  53.     display: none;  
  54. }  
  55. #main div.icon:hover{  
  56.     background-color: #0a2c5e !Important;  
  57.     border: 1px solid #3b567e;  
  58. }  
  59. #main div.icon.active{  
  60.     background-color: #0a2c5e !Important;  
  61.     border: 1px solid #3b567e;  
  62. }  
  63. #main div.icon div.name{  
  64.     margin-top: 52px;  
  65.     text-align: center;  
  66.     color: #fff;  
  67. }  
  68. #main #mipc{  
  69.     background: transparent url(images/mipc.png) no-repeat scroll center 4px;  
  70.     top: 32px;  
  71.     left: 32px;  
  72. }  
  73. #main #home{  
  74.     background: transparent url(images/home.png) no-repeat scroll center 4px;  
  75.     top: 128px;  
  76.     left: 32px;  
  77. }  
  78. #main #usb{  
  79.     background: transparent url(images/usb.png) no-repeat scroll center 4px;  
  80.     top: 224px;  
  81.     left: 32px;  
  82. }  
  83. #main #trash{  
  84.     background: transparent url(images/trash.png) no-repeat scroll center 4px;  
  85. }  
  86. /******* /ICONS  *******/  
  87.   
  88. /******* TASKBAR  *******/  
  89. #main #taskbar{  
  90.     width: 100%;  
  91.     height: 42px;  
  92.     line-height: 42px;  
  93.     background: #e6e6e6 url(images/taskbar.jpg) repeat-x left top;  
  94.     position: absolute;  
  95.     left: 0;  
  96.     bottom: 0px;  
  97.     padding: 4px 0px 1px 0px;  
  98.     display: none;  
  99. }  
  100. #main #taskbar #start{  
  101.     float: left;  
  102.     background: transparent url(images/start.png) no-repeat 4px -3px;  
  103.     width: 64px;  
  104.     margin: 0 4px 0 0;  
  105.     padding: 0 2px 0 42px;  
  106.     font-size: 18px;  
  107.     font-style: italic;  
  108.     font-weight: 700;  
  109.     text-align: center;  
  110. }  
  111. #main #taskbar #start:hover{  
  112.     background-color: #fff;  
  113. }  
  114. #main #taskbar #clock{  
  115.     float: right;  
  116.     background: #e6e6e6 url(images/clock.jpg) no-repeat 4px center;  
  117.     padding: 0 8px 0 50px;  
  118.     font-size: 12px;  
  119.     border-left: 2px solid #f9f9f9;  
  120.     font-weight: 700;  
  121.     text-align: center;  
  122. }  
  123. /******* /TASKBAR  *******/  

Note: Just say that we will use the main element to contain all divisions by setting up width & height to 100%. So we won’t use any margin-top/bottom or we will break the main container in height (scrolling you know).

Step 4: Adding magic with jQuery, interface is alive!

Yeah guys this is the best part of the tutorial, no doubt! We will create a core.js javascript file to manage all events that we said that we want to our first part of this tutorial. So guys let’s take a look at the first lines of this file:

view plaincopy to clipboardprint?
  1. /***************************/  
  2. //@Author: Adrian "yEnS" Mato Gondelle &amp; Ivan Guardado Castro  
  3. //@website: www.yensdesign.com  
  4. //@email: yensamg@gmail.com  
  5. //@license: Feel free to use it, but keep this credits please!  
  6. /***************************/  
  7.   
  8. //OS elements  
  9. var main = $("#main");  
  10. var taskbar = $("#taskbar");  
  11. var clock = $("#clock");  
  12. var trash = $("#trash");  
  13. var icons = $(".icon");  

Nothing special but…

It’s very interesting to know that if we save in variables the references to each element that we will use in the future it will release jQuery from searching each time the same element in the DOM.

Guys best practices are in the air! :D

So continue explaining the file:

view plaincopy to clipboardprint?
  1. //Mouse status  
  2. var mouseDiffY = 0;  
  3. var mouseDiffX = 0;  
  4. var mouseActiveIcon = 0;  
  5. var mouseActiveCloneIcon = 0;  
  6.   
  7. //update clock function  
  8. function updateClock(){  
  9.     var now = new Date();  
  10.     var hour = now.getHours();  
  11.     if(hour < 10) hour = "0" + hour;  
  12.     var mins = now.getMinutes();  
  13.     if(mins < 10) mins = "0" + mins;  
  14.     var secs = now.getSeconds();  
  15.     if(secs < 10) secs = "0" + secs;  
  16.     //print the current time in the clock division  
  17.     clock.html(hour + " : " + mins + " : " + secs);  
  18.     //recursive call  
  19.     setTimeout("updateClock()", 1000);  
  20. }  

The function called updateClock() will be used to update the clock each second. We will add a “0″ to hours, minutes & seconds if they are less than 10, just for better looking.

Mouse status variables will be used to control the drag & drop for our icons. The variables mouseActiveIcon & mouseActiveCloneIconwill help us to know if an icon is being clicked and if an icon is being moved respectively. The other variables will be explained soon.

Well now we will dive into the jQuery ready event:

view plaincopy to clipboardprint?
  1. //cancel context menu  
  2.     $(document).bind("contextmenu",function(e){  
  3.         return false;  
  4.     });  
  5.   
  6.     //show icons  
  7.     trash.css({'top':(main.height()) - (128 + taskbar.height()), 'left':main.width() - 128});  
  8.     icons.fadeIn(1500);  
  9.     taskbar.slideDown();  
  10.   
  11.     //show current time  
  12.     updateClock();  

We have disabled the click event for the right mouse button that won’t work in Opera, because Opera developers doesn’t allow it (yeah, sure), showed the icons & taskbar with some smooth effects (you won’t notice them at the first time you load the webpage on internet, because images aren’t loaded yet, make F5 if you want to see it :P), and updated the clock.

Now pay attention guys maybe it’s the hardest part of this tutorial, here you have the code to recreate the drag & drop for icons:

view plaincopy to clipboardprint?
  1. //mouse click  
  2.     icons.mousedown(function(e){  
  3.         //only accepts left click; all navs uses 0 but IE uses 1 lol...  
  4.         if(e.button <= 1){  
  5.             //calculate differences when user clicks the icon  
  6.             mouseDiffY = e.pageY - this.offsetTop;  
  7.             mouseDiffX = e.pageX - this.offsetLeft;  
  8.             if(mouseActiveIcon !=0){  
  9.                 mouseActiveIcon.removeClass("active");  
  10.             }  
  11.             mouseActiveIcon = $(this);  
  12.             mouseActiveCloneIcon = mouseActiveIcon.clone(false).insertBefore(mouseActiveIcon);  
  13.         }  
  14.     });  
  15.   
  16.     //moving mouse  
  17.     $(document).mousemove(function(e){  
  18.         if(mouseActiveIcon){  
  19.             //update position  
  20.             mouseActiveIcon.css({"top":e.pageY - mouseDiffY, "left":e.pageX - mouseDiffX, "opacity":0.35});  
  21.             var restaY = e.pageY - $(this).css("top");  
  22.             var restaX = e.pageX - $(this).css("left");  
  23.         }  
  24.     });  
  25.   
  26.     //release mouse click  
  27.     $(document).mouseup(function(){  
  28.         if(mouseActiveIcon != 0){  
  29.             mouseActiveIcon.css({"opacity":1.0});  
  30.             mouseActiveIcon = 0;  
  31.             mouseActiveCloneIcon.remove();  
  32.             mouseActiveCloneIcon = 0;  
  33.         }  
  34.     });  

What is happening here? Well, We are managing the click event on each icon, and if the user doesn’t release the left button of the mouse, there will be a clone of the clicked icon and we will update the position of the original icon with move event. But there is a problem with that, we need to know the real top & left CSS properties that we must apply to the icon and it depends on where the user clicks inside the icon.

I am not sure if the concept it’s clear so i create a little image explanation, I hope you can understand better the trick:

We are finishing guys! Let’s control the double click for icons and our future context menu for right click (mouse):

view plaincopy to clipboardprint?
  1. /mouse double click  
  2.     icons.dblclick(function(){  
  3.         alert(this.id);  
  4.     });  
  5.   
  6.     //custom context menu on right click  
  7.     main.mousedown(function(e){  
  8.         if(e.button == 2){  
  9.             alert("context menu");  
  10.         }  
  11.     });  

Finally, core.js is completed, yargg!!! :D

Step 5: Testing our cool OS Web Interface

And that’s all guys, as you can see it’s more difficult than previous tutorials but all can be done if you work hard in the solution :)

That’s all guys, I hope you enjoy this tutorialand sorry for the waiting, but We couldn’t finish in time the tutorial for last Monday because Dreamhost problems.

You can try the tutorial online here to see how It is working and download here all sources.

One more thing guys! Remember that you can follow os on Twitter to know more about what are we doing in any moment!

See you on next tutorial, and pay attention to the next entry, we will release a new website focused in other kind of tutorials!

Learn jquery to create useful web interface with BR0-001 online course. using 642-515 guide and 350-050 tutorial, you will learn how to create effective website from start to end.

Tags:design, interface, javascript, jquery, os, web, Web Design
Category: Coding, Tutorials, Web Design  

This entry was posted on Tuesday, December 16th, 2008 at 1:20 pm and is filed under Coding, Tutorials, Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Enjoy this post?

Your vote will help us to grow this website and write more entries like this one :)

软件服务质量保证措施 软件服务质量保证措施
原创粉丝点击
热门IT博客
淘宝店招制作素材淘宝店招制作素材
valhalla javavalhalla java
剑网三mac版
网络聊天用语大全
淘宝评论的大家印象
鹏为软件股份有限公司
家庭网络如何共享文件
淘宝找优惠券怎么赚钱
杠杆炒股盈利算法
发票在线制作软件
淘宝联盟自动推广软件
淘宝网长袖连衣裙雪纺
小说逆命淘宝
js 弹出消息框
php extract函数漏洞
php培训
java实现rsa算法
邮件淘宝客
foobar2000音质优化
linux桌面安装包
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 千万别去学而思当辅导老师 三年级数学同步辅导 三年级语文阅读辅导 四年级数学学习辅导 六年级数学同步辅导 辅币 涂刷辅料 辅料 服装辅料 辅料英文 手机辅料 服装辅料网 建材辅料 阿胶糕辅料 辅料是什么 什么是辅料 五金辅料 生产辅料 辅料花边 家具辅料 液体辅料 高科辅料 衣服辅料 辅料设计 西裤辅料 陶瓷辅料 辅料生意 装修辅料有哪些 装修轻工辅料 服装辅料公司名 福牌阿胶辅料 原辅料相容性 电线电缆辅料 清工辅料都包括什么 服装辅料市场 熬阿胶的辅料 石材辅料批发市场 服装辅料厂家 服装辅料有哪些 轻工辅料包括什么 轻工辅料报价单

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里