Compartir en FaceBook Seguramente te has encontrado con la necesidad de crear un webdesktop.
Pues no es tan complejo como aparenta o como se oye, lo primero que debes hacer es conocer hacia donde va tu proyecto y para ello te presentamos el ejemplo de Nathan Smith.
LINK GITHUB
El ejemplo es sumamente sencillo se basa en tomar un par de divs ocultos con formato de ventana y mostrarlos tras doble click, mediante las librerías jQuery Desktop (JQD)
El script es sencillo se basa en incluir jquery-ui y jquery-desktop el resto es más que nada manejo de divs y posiciones absolutas.
</p> <script type="text/JavaScript" src="<a href="view-source:http://localhost/showroom/assets/js/jquery.js">assets/js/jquery.js</a>"></script> <script type="text/JavaScript" src="<a href="view-source:http://localhost/showroom/assets/js/easing.js">assets/js/easing.js</a>"></script> <script type="text/JavaScript" src="<a href="view-source:http://localhost/showroom/assets/js/wslide.js">assets/js/wslide.js</a>"></script>
Lo primero en hacer es pre-configurar detectectar el tamaño de la pantalla para poder establecer el ancho de nuestro web desktop.
<pre>/**
* Window Width & Window Height
* @author Nestor Velazquez
*/
if (document.body && document.body.offsetWidth)
{
winW = document.body.offsetWidth; // Window width --> Detecta el ancho de la ventana del navegador
winH = document.body.offsetHeight; // Window height --> Detecta el alto de la ventana del navegador
}
if (document.compatMode=='CSS1Compat' && document.documentElement && document.documentElement.offsetWidth )
{
winW = document.documentElement.offsetWidth;
winH = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight)
{
winW = window.innerWidth;
winH = window.innerHeight;
// alert(winW + ' ' + winH)
}
Una vez configurado el tamaño de la pantalla configuramos los efectos del easing y web desktop
</pre>
<pre id="line22"> /**
* wslide configuration for the multiscreen feature
* @author Nestor Velazquez
*/
$(document).ready(function()
{
$("#escritorios").wslide({
width: winW,
height: winH,
pos: 2,
horiz: true,
autolink: 'elMenu',
duration: 3000
// SIN EFECTO DE REBOTE
// effect: 'easeOutBounce'
});
});</pre>
Cada uno de los elementos del escritorio es un elemento LI
<pre id="line22"><ul id="escritorios">
<!-- Multiscreen feature by Nestor Velazquez -->
<li style="background-color: #FFF; margin-top: 25px;">
<!--ESCRITORIO 1--></pre>
<pre id="line83"> <div style="margin-top: 35px;">
<a class="abs icon" style="left:20px; top:60px;" href="<a href="view-source:http://localhost/showroom/#icon_dock_chrome">#icon_dock_chrome</a>">
<img src="<a href="view-source:http://localhost/showroom/assets/images/icons/chrome.png">assets/images/icons/chrome.png</a>" height="8" />
Google Chrome
</a>
<a class="abs icon" style="left:20px; top:140px;" href="<a href="view-source:http://localhost/showroom/#icon_dock_twitter">#icon_dock_twitter</a>">
<img src="<a href="view-source:http://localhost/showroom/assets/images/icons/twitter.png">assets/images/icons/twitter.png</a>" height="8" />
Twitter.com
</a>
</div></pre>
<pre id="line94"> <div style="clear:both;"></div>
</li>
<li style="background-image: url(assets/images/misc/wallpaper.jpg); margin-top: 25px;">
<!--ESCRITORIO 2-->
<div style="margin-top: 25px;">
<a class="abs icon" style="top:60px;" href="<a href="view-source:http://localhost/showroom/#icon_dock_microblog">#icon_dock_microblog</a>">
<img src="<a href="view-source:http://localhost/showroom/assets/images/icons/icon_32_microblog.png">assets/images/icons/icon_32_microblog.png</a>" height="8" />
Microblog
</a></pre>
<pre id="line105"> <a class="abs icon" style="top:140px;" href="<a href="view-source:http://localhost/showroom/#icon_dock_acadetodo">#icon_dock_acadetodo</a>">
<img src="<a href="view-source:http://localhost/showroom/assets/images/icons/icon_32_acadetodo.png">assets/images/icons/icon_32_acadetodo.png</a>" height="8" />
AcadeTodo.com
</a>
</div>
<div style="clear:both;"></div>
</li>
<li style="background-image: url(assets/images/misc/Huawei.jpg); margin-top: 25px;">
<!--ESCRITORIO 3--></pre>
<pre id="line116"> <div style="margin-top: 25px;">
<img src="<a href="view-source:http://www.comunicacionweb.com.mx/media/images/2.jpg">http://www.comunicacionweb.com.mx/media/images/2.jpg</a>" width="300px" />
</div>
</li>
</ul>
<!-- VENTANAS DE CADA ICONO -->
<!--MICROBLOG WINDOW-->
<div id="window_microblog" class="abs window">
<div class="abs window_inner">
<div class="window_top"></pre>
<pre id="line129"> <span class="float_left">
<img src="<a href="view-source:http://localhost/showroom/assets/images/icons/icon_16_microblog.png">assets/images/icons/icon_16_microblog.png</a>" />
Microblog
</span>
<span class="float_right">
<a href="<a href="view-source:http://localhost/showroom/#">#</a>" class="window_min"></a>
<a href="<a href="view-source:http://localhost/showroom/#">#</a>" class="window_resize"></a>
<a href="<a href="view-source:http://localhost/showroom/#icon_dock_microblog">#icon_dock_microblog</a>" class="window_close"></a>
</span></pre>
<pre id="line138"> </div>
<div class="abs window_content">
<div class="window_fulscreen">
<!--<iframe src="http://www.acadetodo.com/microblog"></iframe>-->
<iframe class="fullscreen_website" src="<a href="view-source:http://localhost/showroom/pages/landing_microblog.html">pages/landing_microblog.html</a>"></iframe>
</div>
</div>
<div class="abs window_bottom"></pre>
<pre id="line146"> Demo Browser - Author AHA
</div>
</div>
<span class="abs ui-resizable-handle ui-resizable-se"></span>
</div>
<!--ACADETODO WINDOW-->
<div id="window_acadetodo" class="abs window">
<div class="abs window_inner">
<div class="window_top">
<span class="float_left"></pre>
<pre id="line157"> <img src="<a href="view-source:http://localhost/showroom/assets/images/icons/icon_16_acadetodo.png">assets/images/icons/icon_16_acadetodo.png</a>" height="16" />
Microblog
</span>
<span class="float_right">
<a href="<a href="view-source:http://localhost/showroom/#">#</a>" class="window_min"></a>
<a href="<a href="view-source:http://localhost/showroom/#">#</a>" class="window_resize"></a>
<a href="<a href="view-source:http://localhost/showroom/#icon_dock_acadetodo">#icon_dock_acadetodo</a>" class="window_close"></a>
</span>
</div></pre>
<pre id="line166"> <div class="abs window_content">
<div class="window_fulscreen">
<iframe class="fullscreen_website" src="<a href="view-source:http://www.acadetodo.com/">http://www.acadetodo.com/</a>"></iframe>
</div>
</div>
<div class="abs window_bottom">
Demo Browser - Author AHA
</div>
</div></pre>
<pre id="line175"> <span class="abs ui-resizable-handle ui-resizable-se"></span>
</div>
<!-- Twitter -->
<div id="window_twitter" class="abs window">
<div class="abs window_inner">
<div class="window_top">
<span class="float_left">
<img src="<a href="view-source:http://localhost/showroom/assets/images/icons/twitter.png">assets/images/icons/twitter.png</a>" height="22px"/>
Twitter
</span></pre>
<pre id="line186"> <span class="float_right">
<a href="<a href="view-source:http://localhost/showroom/#">#</a>" class="window_min"></a>
<a href="<a href="view-source:http://localhost/showroom/#">#</a>" class="window_resize"></a>
<a href="<a href="view-source:http://localhost/showroom/#icon_dock_twitter">#icon_dock_twitter</a>" class="window_close"></a>
</span>
</div>
<div class="abs window_content">
<div class="window_fulscreen">
<!--<iframe src="http://www.acadetodo.com/microblog"></iframe>--></pre>
<pre id="line195"> <iframe class="fullscreen_website" src="<a href="view-source:http://www.twitter.com/">http://www.twitter.com</a>"></iframe>
</div>
</div>
<div class="abs window_bottom">
Demo Browser - Author AHA
</div>
</div>
<span class="abs ui-resizable-handle ui-resizable-se"></span>
</div></pre>
<pre id="line204"><div id="window_chrome" class="abs window">
<div class="abs window_inner">
<div class="window_top">
<span class="float_left">
<img src="<a href="view-source:http://localhost/showroom/assets/images/icons/chrome.png">assets/images/icons/chrome.png</a>" height="22px"/>
Google Chrome
</span>
<span class="float_right">
<a href="<a href="view-source:http://localhost/showroom/#">#</a>" class="window_min"></a></pre>
<pre id="line214"> <a href="<a href="view-source:http://localhost/showroom/#">#</a>" class="window_resize"></a>
<a href="<a href="view-source:http://localhost/showroom/#icon_dock_chrome">#icon_dock_chrome</a>" class="window_close"></a>
</span>
</div>
<div class="abs window_content">
<div class="window_fulscreen">
<!--<iframe src="http://www.acadetodo.com/microblog"></iframe>-->
<iframe class="fullscreen_website" src="<a href="view-source:http://chrome.google.com/">http://chrome.google.com</a>"></iframe></pre>
<pre id="line222"> </div>
</div>
<div class="abs window_bottom">
Demo Browser - Author AHA
</div>
</div>
<span class="abs ui-resizable-handle ui-resizable-se"></span>
</div>
<!-- TOP BAR --></pre>
<pre id="line236"> <div class="abs" id="bar_top">
<span class="float_right" id="clock"></span>
<!-- automenu Option for the multiscreen feature by Nestor Velazquez -->
<ul style="float: left;">
<li>
<a class="menu_trigger" href="<a href="view-source:http://localhost/showroom/#">#</a>">Contact Us / Feedback</a>
</li>
<li style="width: 930px;"></pre>
<pre id="line245"> <!--<a href="#">Element 2</a>-->
<div id="elMenu"></div>
</li>
</ul>
</div>
<!-- TASK BAR -->
<div class="abs" id="bar_bottom">
<a class="float_left" href="<a href="view-source:http://localhost/showroom/#">#</a>" id="show_desktop" title="Show Desktop"></pre>
<pre id="line255"> <img src="<a href="view-source:http://localhost/showroom/assets/images/icons/icon_22_desktop.png">assets/images/icons/icon_22_desktop.png</a>" />
</a>
<ul id="dock">
<li id="icon_dock_microblog">
<a href="<a href="view-source:http://localhost/showroom/#window_microblog">#window_microblog</a>">
<img src="<a href="view-source:http://localhost/showroom/assets/images/icons/icon_22_microblog.png">assets/images/icons/icon_22_microblog.png</a>" />
Microblog
</a>
</li></pre>
<pre id="line264"> <li id="icon_dock_acadetodo">
<a href="<a href="view-source:http://localhost/showroom/#window_acadetodo">#window_acadetodo</a>">
<img src="<a href="view-source:http://localhost/showroom/assets/images/icons/icon_22_acadetodo.png">assets/images/icons/icon_22_acadetodo.png</a>" height="22"/>
Acadetodo.com
</a>
</li>
<li id="icon_dock_chrome">
<a href="<a href="view-source:http://localhost/showroom/#window_chrome">#window_chrome</a>">
<img src="<a href="view-source:http://localhost/showroom/assets/images/icons/chrome.png">assets/images/icons/chrome.png</a>" height="22px" /></pre>
<pre id="line274"> Microblog
</a>
</li>
<li id="icon_dock_twitter">
<a href="<a href="view-source:http://localhost/showroom/#window_twitter">#window_twitter</a>">
<img src="<a href="view-source:http://localhost/showroom/assets/images/icons/twitter.png">assets/images/icons/twitter.png</a>" height="22px" />
Twitter
</a>
</li>
</ul>
El ejemplo en acción se ve en este link.
