jQuery proporciona un complemento de navegación de puntos verticales hermoso, liviano, de una sola página y receptivo para programadores que ayudan a navegar o desplazarse por páginas web largas. El complemento identifica el número de páginas o secciones en el sitio web y, en consecuencia, agrega puntos para hacer clic para desplazarse por los contenidos correspondientes.
Descargue el complemento de navegación Vertical Dot e incluya las bibliotecas de archivos necesarias en su carpeta de trabajo, como se muestra en la sección principal de los siguientes códigos.
Enlace de descarga : https://github.com/maiamachine/jquery-vertical-dot-navigation
Ejemplo 1: En el siguiente ejemplo, la llamada muy básica del método verticalDotNav() se muestra usando jQuery. Se proporcionan diferentes contenidos de página en diferentes secciones de la página HTML.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Vertical Dot Navigation Plugin</title>
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="styles.css">
<!--required stylesheet file of plugin-->
<link rel="stylesheet"
href="jq-vertical-dot-navigation.css">
<!--Required javascript file dependencies-->
<script src="jquery.min.js"></script>
<script src="jq-vertical-dot-nav.js"></script>
<script>
$(document).ready(function(){
$('section').verticalDotNav();
})
</script>
</head>
<body>
<section id="section-1" class="row">
<div class="col-xs-10 col-xs-offset-1">
<h3>jQuery Vertical Dot Navigation Plugin</h3>
</div>
</section>
<section id="section-2" class="row">
<div class="col-xs-8 col-xs-offset-2 col-md-6 col-md-offset-3">
<p>Amazon… “Hire and Develop the Best”.
One of the Big Four Tech Companies founder
Jeff Bezos is now the richest person on this planet.
Jeff was an engineer and 25 years ago when Jeff pitched
his idea of starting a business online to his boss
David (Founder of DE Shaw) it was rejected indirectly.
Well, Jeff quit the job and started Amazon from his
garage in Seattle Washington.Today the company is making
billions of dollars and fulfilling the customer’s
needs worldwide in various areas.</p>
</div>
</section>
<section id="section-3" class="row">
<div class="col-xs-10 col-xs-offset-1 col-md-6 col-md-offset-3">
<p>As the placement season is back so are we to help you ace
the interview. We have selected some most commonly asked and
must do practice problems for you. You can also take part in our
mock placement contests which will help you learn different topics and
practice at the same time, simulating the feeling of a real placement
test environment.</p>
</div>
</section>
</body>
</html>
Producción:
Ejemplo 2: en el siguiente ejemplo, varias opciones del método verticalDotNav() se configuran como se muestra a continuación. Solo observe la alineación de los puntos y la velocidad de desplazamiento en la salida de la imagen y, en consecuencia, personalice su código según el requisito.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Vertical Dot Navigation Plugin</title>
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="styles.css">
<!--required stylesheet file of plugin-->
<link rel="stylesheet" href="jq-vertical-dot-navigation.css">
<!--Required javascript file dependencies-->
<script src="jquery.min.js"></script>
<script src="jq-vertical-dot-nav.js"></script>
<script>
$(document).ready(function(){
$('section').verticalDotNav({
align : "left", // Options are 'right' or 'left'
scroll_speed : 2500, // The time in milliseconds
dot_size: 30,
dot_style: 'circle', // Options are 'circle' or 'square'
dot_color: "#e9e9e9",
nav_color: "#000000"
});
})
</script>
</head>
<body>
<section id="section-1" class="row">
<div class="col-xs-10 col-xs-offset-1">
<h3>jQuery Vertical Dot Navigation Plugin</h3>
</div>
</section>
<section id="section-2" class="row">
<div class="col-xs-8 col-xs-offset-2 col-md-6 col-md-offset-3">
<p>Amazon… “Hire and Develop the Best”. One of the Big Four
Tech Companies founder Jeff Bezos is now the richest person
on this planet.
Jeff was an engineer and 25 years ago when Jeff pitched
his idea of starting a business online to his boss David
(Founder of DE Shaw)
it was rejected indirectly. Well, Jeff quit the job and
started Amazon from his garage in Seattle Washington.
Today the company is making billions of dollars and
fulfilling the customer’s needs worldwide in various areas.</p>
</div>
</section>
<section id="section-3" class="row">
<div class="col-xs-10 col-xs-offset-1 col-md-6 col-md-offset-3">
<p> As the placement season is back so are we to help you ace
the interview.
We have selected some most commonly asked and must do
practice problems for you.
You can also take part in our mock placement contests
which will help you learn different topics and practice at the same time,
simulating the feeling of a real placement test environment.</p>
</div>
</section>
</body>
</html>
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA