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.