j-Directory

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

É um componente semelhante ao j-Suggestion, mas tem um design melhorado e suporta recursos mais úteis.

Singularidade
Trabalhando com toques
Apresentação - Modo escuro

IMPORTANT: por padrão, este componente torna um valor como texto da propriedade name.

Métodos:

Método: component.show(options)

options.element {Element/jQuery Element}
options.items {Array/String/Function} uma lista de itens (tipo String significa um link para a fonte de dados)
options.offsetX {Number} opcional, x offset (default: 0)
options.offsetY {Number} opcional, y offset (default: 0)
options.offsetWidth {Number} opcional, width offset (default: 0)
options.placeholder {String} opcional, um local para o campo de pesquisa
NEW options.height {Number} opcional, uma altura do recipiente (default: 180)
options.render {Function} opcional, uma função para renderização personalizada do item function(item, text) deve retornar HTML
options.custom {Boolean/String} opcional, permite a devolução de um valor não definido em options.items, padrão: false
options.minwidth {Number} opcional, uma largura mínima, padrão 200
options.maxwidth {Number} opcional, uma largura máxima, padrão infinite
options.callback(selected_item, element, iscustom, e) {Function} é desativado quando o usuário clique no item
options.key {String} opcional, um valor padrão de key para text (default: name)
options.empty {String} opcional, adiciona campo vazio
options.exclude {Function} opcional, pode excluir itens e deve devolver um boolean function(item) { return item.id !== 100 }
options.close {Function} opcional, pode determinar o fechamento do painel
options.search {Boolean/String} opcional, pode esconder o campo de pesquisa (default: true) ou {String} (nome chave) pode mapear um valor para a busca
options.selected {Object} opcional, pode conter um valor selecionado (default: undefined)
options.align {String} opcional, left (default), right ou center
options.position {String} opcional, top (default), bottom
options.raw {Boolean} opcional, esta opção impede a fuga de caracteres (em outras palavras: conteúdo HTML será permitido em rótulos de itens, padrão: false)
options.classname {String} opcional, uma classe de contêiner personalizada para todos os itens
Posicionamento absoluto funciona apenas se o options.element não for definido
- options.x {Number} posição absoluta X
- options.y {Number} posição absoluta e
options.checkbox {Boolean} opcional, permitindo caixas de verificação
options.checked {Array String} opcional, identificadores de itens verificados
- Objetivo para options.items {Function(q, next)}
- A chamada de volta só retorna os identificadores crus Array {String}
NEW options.template {String} opcional, um modelo personalizado Tangular por exemplo {{ name }} (default: null)
NEW options.fuzzy {Boolean} opcional, pode desativar a busca fuzzy (default: true)

Método: component.hide()

Configuração:

placeholder - um local para a entrada de pesquisa
create - um local para o rótulo Create (default: Create)

Áreas de item suportadas:

name {String} - Nome da etiqueta
template {String} opcional, um padrão personalizado de Tangular
classname {String} opcional, adiciona classes adicionais ao elemento <li>
disabled {Boolean} opcional, pode desativar o item
selected {Boolean} opcional, ele seleciona item

Formato através de Tangular:

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

Formato através da função personalizada:

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>';
};

Adicionar a classe custom:

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

Serviço de busca:


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);

Bom para saber:

se o checkboxes:true então o componente estende os itens adicionando um timestamp selectedts {Number} devido à ordem

Use-o com <ui-component name="directory">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>
	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>