j-Selected

jComponent 20 · jcomponent@20 component Esempio caricato con jComponent 20

Il componente può impostare una classe specifica a un elemento specifico in base alla semplice condizione.

Configurazione:

class {String} è un nome di classe per l'elemento selezionato (default: selected)
selector {String} è un selettore jQuery (default: a)
Attribuzione di attr {String} per la confrontazione (default: if e significa data-if)
Attribuzione di attror {String} per la comparsa secondaria (default: or e significa data-or)
datasource {String} un percorso per la fonte di dati per l'elenco degli articoli
delay {Number} un ritardo per la selezione del valore (default: 50)

Utilizzo:

Ogni elemento di base secondo il selector Deve essere definito data-if funziona solo con strings dei valori.

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

example.html

<style>
	.selected { font-weight: bold; }
	nav a { display: block; }
</style>

<nav>
	<ui-component name="selected" path="common.page">
		<a href="#users" data-if="users">Users</a>
		<a href="#products" data-if="products">Products</a>
		<a href="#settings" data-if="settings">Settings</a>
	</ui-component>
</nav>

<script>

	SET('common.page', 'products');

	window.onhashchange = function() {
		SET('common.page', location.hash.substring(1));
	};

</script>