El complemento jQuery pagePiling.js es una característica rica disponible para los programadores para apilar más de una sección de diseño, una sobre la otra, y acceder a cada página por URL o desplazamiento del mouse o navegación con viñetas laterales. Esta función proporciona todo tipo de navegaciones verticales, horizontales y laterales suaves a los enlaces de anclaje de destino. También administra funciones de devolución de llamada, fondos de video y velocidades de desplazamiento. Solo cubriremos algunos de ellos en los siguientes ejemplos.
Nota: descargue los siguientes archivos de biblioteca del complemento pagePiling.js y guárdelos en su carpeta de trabajo para incluirlos en sus códigos. Descargue el archivo «example.css» desde este enlace.
Enlaces para el complemento jQuery pagePiling.js:
<link href=”jquery.pagepiling.css” rel=”stylesheet” type=”text/css”/>
<link href=”examples.css” rel=”stylesheet” type=”text/css”/>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js”></script>
<script src=”jquery.pagepiling.min.js”></ guion>
Ejemplo 1: El siguiente ejemplo demuestra el funcionamiento básico del complemento pagePiling tal como está escrito en el código jQuery. Admite el desplazamiento interactivo de diferentes páginas de diseño web con imágenes de fondo. Las páginas también se pueden navegar a través de viñetas laterales en el lado derecho.
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<title>jQuery pagePiling plugin </title>
<meta name="Resource-type"
content="Document" />
<link rel="stylesheet" type="text/css"
href=
"http://fonts.googleapis.com/css?family=Lato:300, 400, 700" />
<link rel="stylesheet"
type="text/css"
href="jquery.pagepiling.css" />
<link rel="stylesheet"
type="text/css"
href="examples.css" />
<script src=
"http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script type="text/javascript"
src="jquery.pagepiling.min.js">
</script>
<script type="text/javascript">
var deleteLog = false;
$(document).ready(function() {
$('#pagepiling').pagepiling({
menu: '#menu',
anchors: ['page1', 'page2', 'page3'],
navigation: {
'textColor': '#f0f2f0',
'bulletsColor': '#ccc000',
'position': 'right',
'tooltips': ['Page 1', 'Page 2', 'Page 3', 'Page 4']
}
});
});
</script>
<style>
h1 {
font-size: 5em;
font-family: arial, helvetica;
color: #fff;
margin: 0;
padding: 0;
}
.section {
text-align: center;
}
#section1,
#section2,
#section3 {
background-size: cover;
}
#section1 {
background-image: url(images/background1.jpg);
}
#section2 {
background-image: url(images/background2.jpg);
padding: 6% 0 0 0;
}
#section3 {
background-image: url(images/background3.jpg);
padding: 6% 0 0 0;
}
#section3 h1 {
color: #000;
}
#section1 h1 {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
top: 30px;
color: #fff;
}
#section2 .intro {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
top: 30px;
}
#section2 h1,
#section2 p {
text-shadow: 1px 5px 20px #000;
}
#section3 h1,
#section3 p {
text-shadow: 1px 5px 20px #000;
color: #fff;
}
</style>
</head>
<body>
<ul id="menu">
<li data-menuanchor="page1"
class="active">
<a href="#page1">Home</a></li>
<li data-menuanchor="page2">
<a href="#page2">About</a></li>
<li data-menuanchor="page3">
<a href="#page3">jQuery</a></li>
</ul>
<div id="pagepiling">
<div class="section" id="section1">
<h1>GeeksForGeeks</h1>
</div>
<div class="section" id="section2">
<div class="intro">
<h1>GFG Backgrounds </h1>
<p>All pages with layouts!</p>
</div>
</div>
<div class="section" id="section3">
<div class="intro">
<h1>Learn Jquery </h1>
<p>Its fun learning plugins.</p>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: En el siguiente ejemplo, las funciones de bucle superior e inferior están habilitadas. Para esto, las propiedades loopTop y loopBottom se establecen en «verdadero» como se muestra en el código jQuery.
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<title>jQuery pagePiling plugin for Looping</title>
<meta name="Resource-type" content="Document" />
<link rel="stylesheet" type="text/css"
href="jquery.pagepiling.css" />
<link rel="stylesheet" type="text/css"
href="examples.css" />
<script src=
"http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script type="text/javascript" src="jquery.pagepiling.min.js">
</script>
<script type="text/javascript">
var deleteLog = false;
$(document).ready(function() {
$('#pagepilingDivID').pagepiling({
menu: '#menu',
anchors: ['page1', 'page2', 'page3'],
sectionsColor: [
'green', 'lime', 'forestgreen', 'darkgreen'],
loopTop: true,
loopBottom: true
});
});
</script>
</head>
<body>
<ul id="menu">
<li data-menuanchor="page1" class="active">
<a href="#page1">Home</a></li>
<li data-menuanchor="page2">
<a href="#page2">About</a></li>
<li data-menuanchor="page3">
<a href="#page3">Contact</a></li>
</ul>
<div id="pagepilingDivID">
<div class="section" id="section1">
<h1>GeeksForGeeks</h1>
<p>Looping through top and bottom is working.</p>
</div>
<div class="section" id="section2">
<div class="intro">
<h1>Page Piling in a Looping style</h1>
<p>To see the looping page piling feature,
just use the PgUp and PgDn scroll keys .</p>
</div>
</div>
<div class="section" id="section4">
<div class="intro">
<h1>Back to the first page after scrolling down.</h1>
<p>And it shows a looping feature, scrolling
down till the end gets back the first section.</p>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 3: En el siguiente ejemplo, el desplazamiento horizontal se habilita para las páginas configurando la dirección de la opción: ‘horizontal’ como se muestra en el código jQuery.
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<title>
jQuery pagePiling plugin for
Horizontal scroll
</title>
<link rel="stylesheet" type="text/css"
href="jquery.pagepiling.css" />
<link rel="stylesheet" type="text/css"
href="examples.css" />
<script src=
"http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script type="text/javascript"
src="jquery.pagepiling.min.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
$('#pagepilingDivID').pagepiling({
direction: 'horizontal',
menu: '#menu',
anchors: ['page1', 'page2', 'page3', 'page4'],
sectionsColor: [
'green', 'forestgreen', 'lime', 'white'],
navigation: {
'position': 'right',
'tooltips': [
'Page 1', 'Page 2', 'Page 3', 'Page 4']
},
});
});
</script>
<style>
#section1 img {
margin: 20px 0;
opacity: 0.7;
}
#colors2,
#colors3 {
position: absolute;
height: 150px;
width: 370px;
z-index: 1;
background-repeat: no-repeat;
left: 0;
margin: 0 auto;
right: 0;
}
#colors2 {
background-image: url(images/colors2.png);
top: 0;
}
#colors3 {
background-image: url(images/colors3.png);
bottom: 0;
}
</style>
</head>
<body>
<ul id="menu">
<li data-menuanchor="page1" class="active">
<a href="#page1">Home</a>
</li>
<li data-menuanchor="page2">
<a href="#page2">About</a>
</li>
<li data-menuanchor="page3">
<a href="#page3">Tutorials</a>
</li>
</ul>
<div id="pagepilingDivID">
<div class="section" id="section1">
<img src="images/background1.jpg"
alt="pagePiling" />
<br />
<h1>GFG Horizontal Scroll</h1>
<p>
pagePiling also provides
horizontal scrolling
</p>
</div>
<div class="section">
<div class="intro">
<h1>Highly flexible and configurable</h1>
<p>
Do the horizontal way of
scrolling and check!
</p>
</div>
</div>
<div class="section" id="section3">
<div class="intro">
<h1>Very interactive for users</h1>
<p>Great idea to include in websites</p>
</div>
</div>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA