Framework7 - Selezione intelligente
Descrizione
La selezione intelligente è un modo semplice per modificare le selezioni del modulo in pagine dinamiche utilizzando gruppi di caselle di controllo e ingressi radio.
Possiamo utilizzare la selezione intelligente in vari tipi come specificato nella tabella seguente:
| S.No | Tipo e descrizione |
|---|---|
| 1 | Layout selezione intelligente Il layout di selezione intelligente definisce una visualizzazione elenco all'interno dell'elemento di selezione utilizzando la classe di selezione intelligente . |
| 2 | Selezione intelligente con barra di ricerca La selezione intelligente cerca gli elementi utilizzando la barra di ricerca e la abilita impostando la classe data-searchbar su true. |
| 3 | Titolo della pagina personalizzato e testo del collegamento a ritroso È possibile impostare il titolo della pagina personalizzato e il collegamento a ritroso per la selezione intelligente utilizzando gli attributi data-page-title e data-back-text . |
| 4 | Apri in Popup La selezione intelligente può essere aperta come popup utilizzando l' attributo data-open-in per popup . |
| 5 | Apri in Picker La selezione intelligente può essere visualizzata come modale del selettore impostando l' attributo di apertura dei dati su selettore . |
| 6 | Icone, colori e immagini personalizzati È possibile definire un'icona, un colore o un'immagine personalizzata sulla selezione intelligente utilizzando rispettivamente gli attributi data-option-icon , data-option-color e data-option-image . |
| 7 | Selezione multipla e gruppo opt La selezione intelligente consente di utilizzare più opzioni di selezione e gruppo utilizzando gli attributi multiple e optgroup . |
| 8 | Selezione multipla e Maxlength La selezione intelligente consente di selezionare un numero limitato di elementi utilizzando l' attributo maxlength . |
Puoi avere altri tipi di selezione intelligente, che possono essere utilizzati in diversi scenari come elencato nella tabella seguente:
| S.No | Tipo e descrizione | Attributo |
|---|---|---|
| 1 | Close Smart Select On User Select È possibile chiudere la selezione intelligente quando l'utente seleziona un'opzione. |
data-back-on-select = "true" |
| 2 | Smart Select With Virtual List L'elenco virtuale può essere utilizzato con la selezione intelligente se hai molte opzioni. |
data-virtual-list = "true" |
| 3 | Smart Select Color Themes È possibile specificare i temi colore per modulo e barra di navigazione nella pagina di selezione intelligente. |
data-form-theme = "colore" data-navbar-theme = "color" |
| 4 | Set Smart Select Value By Option Text Il valore per la selezione intelligente può essere impostato utilizzando il valore dell'opzione. |
valore di selezione intelligente |
| 5 | Open Smart Select Using JavaScript È possibile aprire la selezione intelligente utilizzando il metodo JavaScript. |
myApp.smartSelectOpen (smartSelect)
|
| 6 | Adding Options Dynamically Puoi aggiungere opzioni dinamicamente alla selezione intelligente, anche se sono già aperte. |
myApp.smartSelectAddOption (seleziona, opzioneHTML, indice)
|