Framework7 - Picker

Deskripsi

Alat pilih terlihat seperti alat pilih asli iOS dan merupakan komponen yang kuat yang memungkinkan Anda memilih nilai apa pun dari daftar dan juga digunakan untuk membuat alat pilih hamparan khusus. Anda dapat menggunakan Picker sebagai komponen sebaris atau sebagai hamparan. Alat pilih overlay akan secara otomatis diubah menjadi Popover di tablet (iPad).

Dengan menggunakan metode App berikut, Anda dapat membuat dan menginisialisasi metode JavaScript -

myApp.picker(parameters)

Di mana parameter adalah objek yang diperlukan, digunakan untuk menginisialisasi instance picker dan itu adalah metode yang diperlukan.

Parameter Alat Pilih

Tabel berikut menentukan parameter yang tersedia di alat pilih -

S.No	Parameter & Deskripsi	Tipe	Default
1	container String dengan pemilih CSS atau HTMLElement digunakan untuk menghasilkan HTML Picker untuk alat pilih sebaris.	string atau HTMLElement	-
2	input Elemen input terkait ditempatkan dengan string dengan pemilih CSS atau HTMLElement.	string atau HTMLElement	-
3	scrollToInput Ini digunakan untuk menggulir viewport (konten halaman) input, setiap kali picker dibuka.	boolean	benar
4	inputReadOnly Digunakan untuk menyetel atribut "hanya-baca" pada masukan yang ditentukan.	boolean	benar
5	convertToPopover Ini digunakan untuk mengubah modal pemetik menjadi Popover di layar besar seperti iPad.	boolean	benar
6	onlyOnPopover Anda dapat membuka alat pilih di Popover dengan mengaktifkannya.	boolean	benar
7	cssClass Untuk modal pemilih, Anda dapat menggunakan nama kelas CSS tambahan.	tali	-
8	closeByOutsideClick Anda dapat menutup alat pilih dengan mengklik di luar alat pilih atau elemen masukan dengan mengaktifkan metode.	boolean	Salah
9	toolbar Ini digunakan untuk mengaktifkan toolbar modal picker.	boolean	benar
10	toolbarCloseText Digunakan untuk tombol toolbar Selesai / Tutup.	tali	'Selesai'
11	toolbarTemplate Ini adalah Template HTML toolbar, secara default adalah string HTML dengan template berikut - `<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>`	tali	-

Parameter Alat Pilih Khusus

Tabel berikut mencantumkan parameter alat pilih khusus yang tersedia -

S.No	Parameter & Deskripsi	Tipe	Default
1	rotateEffect Ini memungkinkan efek rotasi 3D di picker.	boolean	Salah
2	momentumRatio Saat Anda melepaskan alat pilih setelah sentuhan dan gerakan cepat, ini menghasilkan lebih banyak momentum.	jumlah	7
3	updateValuesOnMomentum Digunakan untuk memperbarui pemetik dan nilai input selama momentum.	boolean	Salah
4	updateValuesOnTouchmove Digunakan untuk memperbarui alat pilih dan nilai input selama gerakan sentuh.	boolean	benar
5	value Array memiliki nilai awal dan juga setiap item array mewakili nilai kolom terkait.	Himpunan	-
6	formatValue Fungsi ini digunakan untuk memformat nilai input, dan harus mengembalikan nilai string baru / yang diformat. The nilai-nilai dan displayValues adalah array kolom terkait.	fungsi (p, nilai, displayValues)	-
7	cols Setiap item array mewakili objek dengan parameter kolom.	Himpunan	-

Callback Parameter Pemilih

Tabel berikut menunjukkan daftar fungsi panggilan balik yang tersedia di alat pilih -

S.No	Callback & Deskripsi	Tipe	Default
1	onChange Fungsi callback akan dijalankan setiap kali nilai picker berubah dan nilai serta displayValues adalah array dari kolom terkait.	fungsi (p, nilai, displayValues)	-
2	onOpen Fungsi callback akan dijalankan setiap kali picker dibuka.	fungsi (p)	-
3	onClose Fungsi callback akan dijalankan setiap kali picker ditutup.	fungsi (p)	-

Parameter Kolom

Pada saat konfigurasi Picker, kita perlu melewatkan parameter cols . Ini direpresentasikan sebagai array, di mana setiap item adalah objek dengan parameter kolom -

