Este artículo lo ayudará a diseñar un motor de escritorio básico utilizando el complemento jQuery-UI lwd . Este complemento es muy liviano y está totalmente basado en JavaScript y CSS.
El motor de escritorio proporciona algunas de las siguientes funciones para desarrolladores web:
- Móvil
- Redimensionable
- Centrarse en la ventana activa
- Restaurar ventanas al hacer clic
- minimizable, maximizable
Descargue todos los archivos precompilados necesarios del Github oficial y guárdelos en su carpeta de trabajo. Tenga cuidado con las rutas de los archivos durante la implementación del código.
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<!--jQuery UI CSS library -->
<link href="jquery-ui.structure.min.css"
rel="stylesheet" type="text/css" />
<!--jQuery-lwd CSS libraries -->
<link id="themecss" href=
"jquery-lwd/themes/windows2000/jquery-ui.theme.css"
rel="stylesheet" type="text/css" />
<link href="jquery-lwd/jquery-lwd.structure.css"
rel="stylesheet" type="text/css" />
<!--jQuery UI and jQuery library -->
<script type="text/javascript"
src="jquery.min.js">
</script>
<script type="text/javascript"
src="jquery-ui.min.js">
</script>
<!--jQuery-lwd JS library -->
<script type="text/javascript"
src="jquery-lwd/jquery-lwd.js">
</script>
</head>
<body>
<div id="taskbar">
<div id="lwd-taskbar-left"
style="display:inline-block">
<button id="addWindowbuttonID"
class="ui-button lwd-taskbar-button
ui-state-default ui-corner-all">
Add new window
</button>
<div class="taskbar-spacer"></div>
</div>
</div>
</body>
<script>
$(document).ready(function () {
var intCounter = 1;
/* On click event of button,
new window is added */
$('#addWindowbuttonID').click(function () {
var $objWindow = $('<div class="window">Window '
+ intCounter + '</div>');
var intRandom = Math.floor(
(Math.random() * 12) + 1);
$($objWindow).appendTo('body');
$objWindow.window({
title: 'My window ' + intCounter,
width: 480,
height: 320,
position: {
my: 'left+' + 200 + ', top+' + 200,
at: 'left top',
of: window
},
maximizable: true,
minimizable: true,
icon: 'src/jquery-lwd/themes/windows2000/'
+ 'images/icons/' + intRandom + '.png'
});
intCounter++;
});
$('#taskbar').taskbar();
$('#theme').change(function () {
$("head link#themecss").attr("href", $(this).val());
});
});
</script>
</html>
Salida: el usuario puede probar diferentes opciones o características usando el complemento.
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA