# j-TabMenu

> j-TabMenu опции: клас, селектор, източник на данни, деактивиран, изпълнение, attr

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

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

- `class {String}` е факултативно име на клас за избрания елемент (предварително: `selected`)
- `selector {String}` опция, е jQuery селектор (предварително: `li`)
- `datasource {String}` опционален, пътят към източника на данни, съдържанието трябва да бъде шаблон Tangular
- `disabled {Boolean}` е опционален, може да деактивира клавишите
- `exec {String}` опционално, връзка към функцията (това ще бъде изпълнена, когато раздела се променя)
- `attr {String}` опционално, атрибут за получаване на таб идентификатор (дефолт: `id`)

Използвайте го с `<ui-component name="tabmenu">`Когато компонентът все още не е зареден, jComponent Изтегляне на първия адрес в `DEF.fallback` (След това Componentator Източник: Питър Шерка Componentator Съставни съставки, лиценз на MIT.

```html example.html
<h2>Static tabs</h2>

<ui-component name="tabmenu" path="tab">
	<ul>
		<li data-id="tab1">Tab 1</li>
		<li data-id="tab2">Tab 2</li>
		<li data-id="tab3">Tab 3</li>
	</ul>
</ui-component>

<ui-bind path="tab" config="show:value==='tab1'" class="block hidden">
	TAB 1 content
</ui-bind>
<ui-bind path="tab" config="show:value==='tab2'" class="block hidden">
	TAB 2 content
</ui-bind>
<ui-bind path="tab" config="show:value==='tab3'" class="block hidden">
	TAB 3 content
</ui-bind>

<br />

<h2>Dynamic tabs</h2>
<ui-component name="tabmenu" path="tab" config="datasource:tabs">
	<script type="text/html">
		<ul>
			{{ foreach m in value }}
			<li data-id="{{ m.id }}">{{ m.name }}</li>
			{{ end }}
		</ul>
	</script>
</ui-component>

<ui-bind path="tab" config="show:value==='tab1'" class="block hidden">
	Dynamic TAB 1 content
</ui-bind>
<ui-bind path="tab" config="show:value==='tab2'" class="block hidden">
	Dynamic TAB 2 content
</ui-bind>
<ui-bind path="tab" config="show:value==='tab3'" class="block hidden">
	Dynamic TAB 3 content
</ui-bind>

<script>
	var tab = 'tab1';
	var tabs = [{ name: 'Tab 1', id: 'tab1' }, { name: 'Tab2', id: 'tab2' }, { name: 'Tab 3', id: 'tab3' }];
</script>
```