Framework7 - Seletor

Descrição

O selecionador se parece com o selecionador nativo do iOS e é um componente poderoso que permite selecionar qualquer valor da lista e também é usado para criar selecionadores de sobreposição personalizados. Você pode usar o Seletor como componente embutido ou como sobreposição. O seletor de sobreposição será automaticamente convertido para Popover em tablets (iPad).

Usando o seguinte método do App, você pode criar e inicializar o método JavaScript -

myApp.picker(parameters)

Onde os parâmetros são objetos necessários, usados para inicializar a instância do selecionador e é um método obrigatório.

Parâmetros de seleção

A tabela a seguir especifica os parâmetros disponíveis nos selecionadores -

S.Não	Parâmetros e descrição	Tipo	Padrão
1	container String com seletor CSS ou HTMLElement usado para gerar Seletor HTML para seletores embutidos.	string ou HTMLElement	-
2	input O elemento de entrada relacionado colocado com a string com seletor CSS ou HTMLElement.	string ou HTMLElement	-
3	scrollToInput É usado para rolar a janela de visualização (conteúdo da página) de entrada, sempre que o seletor é aberto.	boleano	verdadeiro
4	inputReadOnly Usado para definir o atributo "somente leitura" na entrada especificada.	boleano	verdadeiro
5	convertToPopover É usado para converter o modal selecionador para Popover em telas grandes como o iPad.	boleano	verdadeiro
6	onlyOnPopover Você pode abrir o seletor no Popover, ativando-o.	boleano	verdadeiro
7	cssClass Para selecionar modal, você pode usar o nome de classe CSS adicional.	corda	-
8	closeByOutsideClick Você pode fechar o seletor clicando fora do seletor ou elemento de entrada, ativando o método.	boleano	falso
9	toolbar É usado para habilitar a barra de ferramentas modal do selecionador.	boleano	verdadeiro
10	toolbarCloseText Usado para o botão Concluído / Fechar da barra de ferramentas.	corda	'Feito'
11	toolbarTemplate É o modelo HTML da barra de ferramentas, por padrão é uma string HTML com o seguinte modelo - `<div class = "toolbar"> <div class = "toolbar-inner"> <div class = "left"></div> <div class = "right"> <a href = "#" class = "link close-picker"> {{closeText}} </a> </div> </div> </div>`	corda	-

Parâmetros de seleção específicos

A tabela a seguir lista os parâmetros de seletor específicos disponíveis -

S.Não	Parâmetros e descrição	Tipo	Padrão
1	rotateEffect Ele permite o efeito de rotação 3D no seletor.	boleano	falso
2	momentumRatio Quando você solta o seletor após um toque e movimento rápido, ele produz mais impulso.	número	7
3	updateValuesOnMomentum Usado para atualizar selecionadores e valores de entrada durante o momento.	boleano	falso
4	updateValuesOnTouchmove Usado para atualizar selecionadores e valores de entrada durante o movimento de toque.	boleano	verdadeiro
5	value A matriz tem seus valores iniciais e também cada item da matriz representa o valor da coluna relacionada.	matriz	-
6	formatValue A função é usada para formatar o valor de entrada e deve retornar um valor de string novo / formatado. Os valores e displayValues são matrizes de colunas relacionadas.	função (p, valores, displayValues)	-
7	cols Cada item da matriz representa um objeto com parâmetros de coluna.	matriz	-

Retornos de chamada de parâmetro do selecionador

A tabela a seguir mostra as listas de funções de retorno de chamada disponíveis nos selecionadores -

S.Não	Chamadas de retorno e descrição	Tipo	Padrão
1	onChange A função de retorno de chamada será executada sempre que o valor do seletor for alterado e os valores e displayValues forem matrizes de colunas relacionadas.	função (p, valores, displayValues)	-
2	onOpen A função de retorno de chamada será executada sempre que o seletor for aberto.	função (p)	-
3	onClose A função de retorno de chamada será executada sempre que o seletor for fechado.	função (p)	-

Parâmetros de coluna

No momento da configuração do Picker, precisamos passar o parâmetro cols . É representado como uma matriz, onde cada item é um objeto com parâmetros de coluna -

