Buenas gente, espero estén bien.
Verán, he desarrollado este pequeño script para facilitarme el crear ventanas modales.
Cuenta con una serie de
propiedades y
métodos para que podamos entre otras cosas:
Cambiar tamaño, Posición, Mostrar/Ocultar con efectos, Añadir elementos como texto, botones, entre otras..
Para crear una ventana típica solo instanciamos, inicializamos y manipulamos elementos.
Pequeña API:
Código:
# Constructor #
|
|__ · WindowsInterface(String NAME_IDSelector);
# Methods #
|
|__ · init(String ICON-PATH, String TITLE, int X, int Y, int WIDTH, int HEIGHT, Object SHOW-BUTTONS, boolean VISIBLE);
|
|__ · SetWindow()
| |
| |__ · BackgroundColor(String COLOR);
| |__ · Visible(boolean VISIBLE);
| |__ · SetWidth(int WIDTH);
| |__ · SetHeight(int HEIGHT);
| |__ . Size(int WIDTH, int HEIGHT);
| |__ . Border(String BORDER);
| |__ . Resizable(boolean RESIZABLE);
| |__ . Draggable(boolean DRAGGABLE);
|
|__ · SetTitle()
| |
| |__ . BackgroundColor(String COLOR);
| |__ . FontSize(String FONT-SIZE);
| |__ . FontFamily(String FONT-FAMILY);
| |__ . FontWeight(String FONT-WEIGHT);
| |__ . FontStyle(String FONT-STYLE);
| |__ . Font(String FONT-FAMILY, String FONT-SIZE, String COLOR, String FONT-WEIGHT);
|
|__ · SetContent()
| |
| |__ . Message(String MESSAGE);
| |__ . BackgroundColor(String COLOR);
| |__ . FontSize(String SELECTOR, String FONT-SIZE);
| |__ . FontFamily(String SELECTOR, String FONT-FAMILY);
| |__ . FontWeight(String SELECTOR, String FONT-WEIGHT);
| |__ . FontStyle(String SELECTOR, String FONT-STYLE);
| |__ . Font(String SELECTOR, String FONT-FAMILY, String FONT-SIZE, String COLOR, String FONT-WEIGHT);
| |__ . Button();
| | |
| | |__ . Add(String ID-SELECTOR, String CLASS-SELECTOR, String BUTTON-VALUE, String BUTTON-CALLBACK);
| |
| |__ . Position(String SELECTOR, Object CSS-SYNTAXIS)
| |__ . Scrollable(boolean SCROLLABLE);
Código Javascript
:
Ver originalWindows1 = new WindowsInterface("alert");
Windows1.init(null, "Mi Ventana", 10, 10, 500, 250, {minimize: true, maximize: true, close: true}, true);
Windows1.SetContent().Message("<p>Hola Mundo!</p>");
Windows1.SetContent().FontSize("p", "1.5vmin");
VISTA PREVIA:
REQUIERE:
Código:
Jquery.min.js
Jquery-ui.min.js
Resize-Sensor.js
Aquí la descarga del source con todos los archivos necesarios.
Es importante mencionar, que la carpeta
images debe de estar en la ubicación donde tengan el
WindowsInterface.css o editar el mismo para cambiar la ubicación de dichos iconos.
DESCARGA: https://mega.nz/#!fItjkCTT!O58nduhl1...73JkgI1hq7rIpQ
En fin... espero que les guste, es bastante sencillo y la verdad es que puede mejorarse mucho, pero para mostrar mensajes y otras cosas, la verdad es que nos ahorra tiempo.