Chardin.js - añade instrucciones de superposición para tus apps

Pequeña herramienta JS que hace súper fácil añadir instrucciones de superposición para tus aplicaciones. Estas guías pueden ser súper útiles para explicar la interfaz de usuario, hacer una demostración de las diversas funciones de la aplicación o simplemente mostrar al usuario lo que debe hacer a continuación.

Chardin.js - añade instrucciones de superposición para tus apps

Chardin.js es un plugin jQuery que crea una simple superposición para mostrar instrucciones sobre los elementos existentes.

Demo

Puede hacer la prueba en: http://heelhook.github.io/chardin.js/

Instalación

¡Simple! Bifurca este repositorio o descarga chardinjs.css y chardinjs.min.js y añade los siguientes activos a tu HTML:

Hay una gema de chardinjs-rails.

Añadiendo datos para las instrucciones

Añade las instrucciones a tus elementos:

data-intro: Texto a mostrar con las instrucciones/tooltip. data-position: ( left, top, right, bottom), donde colocar el texto con respecto al elemento. Además se puede alterar la posición relativa del texto de la punta de la herramienta colocando dos puntos y un valor porcentual (-100 a 100) después del texto de la posición, por ejemplo "top:-50". Esto hará que la punta de la herramienta se deslice a lo largo o a lo alto del elemento, alejándose del centro.

También puede ejecutar Chardin en modo secuenciado, donde se mostrará un elemento a la vez, pasando al siguiente con un clic del ratón (o automáticamente después de un retardo establecido). Añade la entrada data-chardin-sequered="true" a la etiqueta del cuerpo. Añada también data-chardin-auto="true" y data-chardin-delay="100" para el movimiento automático a través de los elementos. El retraso es en milisegundos. La secuencia por defecto es la cargada por el DOM, pero puede ser anulada usando la etiqueta data-sequence con un número. Si no se establece el auto-traversal, al hacer clic se moverá secuencialmente a través de los elementos, al hacer clic con la tecla shift hacia abajo se moverá hacia atrás a través de ellos.

Referencias

Repositorio de Github: https://github.com/heelhook/chardin.js

¿Cuál es su reacción?

like
2
dislike
0
love
0
funny
0
angry
0
sad
0
wow
0