# j-Tour

> Importante: mettere questo componente sul fondo dell'elemento corporeo

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: it
Content-SHA256: e708453b99a688f3d622d4296eba0ba0d5322377abc870bb918c9aeafb555d06
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

- Supporto per il keyboard
- Supporto di `tab`
- Supporto di `esc`

__Importante: mettere questo componente sul fondo dell'elemento corporeo__

__Configurazione__:

- `escape` {Boolean} toggle possibilità di nascondere Tour con la chiave `esc` (default: `true`)
- `skiptext` {String} un testo del pulsante `skip` (default: `Skip`)
- `nexttext` {String} un testo del pulsante `next` (default: `Next`)
- `backtext` {String} un testo del pulsante `back` (default: `Back`)
- `endtext` {String} un testo del pulsante `end` (default: `End`)
- `datasource` {String} percorso verso la fonte dei dati
- `bghide` {Numero} toggle la possibilità di nascondere il Tour cliccando sullo sfondo (default: `false`)
- `hide` {String} percorso al metodo `function(type)` (tipo - 0: da PATH (ad esempio null) 1: pulsante finale 2: scappare 3: `esc` chiave 4: clicca su bg)

```javascript
// 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 è il tour reale `page`__

Utilizzare con `<ui-component name="tour">`Quando il componente non è ancora caricato, jComponent Scarica il codice in prima utilizzazione dall'indirizzo `DEF.fallback` (Il Componentator La storia di Denis Granec. fonte: il Componentator Ristorante dei componenti, licenza MIT.

```html 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>
```