El complemento jQuery Product Tour es un complemento de recorrido guiado ligero y receptivo para usuarios y programadores para ayudarlos a comprender el uso del producto o sitio web con instrucciones paso a paso. Es un complemento para implementar una guía de ayuda rápida y fácil para los usuarios finales. Ayuda a generar una visita guiada paso a paso personalizable y amigable para dispositivos móviles para aplicaciones web. Proporciona una versión de «prueba gratuita» del producto web para nuevos usuarios para recopilar más conocimientos sobre el producto.
Nota: descargue los siguientes archivos de biblioteca del complemento Tour del producto y guárdelos en su carpeta de trabajo para incluirlos en sus códigos. Los programadores pueden cambiar la ruta y los archivos CSS según los requisitos del proyecto.
Programa: El siguiente ejemplo demuestra el funcionamiento básico del complemento Tour del producto desarrollado con código CSS y javascript. La página HTML consta de una lista desordenada con elementos de lista. Cada elemento de la lista contiene un paso de la guía turística del producto junto con las clases del complemento que controla los atributos como el título, la descripción, las imágenes para móviles y la posición de la información sobre herramientas de cualquier paso.
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/modernizr.js"></script>
<title>jQuery Product tour plugin</title>
<style>
body {
text-align: center;
}
.height {
height: 10px;
}
</style>
</head>
<body background="images/geeksImage1.png">
<div class="height"></div><br />
<b>jQuery Product tour plugin</b>
<div class="cd-nugget-info">
<h1>GeeksforGeeks Product Tour</h1>
<button id="cd-tour-trigger" class="cd-btn">
Start GFG tour
</button>
</div>
<ul class="cd-tour-wrapper">
<li class="cd-single-step">
<span>Step 1</span>
<div class="cd-more-info bottom">
<h2><a href=
"https://www.geeksforgeeks.org/write-from-home-challenge-technical-content-writing-event-by-geeksforgeeks/">
Write From Home Challenge
</a>
</h2>
<p>
When the whole nation is on the verge
of lockdown due to COVID-19 pandemic
and all Geeks across the country have
to stay indoors, we at GeeksforGeeks
won’t let this outbreak to decrease
your productivity anyhow. And, with
the same concern, GeeksforGeeks is
coming up with the Write From Home
Challenge for you!
</p>
<img src=
"images/Participate-in-Write-From-Home-Challenge-By-GeeksforGeeks-1024x306.png"
alt="step 1">
</div>
</li> <!-- .cd-single-step -->
<li class="cd-single-step">
<span>Step 2</span>
<div class="cd-more-info top">
<h2><a href=
"https://www.geeksforgeeks.org/must-do-coding-questions-for-companies-like-amazon-microsoft-adobe/">
Must Do Coding Questions
</a>
</h2>
<p>
As the placement season is back so are we
to help you ace the interview. 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>
<img src="images/gfg4.jpg" alt="step 2">
</div>
</li> <!-- .cd-single-step -->
<li class="cd-single-step">
<span>Step 3</span>
<div class="cd-more-info right">
<h2><a href=
"https://www.geeksforgeeks.org/what-is-artificial-intelligence-as-a-service-aiaas-in-the-tech-industry/">
What is Artificial Intelligence
</a>
</h2>
<p>
Software as a service, Infrastructure as
a service, Platform as a service, etc.
are common services that everyone has
heard of in the tech world. But what
about Artificial Intelligence as a
service?! Most companies these days use
some sort of “as a service” to obtain
services for a fee so that they can focus
on their core business. But AIaaS is
relatively new and its emergence is due
to the rising popularity of Artificial
Intelligence in the IT industry.
</p>
<img src=
"images/What-is-Artificial-Intelligence-as-a-Service-AIaaS-in-the-Tech-Industry.png"
alt="step 3">
</div>
</li> <!-- .cd-single-step -->
</ul> <!-- .cd-tour-wrapper -->
<!-- used to create fake background app. -->
<div class="cd-app-screen"></div>
<div class="cd-cover-layer"></div>
<script src="js/jquery-2.1.4.js"></script>
<script src="js/jquery.mobile.min.js"></script>
<!-- jQuery resource library -->
<script src="js/main.js"></script>
</body>
</html>
Salida: 
Salida para móvil:
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA