j-Directory

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

Il s'agit d'un composant similaire au j-Suggestion, mais il a une conception améliorée et prend en charge des fonctionnalités plus pratiques.

singleton
fonctionne avec des touches
prend en charge le mode sombre

IMPORTANT: par défaut, ce composant rend une valeur en tant que texte de la propriété name.

Méthodes :

Méthode : component.show(options)

options.element {Element/jQuery Element}
options.items {Array/String/Function} une liste d'articles (type String signifie un lien vers la source de données)
options.offsetX {Number} optionnel, x offset (défaut: 0)
options.offsetY {Number} optionnel, y offset (défaut: 0)
options.offsetWidth {Number} optionnel, width offset (défaut: 0)
options.placeholder {String} optionnel, un locataire pour le champ de recherche
NEW options.height {Number} optionnel, une hauteur du conteneur (defaut: 180)
options.render {Function} facultatif, une fonction de rendement personnalisé de l'article function(item, text) doit retourner HTML
options.custom {Boolean/String} facultatif, permettant de retourner une valeur non définie dans options.items, par défaut: false
options.minwidth {Number} optionnel, une largeur minimale, standard 200
options.maxwidth {Number} optionnel, largeur maximale, standard infinite
options.callback(selected_item, element, iscustom, e) {Function} est déclenché lorsque l'utilisateur clique sur l'élément
options.key {String} en option, un key par défaut pour la valeur text (par défaut : name)
options.empty {String} optionnel, ajoute un champ vide
options.exclude {Function} optionnel, peut exclure les articles et doit retourner un boolean function(item) { return item.id !== 100 }
options.close {Function} optionnel, peut déterminer la fermeture du panneau
options.search {Boolean/String} optionnel, peut cacher le champ de recherche (defaut: true) ou {String} (nom clé) peut cartographier une valeur pour la recherche
options.selected {Object} optionnel, peut contenir une valeur sélectionnée (defaut: undefined)
options.align {String} optionnel, left (defaut), right ou center
options.position {String} optionnel, top (defaut), bottom
options.raw {Boolean} facultatif, cette option empêche l'échappement des caractères (d'autres termes: le contenu HTML sera autorisé dans les étiquettes d'articles, par défaut: false)
options.classname {String} optionnel, une classe de conteneur personnalisée pour tous les articles
La positionnation absolue ne fonctionne que si le options.element n'est pas défini
- options.x {Number} position absolue X
- options.y {Number} Position absolue
options.checkbox {Boolean} optionnel, permettant les boîtes de vérification
options.checked {Array String} optionnel, identifiants d'objets vérifiés
- Objectif pour options.items {Function(q, next)}
- La récupération de l'appel ne remet que les identifiants Array {String}
NEW options.template {String} optionnel, un modèle Tangular personnalisé par exemple {{ name }} (defaut: null)
NEW options.fuzzy {Boolean} optionnel, il peut désactiver la recherche fuzzy (defaut: true)

Méthode : component.hide()

Configuration :

placeholder - un locataire pour l'entrée de recherche
create - un locataire pour l'étiquette Create (défaut: Create)

Les champs d'objets soutenus:

name {String} un nom d'étiquette
template {String} optionnel, un modèle personnalisé Tangular
classname {String} optionnel, ajoute des classes supplémentaires à l'élément <li>
disabled {Boolean} optionnel, il peut désactiver l'élément
selected {Boolean} optionnel, il sélectionne l'élément

Formatisation par Tangular:

var opt = {};
opt.items = [];
opt.push({ name: 'Total.js', template: '<b>{{ name }}</b>' });

Formatage via une fonction personnalisée :

var opt = {};
opt.items = [];
opt.push({ name: 'Total.js' });
opt.push({ name: 'Express.js' });
opt.push({ name: 'Koa.js' });
opt.render = function(item, name) {
	return '<b>' + name + '</b>';
};

Ajout d'une classe personnalisée :

var opt = {};
opt.items = [];
opt.push({ name: 'Total.js', classname: 'your_class_name' });

Recherche côté serveur :


var opt = {};

opt.element = your_element;

opt.items = function(search, next) {
	next([{ name: 'Item 1' }, { name: 'Item 2' }]);
};

opt.callback = function(selected) {
	console.log(selected);
};

SETTER('directory/show', opt);

Bon à savoir :

si checkboxes:true alors le composant étend les éléments en ajoutant un horodatage selectedts {Number} en raison de la commande

Utilisez-le avec <ui-component name="directory">. 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>
	body { background-color: #F0F0F0; }
</style>

<ui-component name="directory" config="placeholder:Search ..."></ui-component>

<div class="container">
	<div><a href="javascript:void(0)" data-name="classic">Open directory - classic</a></div>
	<div><a href="javascript:void(0)" data-name="checkboxes">Open directory - checkboxes</a></div>
</div>

<script>
	$(document).on('click', 'a', function() {


		var opt = {};
		opt.element = $(this);

		if (opt.element.attrd('name') === 'checkboxes') {
			opt.checkbox = true;
			opt.items = [{ name: 'Total.js', selected: true }, { name: 'Express.js', selected: true }, { name: 'Meteor.js' }, { name: 'Koa.js' }, { name: 'ASP.NET' }, { name: 'PHP' }, { name: 'Python' }, { name: 'Node.js' }];
		} else
			opt.items = [{ name: 'Total.js', template: '<b>{{ name }}</b>' }, { name: 'Express.js' }, { name: 'Meteor.js' }, { name: 'Koa.js' }, { name: 'ASP.NET' }, { name: 'PHP' }, { name: 'Python' }, { name: 'Node.js' }];

		opt.callback = function(value) {
			if (opt.checkbox)
				console.log('SELECTED:', value);
			else
				console.log('CLICKED:', value);
		};

		SETTER('directory/show', opt);
	});
</script>