# j-Tour

> Belangrijk: Plaats deze component aan de onderkant van het lichaam element

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

- Ondersteunt keyboard arms
- Ondersteunt `tab` sleutel
- Ondersteunt `esc` sleutel

__Belangrijk: Plaats deze component aan de onderkant van het lichaam element__

__Configuratie__:

- `escape` {Boolean} toggle kans om de tour te verbergen met `esc` De sleutel (de standaard) `true`)
- `skiptext` {String} een tekst van de `skip` knop (default: `Skip`)
- `nexttext` {String} een tekst van de `next` knop (default: `Next`)
- `backtext` {String} een tekst van de `back` knop (default: `Back`)
- `endtext` {String} een tekst van de `end` knop (default: `End`)
- `datasource` {String} pad naar gegevensbron
- `bghide` {Number} om de mogelijkheid te verbergen Tour door op de achtergrond te klikken (default: `false`)
- `hide` {String} pad naar methode `function(type)` (type - 0: door PATH (bijvoorbeeld null) 1: eindknop 2: skip knop 3: `esc` sleutel 4: klik op 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 is de werkelijke tour `page`__

Gebruik het met `<ui-component name="tour">`Wanneer de component nog niet is geladen, jComponent Download het op eerste gebruik van het adres in `DEF.fallback` (De Componentator CDN door standaard). auteur: Denis Granec. bron: de Componentator Componenten repository, MIT licentie.

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