j-Tour

jComponent 20 · jcomponent@20 component Ejemplo cargado con jComponent 20

Soporta flechas del teclado
Soporta clave tab
Soporta clave esc

IMPORTANTE: Coloque este componente en la parte inferior del elemento del cuerpo

Configuración:

escape {Booleano} posibilidad de alternar para ocultar el Tour con la clave esc (predeterminado: true)
skiptext {String} un texto del botón skip (predeterminado: Skip)
nexttext {String} un texto del botón next (predeterminado: Next)
backtext {String} un texto del botón back (predeterminado: Back)
endtext {String} un texto del botón end (predeterminado: End)
datasource {String} ruta a la fuente de datos
bghide {Número} posibilidad de alternar para ocultar el Tour haciendo clic en el fondo (predeterminado: false)
hide {String} ruta al método function(type) (tipo - 0: por RUTA (por ejemplo, nulo) 1: botón de finalizar 2: botón de saltar 3: tecla esc 4: haga clic en bg)

// datasource
var example = [
	{
		target: '.test1',
		title: 'My title 1',
		text: 'Message 1'
	},
	{
		target: '.test2',
		title: 'My title 2',
		text: 'Message with offset',
		offsetY: 10
	}
];

PATH es el recorrido real page

Úselo con <ui-component name="tour">. Cuando el componente aún no está cargado, jComponent lo descarga en el primer uso desde la dirección en DEF.fallback (la CDN Componentator de forma predeterminada). Autor: Denis Granec. Fuente: repositorio de componentes Componentator, licencia MIT.

example.html

<div class="row">
	<div class="col-md-8 col-md-offset-2">

		<h1 class="test1">My First Web Page</h1>

		<h2>Headings Are Great Fun</h2>
		<p>This is my first <b>paragraph</b> in my new <i>webpage</i>. This is going to be great. I am so excited I can hardly contain <b>myself</b>. Don't you just love paragraphs? I find them very useful.</p>

		<h2>Web Pages Are Exciting Too</h2>
		<p>Yes, that's right - web pages can be a lot of fun. Learning how to create web pages is easy and <b>entertaining</b>. This is my second <i>paragraph</i>. I hope you like it.</p>

		<a class="test7" href="https://www.totalavengers.com" target="_blank">Total Avengers</a>

		<ul class="test2">
			<li>Apples</li>
			<li>Bananas</li>
			<li>Pears</li>
			<li>Oranges</li>
			<li>Grapes</li>
		</ul>

		<blockquote  class="test7">"A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away."
		 - Saint Exupery</blockquote>

		<hr />

		<img class="test3" src="https://placegoat.com/300/380" />

		<div>This is a DIV container</div>
		<h1 class="test4">My First Web Page</h1>

		<h2>Headings Are Great Fun</h2>
		<p>This is my first <b>paragraph</b> in my new <i>webpage</i>. This is going to be great. I am so excited I can hardly contain <b>myself</b>. Don't you just love paragraphs? I find them very useful. </p>

		<h2>Web Pages Are Exciting Too</h2>
		<p class="test5">Yes, that's right - web pages can be a lot of fun. Learning how to create web pages is easy and <b>entertaining</b>. This is my second <i>paragraph</i>. I hope you like it.</p>

		<a href="https://www.totalavengers.com">Total Avengers</a>

		<ul>
			<li>Apples</li>
			<li>Bananas</li>
			<li>Pears</li>
			<li>Oranges</li>
			<li>Grapes</li>
		</ul>

		<blockquote>"A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away."
		 - Saint Exupery</blockquote>

		<hr />

		<img src="https://placegoat.com/300/380" />

		<div>This is a DIV container</div>
		<h1>My First Web Page</h1>

		<h2 class="test6">Headings Are Great Fun</h2>
		<p>This is my first <b>paragraph</b> in my new <i>webpage</i>. This is going to be great. I am so excited I can hardly contain <b>myself</b>. Don't you just love paragraphs? I find them very useful. </p>

		<h2>Web Pages Are Exciting Too</h2>
		<p>Yes, that's right - web pages can be a lot of fun. Learning how to create web pages is easy and <b>entertaining</b>. This is my second <i>paragraph</i>. I hope you like it.</p>

		<a href="https://www.totalavengers.com">Total Avengers</a>

		<ul>
			<li>Apples</li>
			<li>Bananas</li>
			<li>Pears</li>
			<li>Oranges</li>
			<li>Grapes</li>
		</ul>

		<blockquote>"A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away."
		 - Saint Exupery</blockquote>

		<hr />

		<img src="https://placegoat.com/300/380" />

		<div>This is a DIV container</div>
		<h1>My First Web Page</h1>

		<h2>Headings Are Great Fun</h2>
		<p>This is my first <b>paragraph</b> in my new <i>webpage</i>. This is going to be great. I am so excited I can hardly contain <b>myself</b>. Don't you just love paragraphs? I find them very useful. </p>

		<h2>Web Pages Are Exciting Too</h2>
		<p>Yes, that's right - web pages can be a lot of fun. Learning how to create web pages is easy and <b>entertaining</b>. This is my second <i>paragraph</i>. I hope you like it.</p>

		<a href="https://www.totalavengers.com">Total Avengers</a>

		<ul class="test8">
			<li>Apples</li>
			<li>Bananas</li>
			<li>Pears</li>
			<li>Oranges</li>
			<li>Grapes</li>
		</ul>

		<blockquote>"A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away."
		 - Saint Exupery</blockquote>

		<hr />

		<img src="https://placegoat.com/300/380" />
		<div class="test9">This is a DIV container</div>
	</div>
</div>


<ui-component name="tour" path="page" config="datasource:example"></ui-component>

<script>
	var example = [
		{
			target: '.test1',
			title: 'My title 1',
			text: 'Welcome on Componentator.com'
		},
		{
			target: '.test2',
			title: 'My title 2',
			text: 'Message with offset',
			offsetY: 10
		},
		{
			target: '.test3',
			title: 'My title 3',
			text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquet enim tortor at auctor urna. Id diam maecenas ultricies mi eget mauris pharetra et.'
		},
		{
			target: '.test4',
			title: 'My title 4',
			text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquet enim tortor at auctor urna. Id diam maecenas ultricies mi eget mauris pharetra et.'
		},
		{
			target: '.test5',
			title: 'My title 5',
			text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquet enim tortor at auctor urna. Id diam maecenas ultricies mi eget mauris pharetra et.'
		},
		{
			target: '.test6',
			title: 'My title 6',
			text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquet enim tortor at auctor urna. Id diam maecenas ultricies mi eget mauris pharetra et.'
		},
		{
			target: '.test7',
			title: 'My title 7',
			text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquet enim tortor at auctor urna. Id diam maecenas ultricies mi eget mauris pharetra et.'
		},
		{
			target: '.test8',
			title: 'My title 8',
			text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquet enim tortor at auctor urna. Id diam maecenas ultricies mi eget mauris pharetra et.'
		},
		{
			target: '.test9',
			title: 'My title 9',
			text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquet enim tortor at auctor urna. Id diam maecenas ultricies mi eget mauris pharetra et.'
		}
	];

	setTimeout(function() {
		SET('page', 0);
	}, 1000);
</script>