# j-Tour

> Важно: Вземете този компонент в долната част на елемента на тялото

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

- Поддържа клавиатурата
- Поддръжка на `tab` ключ
- Поддръжка на `esc` ключ

__Важно: Вземете този компонент в долната част на елемента на тялото__

__Конфигуриране__:

- `escape` {Boolean} допуска възможността за скриване на Tour с ключ `esc` (дефолт: `true`)
- `skiptext` {String} текст на бутона `skip` (предварително: `Skip`)
- `nexttext` {String} текст на бутона `next` (предварително: `Next`)
- `backtext` {String} текст на бутона `back` (предварително: `Back`)
- `endtext` {String} текст на бутона `end` (предварително: `End`)
- `datasource` {String} път към източника на данни
- `bghide` {No} допуска възможността да се скрие Tour, като кликнете върху фона (предварително: `false`)
- `hide` {String} път към метода `function(type)` (тип - 0: от PATH (напр. нула) 1: крайния бутон 2: прескочи 3: `esc` ключ 4: кликнете върху 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
	}
];
```

__ПАТХ е истинският тур на `page`__

Използвайте го с `<ui-component name="tour">`Когато компонентът все още не е зареден, jComponent Изтегляне на първия адрес в `DEF.fallback` (След това Componentator Автор: Денис Гран. източник: The Componentator Съставни съставки, лиценз на 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>
```