j-Selected

jComponent 20 · jcomponent@20 component Voorbeeld geladen met jComponent 20

De component kan een specifieke klasse aan een bepaald element instellen volgens de eenvoudige conditie.

Configuratie:

class {String} is een klasnaam voor het geselecteerde element (default: selected)
selector {String} is een jQuery selector (default: a)
attr {String} attribuut voor vergelijking (default: if en het betekent data-if)
attror {String} attribuut voor secundaire vergelijking (de standaard: or en het betekent data-or)
datasource {String} een route naar de gegevensbron voor de lijst van items
delay {Number} een vertraging voor rel-selectie van waarde (default: 50)

Gebruik:

Elk element is volgens de selector moeten worden gedefinieerd data-if Het werkt alleen met strings De waarden.

Gebruik het met <ui-component name="selected">Wanneer de component nog niet is geladen, jComponent Download het op eerste gebruik van het adres in DEF.fallback (De Componentator Schrijver: Peter Širka. bron: de Componentator Componenten repository, MIT licentie.

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>