S.Não	Parâmetros e descrição	Tipo	Padrão
1	values Você pode especificar os valores das colunas da string com uma matriz.	matriz	-
2	displayValues Possui array com valores de colunas de string e exibirá o valor do parâmetro de valores , quando não especificado.	matriz	-
3	cssClass O nome da classe CSS usado para definir no recipiente HTML da coluna.	corda	-
4	textAlign É usado para definir o alinhamento do texto dos valores da coluna e pode ser "esquerda", "centro" ou "direita" .	corda	-
5	width A largura é calculada automaticamente, por padrão. Se você precisar corrigir as larguras das colunas no seletor com colunas dependentes que devem ser em px .	número	-
6	divider É usado para coluna que deve ser divisória visual, não tem nenhum valor.	boleano	falso
7	content É usado para especificar o divisor de coluna (divisor: verdadeiro) com o conteúdo da coluna.	corda	-

Parâmetro de retorno de chamada da coluna

S.Não	Chamadas de retorno e descrição	Tipo	Padrão
1	onChange Sempre que o valor da coluna mudar, a função de retorno de chamada será executada. O valor e displayValue representam o valor da coluna atual e displayValue .	função (p, valor, displayValue)	-

Propriedades do selecionador

A variável Picker tem muitas propriedades que são fornecidas na tabela a seguir -

S.Não	Propriedades e descrição
1	myPicker.params Você pode inicializar os parâmetros passados com o objeto.
2	myPicker.value O valor selecionado para cada coluna é representado por uma matriz de itens.
3	myPicker.displayValue O valor de exibição selecionado para cada coluna é representado por uma matriz de itens.
4	myPicker.opened Quando o seletor é aberto, ele define o valor verdadeiro .
5	myPicker.inline Quando o selecionador está embutido, ele define o valor verdadeiro .
6	myPicker.cols As colunas do Seletor têm seus próprios métodos e propriedades.
7	myPicker.container A instância Dom7 é usada para o recipiente HTML.

Métodos de seleção

A variável picker tem métodos úteis, que são fornecidos na tabela a seguir -

S.Não	Métodos e Descrição
1	myPicker.setValue(values, duration) Use para definir o novo valor do seletor. Os valores estão em array, onde cada item representa o valor de cada coluna. duração - é a duração da transição em ms.
2	myPicker.open() Use para abrir o Picker.
3	myPicker.close() Use para fechar o Picker.
4	myPicker.destroy() Use para destruir a instância do Picker e remover todos os eventos.

Propriedades da coluna

Cada coluna na matriz myPicker.cols também tem suas próprias propriedades úteis, que são fornecidas na tabela a seguir -

//Get first column
var col = myPicker.cols[0];

S.Não	Propriedades e descrição
1	col.container Você pode criar uma instância com o recipiente HTML da coluna.
2	col.items Você pode criar uma instância com elementos HTML de itens de coluna.
3	col.value Usado para selecionar o valor da coluna atual.
4	col.displayValue Usado para selecionar o valor da coluna atual de exibição.
5	col.activeIndex Forneça o número do índice atual, que é o item selecionado / ativo.

Métodos de Coluna

Os métodos de coluna úteis são fornecidos na tabela a seguir -

S.Não	Métodos e Descrição
1	col.setValue(value, duration) Usado para definir um novo valor para a coluna atual. O valor deve ser um novo valor e a duração é a duração da transição fornecida em ms.
2	col.replaceValues(values, displayValues) Usado para substituir os valores da coluna e displayValues por novos.

É usado para acessar a instância do Picker a partir de seu contêiner HTML, sempre que você inicializa o Picker como um Selecionador embutido.

var myPicker = $$('.picker-inline')[0].f7Picker;

Existem diferentes tipos de selecionadores, conforme especificado na tabela a seguir -

S.Não	Tipos e descrição de guias
1	Seletor com valor único É um componente poderoso que permite escolher qualquer valor da lista.
2	Dois valores e efeito de rotação 3D No seletor, você pode usar para o efeito de rotação 3D.
3	Valores Dependentes Os valores são dependentes uns dos outros para o elemento especificado.
4	Barra de Ferramentas Personalizada Você pode usar um ou mais seletores em uma única página para personalizar.
5	Selecionador Inline / Data-hora Você pode selecionar o número de valores no seletor embutido. Como a data tem data, mês, ano e hora tem horas, minutos, segundos.