S.No	Parameter & Deskripsi	Tipe	Default
1	values Anda dapat menentukan nilai kolom string dengan larik.	Himpunan	-
2	displayValues Ini memiliki array dengan nilai kolom string dan itu akan menampilkan nilai dari parameter nilai , Jika tidak ditentukan.	Himpunan	-
3	cssClass Nama kelas CSS yang digunakan untuk menyetel pada penampung HTML kolom.	tali	-
4	textAlign Ini digunakan untuk mengatur perataan teks dari nilai kolom dan bisa jadi "kiri", "tengah" atau "kanan" .	tali	-
5	width Lebar dihitung secara otomatis, secara default. Jika Anda perlu memperbaiki lebar kolom di picker dengan kolom dependen yang harus dalam piksel .	jumlah	-
6	divider Ini digunakan untuk kolom yang seharusnya menjadi pembagi visual, tidak memiliki nilai apa pun.	boolean	Salah
7	content Ini digunakan untuk menentukan kolom pembagi (pembagi: true) dengan konten kolom.	tali	-

Parameter Panggilan Balik Kolom

S.No	Callback & Deskripsi	Tipe	Default
1	onChange Setiap kali nilai kolom akan berubah pada saat itu fungsi callback akan dijalankan. The nilai dan displayValue mewakili kolom saat nilai dan displayValue .	fungsi (p, nilai, displayValue)	-

Properti Picker

Variabel Picker memiliki banyak properti yang diberikan dalam tabel berikut -

S.No	Properti & Deskripsi
1	myPicker.params Anda dapat menginisialisasi parameter yang diteruskan dengan objek.
2	myPicker.value Nilai yang dipilih untuk setiap kolom diwakili oleh larik item.
3	myPicker.displayValue Nilai tampilan yang dipilih untuk setiap kolom diwakili oleh larik item.
4	myPicker.opened Saat alat pilih dibuka, ini disetel ke nilai sebenarnya .
5	myPicker.inline Saat alat pilih sebaris, ini disetel ke nilai sebenarnya .
6	myPicker.cols Kolom Picker memiliki metode dan propertinya sendiri.
7	myPicker.container Instance Dom7 digunakan untuk penampung HTML.

Metode Pemetik

Variabel picker memiliki metode yang membantu, yang diberikan dalam tabel berikut -

S.No	Metode & Deskripsi
1	myPicker.setValue(values, duration) Gunakan untuk menyetel nilai alat pilih baru. Nilainya berada dalam array dimana setiap item mewakili nilai untuk setiap kolom. durasi - Ini adalah durasi transisi dalam ms.
2	myPicker.open() Gunakan untuk membuka Picker.
3	myPicker.close() Gunakan untuk menutup Picker.
4	myPicker.destroy() Gunakan untuk menghancurkan instance Picker dan menghapus semua acara.

Properti Kolom

Setiap kolom dalam array myPicker.cols juga memiliki properti yang berguna, yang diberikan dalam tabel berikut -

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

S.No	Properti & Deskripsi
1	col.container Anda dapat membuat sebuah instance dengan container HTML kolom.
2	col.items Anda dapat membuat instance dengan elemen HTML item kolom.
3	col.value Digunakan untuk memilih nilai kolom saat ini.
4	col.displayValue Digunakan untuk memilih nilai kolom tampilan saat ini.
5	col.activeIndex Berikan nomor indeks saat ini, yang dipilih / item aktif.

Metode Kolom

Metode kolom yang berguna diberikan dalam tabel berikut -

S.No	Metode & Deskripsi
1	col.setValue(value, duration) Digunakan untuk menetapkan nilai baru untuk kolom saat ini. The nilai harus menjadi nilai baru, dan durasi adalah durasi transisi yang diberikan dalam ms.
2	col.replaceValues(values, displayValues) Digunakan untuk mengganti nilai kolom dan displayValues dengan yang baru.

Ini digunakan untuk mengakses instance Picker dari penampung HTML-nya, setiap kali Anda menginisialisasi Picker sebagai inline Picker.

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

Ada berbagai jenis Alat Pilih seperti yang ditentukan dalam tabel berikut -

S.No	Jenis & Deskripsi Tab
1	Alat Pilih Dengan Nilai Tunggal Ini adalah komponen yang kuat yang memungkinkan Anda memilih nilai apa pun dari daftar.
2	Dua Nilai dan Efek Rotasi 3D Di pemilih, Anda dapat menggunakan untuk efek rotasi 3D.
3	Nilai Ketergantungan Nilai bergantung satu sama lain untuk elemen tertentu.
4	Toolbar Kustom Anda dapat menggunakan satu atau lebih alat pilih pada satu halaman untuk menyesuaikan.
5	Alat Pilih Inline / Tanggal-waktu Anda dapat memilih jumlah nilai dalam pemilih inline. Seperti tanggal memiliki tanggal, bulan, tahun dan waktu memiliki jam, menit, detik.