j-Selected

jComponent 20 · jcomponent@20 component Exemplo carregado com jComponent 20

O componente pode definir uma classe específica para um elemento em função da condição simples.

Configuração:

class {String} é um nome de classe para o elemento selecionado (default: selected)
selector {String} é um seletor jQuery (default: a)
Atributo de attr {String} para comparação (default: if e significa data-if)
Atributo attror {String} para comparação secundária (default: or e significa data-or)
datasource {String} um caminho para a fonte de dados para uma lista de itens
delay {Number} um atraso para a seleção de rel (default: 50)

Uso:

Cada elemento é baseado em selector Deve ter definido data-if Apenas funciona com strings Os valores .

Use-o com <ui-component name="selected">Quando o componente ainda não está carregado, jComponent Descarrega-o no primeiro uso do endereço DEF.fallback (a partir do Componentator CDN por padrão). autor: Peter Širka. fonte: o Componentator Reserva de componentes, licença 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>