Crear ventanas flotantes con vanilla JavaScript-iWin
| Autor: | Ignas2526 |
|---|---|
| Views Total: | 109 |
| Sitio oficial: | Ir a la web |
| Actualizado: | March 4, 2019 |
| Licencia: | MIT |
Vista prévia
Descripción
iWin es una biblioteca de JavaScript vainilla para crear dinámico, arrastrar, redimensionable, ventanas flotantes en la página.
Funcionamiento
Importe la biblioteca iWin al documento.
<script src="iWin.js"></script>
Defina un ID único para la ventana.
var wID = 'iDemo' + new Date().getTime();
Inicialice iWin.
iWin.init({
onSetTitle:function(wID, obj, title)
{
obj.innerHTML = '<span>[X]</span><span>'+ title+ '</span>';
// Capture phase second
iWin.addEvent(iWin.win[wID].obj.children[0].children[0], 'press', function(e) {
var evt = e || window.event;
evt.preventDefault();
iWin.win[wID].onClose(wID, e);
(e.stopPropagation)? e.stopPropagation(): e.cancelBubble = true;
}, true);
}
}); Llame a la función iWin. Create para crear la ventana. El primer argumento es un objeto que contiene parámetros que se pueden cambiar más adelante mediante una llamada a varios métodos.
iWin.create({
title: 'Window Title',
onClose:function(){iWin.destroy(wID)}},
wID
); Establezca el contenido de la ventana. El segundo argumento indica que queremos que la ventana se redimensiona automáticamente para ajustarse al contenido.
iWin.setContent('Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>'+
'Nulla varius justo tellus, ac aliquam lorem maximus ut. Suspendisse fermentum<br>'+
'purus euismod quam consequat interdum. Maecenas eget ultrices ligula, sed fringilla<br>'+
'nisl. Ut eu leo non sem ultricies interdum. Nam et porta metus, sed efficitur felis.<br>'+
'Proin et mauris magna. Fusce et condimentum dui, id finibus lorem. Nunc volutpat, neque<br>'+
'nec tincidunt auctor, risus dui congue felis, vel tristique ipsum sapien sed lorem.<br>'+
'Maecenas tempor vestibulum nunc vel maximus. Nulla varius finibus velit, in aliquet<br>'+
'felis dignissim in. Pellentesque ut commodo metus. Sed suscipit erat non mauris finibus<br>'+
'pretium. Phasellus dignissim sem turpis, id suscipit magna suscipit ut. ', wID);
iWin.setContentDimensions(null, wID);
iWin.setPosition(60, (window.innerWidth / 2) - 20, wID); Muestre la ventana en la página.
iWin.show(wID);
