j-Selected

jComponent 20 · jcomponent@20 component Example loaded with jComponent 20

The component can set a specific class to a specific element according to the simple condition.

Configuration:

class {String} is a class name for selected element (default: selected)
selector {String} is a jQuery selector (default: a)
attr {String} attribute for comparing (default: if and it means data-if)
attror {String} attribute for secondary comparing (default: or and it means data-or)
datasource {String} a path to data-source for list of items
delay {Number} a delay for rel-selecting of value (default: 50)

Usage:

Each nested element according to the selector must have defined data-if attribute. It works only with strings values.

Use it with <ui-component name="selected">. When the component is not loaded yet, jComponent downloads it on first use from the address in DEF.fallback (the Componentator CDN by default). Author: Peter Širka. Source: the Componentator components repository, MIT license.

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>