Imprimir

System

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 system

El archivo principal, contiene algunas funciones de uso común y polyfills. Aunque cada vez son menos.

 

JsControls

Agrega eventos javascript a una página html.

JsElement

JsElement()

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.

 

JsForm

Manejador javascript de formularios.

Basicamente, es una implementación de varias librerías javascript del sistema: JsRequest, JsControl, JsFelem, JsSpinner, JsNotify.

 

Ejemplo inicial

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') });

 

JsRequest

Gestor javascript de consultas sincrónicas y asincrónicas.

 

Ejemplos

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»

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.

 

JsTooltip

Crea los clásicos tooltip personalizados.

 

Ejemplos

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>