Arrastrable & ventana de diálogo Maximizable en JavaScript puro-WindowJS

Vista prévia

Descripción

WindowJS es una biblioteca independiente de JavaScript para crear ventanas de diálogo adaptables y totalmente personalizables con capacidades de redimensionamiento/movimiento/maximización/minimización.

Funcionamiento

Cargue la versión minimizada de los archivos de WindowJS en la página HTML.

<link rel="stylesheet" href="window.css">
<script src="window.js"></script>

Cree una nueva instancia de ventana de diálogo.

const win = new Window("Dialog Title", {



// options here
});

Inserte el contenido en la ventana de diálogo.

win.content.innerHTML = '<p>Dialog Window Here</p>';

Asigne un identificador único al contenido del cuadro de diálogo.

win.content.id = "myContent";

Aplicar estilos personalizados a la ventana de diálogo.

win.content.style.styleName = "value";

Opciones posibles para personalizar la ventana de diálogo.

• icono: icono de diálogo
• minimize_icon: minimizar icono
• maximize_icon: maximizar icono
• normalsize_icon: normalizar icono
• close_icon: icono de cierre
• tamaño: el tamaño del cuadro de diálogo (por defecto: {ancho: 200, altura: 150})
• posición: la posición del diálogo (por defecto: centro del padre)
• seleccionado: Si está seleccionado o no
• min_size: tamaño mín. (por defecto: {ancho: 200, altura: 150})
• max_size: tamaño máximo (predeterminado: {})
• eventos: los eventos del cuadro de diálogo
• bar_visible: muestra la barra superior
• redimensionable: si es redimensionable
• móvil: si es móvil
• Maximizable: si es maxmimizable
• Minimizable: si es Minimizable
• always_on_top: siempre en la parte superior de la pantalla
• Container: elemento Container (por defecto: Document. Body)
• window_state: el estado de la ventana: se muestra, MINIMIZADO, oculto (por defecto: se muestra)
• close_action: la acción que se realizará al cerrar: ventana Window. DISPOSE_ON_CLOSE. HIDE_ON_CLOSE. DO _ nada _ ON_CLOSE (predeterminado: window. DISPOSE_ON_CLOSE)

API methods.

// reloads the modal
win.reload();

// sets the title
win.setTitle(title);

// gets the current title
win.getTitle();

// gets the container
win.getContainer();

// changes the options
win.changeOption(option, value);

// gets the options
win.getOptions();

// changes the current state
// NORMAL / MAXIMIZED
win.changeState(state);

// gets the current state
win.getState();

// changes the dialog state
// HOWN / MINIMIZED / HIDDEN (WindowState)
win.changeWindowState(window_state);

// gets the current dialog state
win.getWindowState();

// normalizes the dialog
win.normalSize();




// checks if is normalized
win.isNormalSized();

// maximizes the window
win.maximize();

// checks if is maximized
win.isMaximized();

 // toggles between normal size and maximized
win.toggleMaximize();

// shows the dialog
win.show();

// checks if is shown
win.isShown();

// minimizes the dialog
win.minimize();

// checks if is minimized
win.isMinimized();

// hides the dialog
win.hide();

// checks if is hidden
win.isHidden();

 // checks if is visible
win.isVisible();

 // gets the size of the dialog
win.getSize();

// gets the position of the dialog
win.getPosition();

 // event listeners
win.on(event, callback);


















 // removes the event listener
win.removeOn(event);

 // resets the dialog
win.reset();

// closes the dialog
win.close();

 // destroy the dialog
win.dispose();

Controladores de eventos.

• change_title: se desencadena después de cambiar el título. Parámetros: {old_title, new_title}
• recargar: se desencadena después de recargar
• resize_start: se desencadena al iniciar el cambio de tamaño
• resize_stop: se desencadena después de que el cambio de tamaño se detenga
• redimensionar: activado al redimensionar
• move_start: se desencadena al comenzar a mover
• move_stop: se desencadena después de que el movimiento se detenga
• mover: activado en movimiento
• change_state: se desencadena después de cambiar el estado. Parámetros: {old_title, new_title}
• change_window_state: se desencadena después de cambiar el estado de la ventana. Parámetros: {old_window_state, new_window_state}
• update_size: se desencadena después de cambiar el tamaño de la ventana. Parámetros: {old_size, NEW_SIZE}
• update_selected: se desencadena después de que la selección de ventana cambia
• seleccionar: se desencadena después de seleccionar la ventana
• Deseleccione: Triggere después de que la ventana no esté seleccionada
• minimizar: Triggere después de que la ventana se minimiza
• normalSize: Triggere después de la ventana es de tamaño normal
• maximizar: Triggere después de que la ventana se maximiza
• Hide: Triggere después de que la ventana esté escondida
• Show: Triggere después de la ventana se muestra
• update_position: Triggere después de la posición de la ventana cambia. Parámetros: {old_position, new_position}
• RESET: Triggere después de que se invoca la función de reinicio
• cierre: Triggere después de que la ventana esté cerrada; Si la devolución de llamada devuelve false, la ventana no se cierra
• cerrado: Triggere después de cerrar la ventana
• desechar: Triggere antes de que la ventana se deseche; Si la devolución de llamada devuelve false, la ventana no se elimina
• desechado: Triggere después de que la ventana se haya desechado
• init: Triggere después de la ventana se inicializa por primera vez
• maximizando: Triggere antes de que la ventana esté maximizada; Si la devolución de llamada devuelve false, la ventana no se maximiza
• minimizando: Triggere antes de que la ventana se minimice; Si la devolución de llamada devuelve false, la ventana no se minimiza