PLUGINS Y LIBRERIAS JS
Contenido
QUÉ ES UN PLUGIN
Un plugin es una complemento
que nos permite agregar una nueva función a nuestro proyecto de forma facil y
sencilla.
QUÉ ES UNA LIBRERIA
Una librería(biblioteca) es una herramienta. que a diferencia de un
plugin este
puede contener un conjunto de funciones.
Al utilizar una libreria tenemos la opcion de modificar algunas configuraciones.
Al utilizar una libreria tenemos la opcion de modificar algunas configuraciones.
QUÉ ES UNA FRAMEWORK
Un framework es un conjunto de herramienta. que nos facilitan
agregar
funcionalidades a nuestro proyecto.
Al utilizar un framework NO tenemos la opcion de modificar algunas configuraciones.
Al utilizar un framework NO tenemos la opcion de modificar algunas configuraciones.
PUSHBAR JS
Pushbar.js es un
pequeño
complemento de JavaScript para crear cajones deslizantes en
aplicaciones web.
Es totalmente personalizable y libre de dependencias. Puede usarlo como menús de barra lateral o cajones de opciones.
Descargar archivos útiles
Es totalmente personalizable y libre de dependencias. Puede usarlo como menús de barra lateral o cajones de opciones.
Descargar archivos útiles
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/pushbar.css">
</head>
<body>
<button id="boton" data-pushbar-target="contenido">VER EFECTO PUSHBAR</button>
<div data-pushbar-id="contenido" data-pushbar-direction="left">
<button data-pushbar-close>Cerrar</button>
<h1>Esto es pushbar</h1>
</div>
<script src="js/pushbar.js"></script>
<script>
const pushbar = new Pushbar({
blur: true,
overlay: true,
});
</script>
</body>
</html>
DATATABLES
Datatables
es
una
herramienta de JavaScript altamente flexible que nos permite trabajar con tablas en
HTML.
//para ordenar la tabla en forma descendiente
$(document).ready(function() {
$('#example').DataTable( {
"order": [[ 0, "desc" ]], //el "0" hace referencia a la primera columna -> ID
"paging": false,
"dom": "",
responsive: true,
"pageLength": 10,
"language": {
"sProcessing": "Procesando...",
"sLengthMenu": "Mostrar _MENU_ registros",
"sZeroRecords": "No se encontraron resultados",
"sEmptyTable": "Ningún dato disponible en esta tabla =(",
"sInfo": "Registros del _START_ al _END_ de _TOTAL_ registros",
"sInfoEmpty": "Registros del 0 al 0 de 0 registros",
"sInfoFiltered": "-",
"sInfoPostFix": "",
"sSearch": "Buscar:",
"sUrl": "",
"sInfoThousands": ",",
"sLoadingRecords": "Cargando...",
"oPaginate": {
"sFirst": "Primero",
"sLast": "Último",
"sNext": "Siguiente",
"sPrevious": "Anterior"
},
"oAria": {
"sSortAscending": ": Activar para ordenar la columna de manera ascendente",
"sSortDescending": ": Activar para ordenar la columna de manera descendente"
},
"buttons": {
"copy": "Copiar",
"colvis": "Visibilidad"
}
}
} );
} );
MOMENT JS
Moment.js es una libreria
que nos permite trabajar con fechas.
Lo bueno de este libreria es que podemos realizar operaciones complejas con las fechas.
Descargar archivos útiles
Lo bueno de este libreria es que podemos realizar operaciones complejas con las fechas.
Descargar archivos útiles
<script>
const ayer = moment('1999-02-02 14:00:00.000');
const hoy = moment('2021-01-20 08:40:00.000');
// DD-MD-Y d-m-y
// HH:MM:SS hh-mm-ss
console.log("**********restas de fechas**********");
console.log(hoy.diff(ayer, 'days')+" dias")
console.log(hoy.diff(ayer, 'months')+" meses");
console.log(hoy.diff(ayer, 'years')+" años");
console.log(hoy.diff(ayer, 'hours')+" horas");
console.log(hoy.diff(ayer, 'minutes')+" minutos");
console.log(hoy.diff(ayer, 'seconds')+" segundos");
console.log(hoy.diff(ayer, 'milliseconds')+" mili segundos");
console.log("*********sumas de fechas*********");
console.log(moment(hoy.add(7, 'days')._d).format('DD-MM-YYYY hh:mm:ss'))
</script>
PRISM JS
Prism.js es una librería que nos
permite
poder compartir nuestro codigo en la web de una manera elegante.
Descargar archivos útiles
Descargar archivos útiles configurados
Descargar archivos útiles
Descargar archivos útiles configurados
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/prism.css">
</head>
<body>
<pre rel="HTML">
<code class="language-markup line-numbers">
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
</body>
</html>
</code>
</pre>
<script src="js/prism.js"></script>
</body>
</html>
HEADROOM JS
Headroom.js es
una librería
que nos permite
ejecutar una funcion cuando el usuario hace scroll en la pagina.
Se desliza fuera de la vista cuando se desplaza hacia abajo y se desliza hacia adentro cuando se desplaza hacia arriba.
Descargar archivos útiles
Se desliza fuera de la vista cuando se desplaza hacia abajo y se desliza hacia adentro cuando se desplaza hacia arriba.
Descargar archivos útiles
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/estilos.css">
<style>
header {
width: 100%;
height: 80px;
background: rgb(0, 157, 248);
position: fixed;
}
section { padding-top: 90px; }
.headroom { transition: all .3s ease; }
.headroom--pinned { transform: translateY(0%); }
.headroom--unpinned { transform: translateY(-100%); }
</style>
</head>
<body>
<header id="header"></header>
<section>
<p>Lorem 2000</p>
</section>
<script src="js/headroom.min.js"></script>
<script>
(function () {
let header = document.getElementById("header");
let headroom = new Headroom(header);
headroom.init();
}())
</script>
</body>
</html>
PARTICLES JS
Particles.js
es una
librería que nos permite
mostrar particulas en movimiento en nuestra página.
- Ingresa a la página
- Configura según tus necesidades
- Descarga el archivo JSON y pegar dentro de particlesJS()
<!DOCTYPE html>
<html lang="en">
<head>
<style>
* { margin: 0; }
#particles-js { width: 100%; height: 100vh; background: rgb(0, 0, 0); }
</style>
</head>
<body>
<div id="particles-js"></div>
<script src="js/particles.min.js"></script>
<script>
particlesJS( //AQUI VA EL ARCHIVO JSON )
</script>
</body>
</html>
GLIDER JS
Glider.js
es una
librería que nos permite
mostrar imagenes(contenidos) de forma elegante; Además es responsivo.
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="css/glider.min.css">
<style>
body{ padding: 50px; }
</style>
<body>
<div class="glider-contain">
<div class="glider">
<div><img src="https://placeimg.com/640/480/animals" alt=""></div>
<div><img src="https://placeimg.com/640/480/arch" alt=""></div>
<div><img src="https://placeimg.com/640/480/nature" alt=""></div>
<div><img src="https://placeimg.com/640/480/people" alt=""></div>
<div><img src="https://placeimg.com/640/480/animals" alt=""></div>
<div><img src="https://placeimg.com/640/480/arch" alt=""></div>
<div><img src="https://placeimg.com/640/480/nature" alt=""></div>
<div><img src="https://placeimg.com/640/480/people" alt=""></div>
</div>
<button aria-label="Previous" class="glider-prev">«</button>
<button aria-label="Next" class="glider-next">»</button>
<div role="tablist" class="dots"></div>
</div>
<script src="js/glider.min.js"></script>
<script>
new Glider(document.querySelector('.glider'), {
slidesToShow: 5,
slidesToScroll: 1,
draggable: true,
dots: '.dots',
arrows: {
prev: '.glider-prev',
next: '.glider-next'
}
});
</script>
</body>
</html>
TYPED JS
<!DOCTYPE html>
<html lang="en">
<body>
<main>
<h1>Reparación de <br><span class="typed"></span></h1>
</main>
<script src="js/typed.js"></script>
<script>
const typed = new Typed('.typed', {
strings: [
'<i class="mascota">Computadoras</i>',
'<i class="mascota">Laptops</i>',
'<i class="mascota">Celulares</i>'
],
//stringsElement: '#cadenas-texto', // ID del elemento que contiene cadenas de texto a mostrar.
typeSpeed: 75, // Velocidad en mlisegundos para poner una letra,
startDelay: 300, // Tiempo de retraso en iniciar la animacion. Aplica tambien cuando termina y vuelve a iniciar,
backSpeed: 75, // Velocidad en milisegundos para borrrar una letra,
smartBackspace: true, // Eliminar solamente las palabras que sean nuevas en una cadena de texto.
shuffle: false, // Alterar el orden en el que escribe las palabras.
backDelay: 1500, // Tiempo de espera despues de que termina de escribir una palabra.
loop: true, // Repetir el array de strings
loopCount: false, // Cantidad de veces a repetir el array. false = infinite
showCursor: true, // Mostrar cursor palpitanto
cursorChar: '|', // Caracter para el cursor
contentType: 'html', // 'html' o 'null' para texto sin formato
});
</script>
</body>
</html>
FULLPAGE JS
FullPage.js es
una
librería que nos permite
crear paginas web de pantallas completas.
Descargar .CSS y .JS
Descargar .CSS y .JS
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/fullpage.min.css">
</head>
<body>
<div id="fullpage">
<div class="section uno">Sección 1</div>
<div class="section dos">Sección 2</div>
<div class="section tres">Sección 3</div>
</div>
<script src="js/fullpage.min.js"></script>
<script>
new fullpage('#fullpage', {
autoScrolling: true, // Se activa el scroll.
fitToSection: false, // Acomoda el scroll automaticamente para que la seccion se muestre en pantalla.
fitToSectionDelay: 300, // Delay antes de acomodar la seccion automaticamente.
easing: 'easeInOutCubic', // Funcion de tiempo de la animacion.
scrollingSpeed: 700, // Velocidad del scroll. Valores: en milisegundos.
css3: true, // Si usara CSS3 o javascript.
easingcss3: 'ease-out', // Curva de velocidad del efecto.
loopBottom: false, // Regresa a la primera seccion siempre y cuando se ya haya llegado a la ultima sección y el ususario siga scrolleando.
navigation: true, // Muesta la barra de navegación.
menu: '#menu', // Menu de navegación.
anchors: ['inicio', 'productos', 'contacto'], // Anclas, las usamos para identificar cada seccion y poder acceder a ellas con el menu.
navigationTooltips: ['Inicio', 'Productos', 'Contacto'], // Tooltips que mostrara por cada boton.
showActiveTooltip: false, // Mostrar tooltip activa.
sectionsColor: ['#E74C3C', '#3498DB', '#2ECC71'], // Color de fondo de cada seccion.
verticalCentered: true, // Si alineara de forma vertical los contenidos de cada seccion.
});
</script>
</body>
</html>
SIMPLYCOUNTDOWN JS
SimplyCountDown.js es
una
librería que nos permite
crear una cuenta regresiva.
Descargar archivos útiles
Descargar archivos útiles
<!DOCTYPE html>
<html lang="en">
<body>
<div id="contador"></div>
<section class="contenido">
<p>lorem 1000</p>
</section>
<script src="js/simplyCountdown.min.js"></script>
<script>
simplyCountdown('#contador', {
year: 2021, // required
month: 1, // required
day: 21, // required
hours: 1, // Default is 0 [0-23] integer
minutes: 12, // Default is 0 [0-59] integer
seconds: 30, // Default is 0 [0-59] integer
words: { //words displayed into the countdown
days: 'dia',
hours: 'hora',
minutes: 'minuto',
seconds: 'segundo',
pluralLetter: 's'
},
plural: true, //use plurals
inline: false, //set to true to get an inline basic countdown like : 24 days, 4 hours, 2 minutes, 5 seconds
inlineClass: 'simply-countdown-inline', //inline css span class in case of inline = true
// in case of inline set to false
enableUtc: false,
onEnd: function () {
/* function cuando finalize */
let con = document.querySelector(".contenido");
con.style.display = "block";
return;
},
refresh: 1000, //default refresh every 1s
sectionClass: 'simply-section', //section css class
amountClass: 'simply-amount', // amount css class
wordClass: 'simply-word', // word css class
zeroPad: false,
countUp: false, // enable count up if set to true
});
</script>
</body>
</html>
SWEETALERT2 JS
SweetAlter2.js es una
librería que nos permite
crear notificaciones de alertas totalmente hermosos y editables.
Descargar archivos útiles
Descargar archivos útiles
<!DOCTYPE html>
<html lang="en">
<body>
<script src="js/sweetalert2.js"></script>
<script>
Swal.fire({
title: 'Puedes ver mas ejemplos en la página oficial'
})
</script>
</body>
</html>
FANCYBOX JS
FancyBox.js es una
librería que nos permite
mostrar imágenes, contenido html y multimedia en una "caja de luz" estilo Mac que
flota sobre la
página web.
Jquery
Descargar archivos útiles
Jquery
Descargar archivos útiles
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/jquery.fancybox.min.css">
</head>
<body>
<div class="texto img-conexion wrapper">
<a rel="hover" href="https://placeimg.com/640/480/animals" data-fancybox="gallery" data-caption="descripcion">
<img src="https://placeimg.com/640/480/animals" alt="">
</a>
<a rel="hover" href="https://placeimg.com/640/480/arch" data-fancybox="gallery" data-caption="descripcion">
<img src="https://placeimg.com/640/480/arch" alt="">
</a>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.fancybox.min.js"></script>
<script>
$("[data-fancybox]").fancybox({
animationEffect: "slide",
transitionEffect: "circular",
loop: true,
buttons: [
"zoom",
"share",
"slideShow",
"fullScreen",
"download",
"thumbs",
"close"
]
})
</script>
</body>
</html>
TOASTR
ToastR es una
biblioteca de Javascript para notificaciones sin bloqueo. Se requiere jQuery. El objetivo es
crear una biblioteca central simple que se pueda personalizar y ampliar.
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script>
//success - error- warning - info
toastr.info('Habitacion registrado correctamente', 'REGISTRADO', {
"positionClass": "toast-top-right"
});
</script>
</body>
PNOTIFY
<head>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" />
<!-- PNotify -->
<link href="css/pnotify.css" rel="stylesheet" />
<link href="css/pnotify.buttons.css" rel="stylesheet" />
<!-- Custom Theme Style -->
<link href="css/custom.min.css" rel="stylesheet" />
<!-- SCRIPTS PARA NOTIFICACION -->
<!-- jQuery -->
<script src="js/jquery.min.js">
</script>
<!-- PNotify -->
<script src="js/pnotify.js">
</script>
<script src="js/pnotify.buttons.js">
</script>
</head>
<body style="background:white">
<script>
//success - error- warning - info
$(function notificacion() {
new PNotify({
title: "REGISTRADO",
type: "success",
text: "Usuario registrado correctamente",
styling: "bootstrap3"
});
});
</script>
</body>