En esta extensión se encuentra lo más parecido a un framewok javascript.
En realidad, se trata de un conjunto de librerías, más o menos independientes. Esta decisión se ha tomado a partir de los cambios que se han producido en el javascript, y que han ido quitando relevancia a muchos framework conocidos.
El archivo principal, contiene algunas funciones de uso común y polyfills. Aunque cada vez son menos.
Agrega eventos javascript a una página html.
Crea un elemento del DOM.
let el = JsElement('div.class-name#id-name', { text: 'Hello' });
En el ejemplo, creará un div, le agregará una clase y un identificador. Por último, le colocará un texto de contenido.
Además de las propiedades y atributos comunes, es posible utilizar:
| Atributos | Descripción |
|---|---|
| className | Agrega el atributo class. |
| text | Agrega un texto a través de textContent. |
| html | Agrega un html a través de innerHTML. |
| styles | Agrega valores al atributo style. |
| events | Agrega eventos. |
Manejador javascript de formularios.
Basicamente, es una implementación de varias librerías javascript del sistema: JsRequest, JsControl, JsFelem, JsSpinner, JsNotify.
Lo más sencillo, es pasar una cadena con la acción del formulario y una función de retorno. El formulario se enviará de forma asincrónica.
JsForm('#my-form').request('the_url', function() { alert('ok') });
Gestor javascript de consultas sincrónicas y asincrónicas.
Consulta asincrónica, envia los datos de un formulario, devuelve un texto que actualiza en el objeto DOM señalado.
JsRequest.text({
url: 'the_url',
data: '#my-form',
update: '#inner-html'
})
Consulta asincrónica, envia los datos, devuelve un json, ejecuta una función de retorno.
JsRequest.json({
url: 'the_url',
data: {'key1':value1,'key2':value2},
onSuccess: function(json) { console.log(json) }
})
Consulta sincrónica, envia los datos del formulario.
JsRequest.post({
url: 'the_url',
data: '#my-form'
})
Consulta sincrónica, envia el valor del elemento de formulario seleccionado.
JsRequest.get({
url: 'the_url',
data: '#my-form-element'
})
El parámetro «data» puede ser un formulario; un elemento de formulario; una cadena con el selector de DOM; un objeto con los pares valor, clave; un array con varias de las opciones anteriores; una función que devuelve cualquiera de las opciones anteriores y se ejecuta cuando se envía la consulta.
Crea los clásicos tooltip personalizados.
Tooltip on left | Tooltip on top | Tooltip on bottom | Tooltip on right
<a title="Tooltip" data-tooltip="left">Tooltip on left</a> |
<a title="Tooltip" data-tooltip="">Tooltip on top</a> |
<a title="Tooltip" data-tooltip="bottom">Tooltip on bottom</a> |
<a title="Tooltip" data-tooltip="right">Tooltip on right</a>