Foundation - Utilidades de JavaScript

Foundation incluye utilidades de JavaScript que se utilizan para agregar funcionalidades comunes. Es muy útil y fácil de usar. Esta biblioteca de utilidades de JavaScript se puede encontrar en la carpeta Your_folder_name / node_modules / foundation-sites / js

Caja

La biblioteca Foundation.Box consta de un par de métodos.
los js/foundation.util.box.js es el nombre del archivo de secuencia de comandos, que se puede incluir al escribir el código.
Se pueden pasar objetos jQuery o elementos JavaScript simples a ambos métodos.

var dims = Foundation.Box.GetDimensions(element);

El objeto devuelto especifica la dimensión del elemento como:

{
   height: 54,
   width: 521,
   offset: {
      left: 198,
      top: 1047
   },
   
   parentDims: {
      height: ...    //The same format is share for parentDims and windowDims as the element dimensions.
   },
   
   windowDims: {
      height: ...
   }
}

La función ImNotTouchingYou está incluida.
Según el elemento pasado, se devuelve un valor booleano, que es un conflicto con el borde de la ventana u opcional o un elemento principal.
Las dos opciones especificadas en la línea que se muestra a continuación, es decir, leftAndRightOnly, topAndBottomOnly se utilizan para identificar la colisión en un solo eje.

var clear = Foundation.Box.ImNotTouchingYou (
   element [, parent, leftAndRightOnly, topAndBottomOnly]);

Teclado

Hay muchos métodos en Foundation.Keyboard , que ayudan a facilitar la interacción del evento del teclado.
los js/foundation.util.keyboard.js es el nombre del archivo de secuencia de comandos, que se puede incluir al escribir el código.
El objeto Foundation.Keyboard.keys consta de pares clave / valor, cuyas claves se utilizan en el marco con más frecuencia.
Siempre que se presiona la tecla , se llama a Foundation.Keyboard.parseKey para obtener una cadena. Esto ayuda a administrar sus propias entradas de teclado.

El siguiente código se usa para encontrar todos los elementos enfocables dentro del elemento $ dado . Por lo tanto, no es necesario que usted escriba ninguna función y selector.

var focusable = Foundation.Keyboard.findFocusable($('#content'));

La función handleKey es una función principal de esta biblioteca.
Este método se usa para manejar el evento de teclado; se puede llamar siempre que se registre algún complemento con la utilidad.

Foundation.Keyboard.register('pluginName', {
   'TAB': 'next'
});

...//in event callback
Foundation.Keyboard.handleKey(event, 'pluginName', {
   next: function(){
      //do stuff
   }
});

Se puede llamar a la función Foundation.Keyboard.register cuando desee utilizar sus propias combinaciones de teclas.

MediaQuery

La biblioteca MediaQuery es la columna vertebral de todas las técnicas CSS receptivas.
los js/foundation.util.mediaQuery.js es el nombre del archivo de secuencia de comandos, que se puede incluir al escribir el código.
El Foundation.MediaQuery.atLeast ( 'grande') se utiliza para comprobar si la pantalla es al menos tan ancho como un punto de interrupción.
El Foundation.MediaQuery.get ( 'medio') se pone la consulta de medios de un punto de ruptura.
Los Foundation.MediaQuery.queries son una serie de preguntas de los medios, Fundación utiliza para puntos de interrupción.
El Foundation.MediaQuery.current es una cadena del tamaño de punto de interrupción actual.

Foundation.MediaQuery.get('medium');
Foundation.MediaQuery.atLeast('large');
Foundation.MediaQuery.queries;
Foundation.MediaQuery.current;

El siguiente código transmite el cambio de consulta de medios en la ventana.

$(window).on('changed.zf.mediaquery', function(event, newSize, oldSize){});

Movimiento y movimiento

Foundation.Motion javascript es similar a la biblioteca Motion UI, que se incluye en Foundation 6. Se utiliza para crear transiciones y animaciones CSS personalizadas.
los js/foundation.util.motion.js es el nombre del archivo de secuencia de comandos, que se puede incluir al escribir el código.
Foundation.Move se utiliza para hacer que la animación respaldada por CSS3 sea simple y elegante.
requestAnimationFrame();el método le dice al navegador que realice una animación; solicita que se llame a su función de animación antes de que el navegador realice el siguiente repintado.

Foundation.Move(durationInMS, $element, function() {
   //animation logic
});

Cuando se ha completado la animación, finished.zf.animate se dispara.

Temporizador e imágenes cargadas

Orbit utiliza tanto la función de temporizador como la imagen cargada. losjs/foundation.util.timerAndImageLoader.js es el nombre del archivo de secuencia de comandos, que se puede incluir al escribir el código.

var timer = new Foundation.Timer($element, {duration: ms, infinite: bool}, callback);

El método de carga de imágenes ejecuta una función de devolución de llamada en su colección jQuery cuando las imágenes están completamente cargadas.

Foundation.onImagesLoaded($images, callback);

Toque

Los métodos se utilizan para agregar eventos de pseudo arrastre y deslizar elementos.
los js/foundation.util.touch.js es el nombre del archivo de secuencia de comandos, que se puede incluir al escribir el código.
El método addTouch se utiliza para vincular elementos a eventos táctiles en el complemento Slider para dispositivos móviles.
El método spotSwipe une los elementos para deslizar eventos en el complemento Orbit para dispositivos móviles.

$('selector').addTouch().on('mousemove', handleDrag);

$('selector').spotSwipe().on('swipeleft', handleLeftSwipe);

Disparadores

Activa el evento especificado para los elementos seleccionados.
los js/foundation.util.triggers.js es el nombre del archivo de secuencia de comandos, que se puede incluir al escribir el código.
Los activadores se utilizan en muchos complementos de Foundation.

$('selector').on('open.zf.trigger', handleOpen);
$('selector').on('close.zf.trigger', handleClose);
$('selector').on('toggle.zf.trigger', handleToggle);

Los siguientes dos métodos se utilizan en esta biblioteca, es decir, cambiar el tamaño y desplazarse.

El método resize () activa el evento de cambio de tamaño cuando ocurre un evento de cambio de tamaño.
El método scroll () activa el evento de desplazamiento cuando ocurre un evento de desplazamiento.

$('#someId').on('scrollme.zf.trigger', handleScroll);
$('#someId').on('resizeme.zf.trigger', handleResize);

Diverso

Foundation contiene pocas funciones en la biblioteca principal, que se utilizan en muchos lugares.
los js/foundation.core.js es el nombre del archivo de secuencia de comandos, que se puede incluir al escribir el código.
Foundation.GetYoDigits ([número, espacio de nombres]) devuelve un uid base-36 aleatorio con espacio de nombres. Devuelve la longitud de cadena de 6 caracteres de forma predeterminada.
Foundation.getFnName (fn) devuelve un nombre de función de JavaScript.
Foundation.transitionend se produce cuando se completa la transición de CSS.

↰ Previous page Next page ↱