j-Selected

jComponent 20 · jcomponent@20 component Exemple chargé avec jComponent 20

Le composant peut définir une classe spécifique à un élément donné selon la condition simple.

Configuration :

class {String} est un nom de classe pour l'élément sélectionné (par défaut : selected)
selector {String} est un sélecteur jQuery (par défaut : a)
Atribut attr {String} pour la comparaison (defaut: if et cela signifie data-if)
Atribut attror {String} pour la comparaison secondaire (defaut: or et cela signifie data-or)
datasource {String} un chemin vers la source de données pour la liste des articles
delay {Number} un retard pour la sélection rel de valeur (defaut: 50)

Utilisation :

Chaque élément nés selon le selector doit avoir un attribut défini de data-if et fonctionne uniquement avec les valeurs de strings.

Utilisez-le avec <ui-component name="selected">. Lorsque le composant n'est pas encore chargé, jComponent le télécharge lors de la première utilisation depuis l'adresse dans DEF.fallback (le CDN Componentator par défaut). Auteur : Peter Širka. Source : le référentiel de composants Componentator, licence 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>