j-KeySelection

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

Ce composant permet à l'utilisateur de sélectionner certains éléments à l'aide des touches haut/bas et de confirmer la sélection par la touche enter.

prend en charge le défilement automatique

Configuration

selectoritem {String} un sélecteur pour parcourir les éléments (par défaut : .item)
selector {String} un sélecteur par défaut pour capturer les clés (par défaut : input)
class {String} une classe de sélection (par défaut : selected)
autoselect {Boolean}, il doit sélectionner le premier élément (par défaut : true)
autoscroll {Boolean} active/désactive le défilement automatique (par défaut : true)
exec {String} un lien vers le function(jqueryel), évalué par la clé enter (facultatif, sinon déclenchera l'événement click)
delay {Number} un délai pour la sélection automatique de la première valeur
datasource {String} un lien vers la source de données qui peut vous aider avec une liste dynamique

Utilisez-le avec <ui-component name="keyselection">. 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 { background: #F0F0F0; }
	.item { line-height: 24px; padding: 0 10px; border-top: 1px solid #E0E0E0; font-size: 12px; }
</style>

<ui-component name="keyselection" config="exec:confirmselection">
	<div class="m"><input type="text" placeholder="Press UP or DOWN key" style="width:300px" /></div>
	<div class="items">
		<div class="item" data-id="1">1</div>
		<div class="item" data-id="1">2</div>
		<div class="item" data-id="1">3</div>
		<div class="item" data-id="1">4</div>
		<div class="item" data-id="1">5</div>
	</div>
</ui-component>

<script>

	function confirmselection(el) {
		console.log('selected', el);
	}

</script>