j-TabMenu

jComponent 20 · jcomponent@20 component Παράδειγμα φορτωμένο με jComponent 20

ΕΠΙΤΡΟΦΗ:

Το 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 Συγγραφέας: Peter Širka. πηγή: το Componentator Ετικέτες Αξιολόγηση, MIT άδεια.

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>