j-Selected

jComponent 20 · jcomponent@20 component Exempel laddat med jComponent 20

Komponenten kan ställa in en viss klass till ett visst element enligt det enkla villkoret.

Konfigurera:

class {String} är ett klassnamn för det valda elementet (default: selected)
selector {String} är en jQuery-selektor (default: a)
attr {String} attribut för jämförelse (default: if och det betyder data-if)
attror {String} för sekundär jämförelse (default: or och det betyder data-or)
datasource {String} en väg till datakälla för listan över objekt
delay {Number} en försening för rel-val av värde (default: 50)

Användning:

Varje nyckelelement enligt selector måste ha definierad data-if attribut. det fungerar endast med strings värden.

Använd den med <ui-component name="selected">När komponenten ännu inte är laddad, jComponent Ladda ner den första gången från adressen i DEF.fallback (en av Componentator Författare: Peter Širka. källa: The Componentator Komponenterna i lager, MIT licens.

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>