Framework7 - Seçici

Açıklama

Seçici, iOS yerel seçici gibi görünür ve listeden herhangi bir değer seçmenize olanak tanıyan güçlü bir bileşendir ve ayrıca özel yer paylaşımı seçiciler oluşturmak için kullanılır. Seçici'yi satır içi bileşen veya kaplama olarak kullanabilirsiniz. Yer paylaşımı seçici, tabletlerde (iPad) otomatik olarak Popover'a dönüştürülecektir.

Aşağıdaki Uygulamanın yöntemini kullanarak JavaScript yöntemini oluşturabilir ve başlatabilirsiniz -

myApp.picker(parameters)

Burada parametre başlatıldı seçici örneğine kullanılan nesneler, gerekli ve gerekli bir yöntem vardır.

Seçici Parametreleri

Aşağıdaki tablo, toplayıcılardaki mevcut parametreleri belirtir -

S.No	Parametreler ve Açıklama	Tür	Varsayılan
1	container Satır içi seçiciler için Seçici HTML oluşturmak için kullanılan CSS seçici veya HTMLElement içeren dize.	string veya HTMLElement	-
2	input CSS seçici veya HTMLElement ile dizeyle birlikte yerleştirilen ilgili giriş öğesi.	string veya HTMLElement	-
3	scrollToInput Seçici her açıldığında, girişin görüntü alanını (sayfa içeriği) kaydırmak için kullanılır.	Boole	doğru
4	inputReadOnly Belirtilen girdide "salt okunur" özniteliğini ayarlamak için kullanılır.	Boole	doğru
5	convertToPopover İPad gibi büyük ekranlarda seçici modelini Popover'a dönüştürmek için kullanılır.	Boole	doğru
6	onlyOnPopover Seçiciyi etkinleştirerek Popover'da açabilirsiniz.	Boole	doğru
7	cssClass Modal seçmek için ek CSS sınıf adı kullanabilirsiniz.	dizi	-
8	closeByOutsideClick Yöntemi etkinleştirerek seçicinin veya giriş öğesinin dışına tıklayarak seçiciyi kapatabilirsiniz.	Boole	yanlış
9	toolbar Seçici modal araç çubuğunu etkinleştirmek için kullanılır.	Boole	doğru
10	toolbarCloseText Bitti / Kapat araç çubuğu düğmesi için kullanılır.	dizi	"Bitti"
11	toolbarTemplate Araç çubuğu HTML Şablonu, varsayılan olarak aşağıdaki şablonla HTML dizesidir - `<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>`	dizi	-

Belirli Seçici Parametreleri

Aşağıdaki tablo, mevcut belirli seçici parametrelerini listeler -

S.No	Parametreler ve Açıklama	Tür	Varsayılan
1	rotateEffect Seçicide 3B döndürme efekti sağlar.	Boole	yanlış
2	momentumRatio Hızlı dokunup hareket ettikten sonra seçiciyi bıraktığınızda, daha fazla momentum üretir.	numara	7
3	updateValuesOnMomentum Momentum sırasında seçicileri ve giriş değerlerini güncellemek için kullanılır.	Boole	yanlış
4	updateValuesOnTouchmove Dokunma hareketi sırasında seçicileri ve giriş değerlerini güncellemek için kullanılır.	Boole	doğru
5	value Dizinin başlangıç değerleri vardır ve ayrıca her dizi öğesi ilgili sütunun değerini temsil eder.	dizi	-
6	formatValue İşlev, giriş değerini biçimlendirmek için kullanılır ve yeni / biçimlendirilmiş dize değeri döndürmelidir. Değerleri ve displayValues ilgili sütun dizisi vardır.	fonksiyon (p, değerler, displayValues)	-
7	cols Her dizi öğesi, sütun parametreleri olan bir nesneyi temsil eder.	dizi	-

Seçici Parametre Geri Aramaları

Aşağıdaki tablo, seçicilerde bulunan geri arama işlevlerinin listelerini göstermektedir -

S.No	Geri aramalar ve Açıklama	Tür	Varsayılan
1	onChange Geri çağırma işlevi, seçici değeri her değiştiğinde ve değerler ve displayValues ilgili sütunun dizileri olduğunda çalıştırılır .	fonksiyon (p, değerler, displayValues)	-
2	onOpen Geri arama işlevi, seçici her açıldığında çalıştırılacaktır.	fonksiyon (p)	-
3	onClose Geri arama işlevi, seçici her kapatıldığında çalıştırılacaktır.	fonksiyon (p)	-

Sütun Parametreleri

Picker yapılandırması anında cols parametresini geçmemiz gerekiyor . Bu, her öğenin sütun parametreli nesne olduğu bir dizi olarak temsil edilir -

S.No	Parametreler ve Açıklama	Tür	Varsayılan
1	values Dize sütun değerlerini bir dizi ile belirtebilirsiniz.	dizi	-
2	displayValues Dize sütun değerlerine sahip bir diziye sahiptir ve belirtilmediğinde, değerler parametresinden değer gösterecektir .	dizi	-
3	cssClass CSS sınıf sütun HTML ambalaj üzerinde kümesi için kullanılan ad.	dizi	-
4	textAlign Sütun değerlerinin metin hizalamasını ayarlamak için kullanılır ve "sol", "orta" veya "sağ" olabilir .	dizi	-
5	width Genişlik varsayılan olarak otomatik olarak hesaplanır. Seçicideki sütun genişliklerini piksel cinsinden olması gereken bağımlı sütunlarla düzeltmeniz gerekiyorsa .	numara	-
6	divider Görsel bölücü olması gereken sütunlarda kullanılır, herhangi bir değeri yoktur.	Boole	yanlış
7	content Sütunun içeriğiyle belirtilen bölücü sütunu (bölücü: doğru) belirtmek için kullanılır .	dizi	-

Sütun Geri Çağırma Parametresi

S.No	Geri aramalar ve Açıklama	Tür	Varsayılan
1	onChange Sütun değeri o anda değiştiğinde geri arama işlevi çalıştırılacaktır. Değer ve DisplayValue mevcut sütun temsil değeri ve DisplayValue .	fonksiyon (p, değer, displayValue)	-

Seçici Özellikleri

Picker değişkeni, aşağıdaki tabloda verilen birçok özelliğe sahiptir -

S.No	Özellikler ve Açıklama
1	myPicker.params Nesne ile aktarılan parametreleri başlatabilirsiniz.
2	myPicker.value Her sütun için seçilen değer, bir öğe dizisi ile temsil edilir.
3	myPicker.displayValue Her sütun için seçilen görüntü değeri, bir öğe dizisi ile temsil edilir.
4	myPicker.opened Seçici açıldığında, gerçek değere ayarlanır .
5	myPicker.inline Seçici satır içi olduğunda, gerçek değere ayarlanır .
6	myPicker.cols Seçici sütunlarının kendi yöntemleri ve özellikleri vardır.
7	myPicker.container Dom7 örneği, HTML kapsayıcısı için kullanılır.

Seçici Yöntemleri

Seçici değişkeni, aşağıdaki tabloda verilen yararlı yöntemlere sahiptir -

S.No	Yöntemler ve Açıklama
1	myPicker.setValue(values, duration) Yeni seçici değerini ayarlamak için kullanın. Değerler, her öğenin her sütun için değeri temsil ettiği bir dizi içindedir. süre - ms cinsinden geçiş süresidir.
2	myPicker.open() Seçici'yi açmak için kullanın.
3	myPicker.close() Seçiciyi kapatmak için kullanın.
4	myPicker.destroy() Seçici örneğini yok etmek ve tüm olayları kaldırmak için kullanın.

Sütun Özellikleri

MyPicker.cols dizisindeki her sütunun , aşağıdaki tabloda verilen kendi yararlı özellikleri de vardır -

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

S.No	Özellikler ve Açıklama
1	col.container Sütun HTML kabına sahip bir örnek oluşturabilirsiniz.
2	col.items Sütun öğeleri HTML öğeleriyle bir örnek oluşturabilirsiniz.
3	col.value Mevcut sütun değerini seçmek için kullanılır.
4	col.displayValue Görüntünün mevcut sütun değerini seçmek için kullanılır.
5	col.activeIndex Seçili / aktif öğe olan mevcut dizin numarasını verin.

Sütun Yöntemleri

Kullanışlı sütun yöntemleri aşağıdaki tabloda verilmiştir -

S.No	Yöntemler ve Açıklama
1	col.setValue(value, duration) Mevcut sütun için yeni bir değer ayarlamak için kullanılır. Değeri yeni bir değer olmalıdır ve süresi ms verilen geçiş süresidir.
2	col.replaceValues(values, displayValues) Sütun değerlerini ve displayValues'ı yenileriyle değiştirmek için kullanılır.

Seçici'yi satır içi Seçici olarak her başlattığınızda, Picker'ın örneğine HTML kapsayıcısından erişmek için kullanılır.

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

Aşağıdaki tabloda belirtildiği gibi farklı Toplayıcı türleri vardır -

S.No	Sekmeler Türleri ve Açıklama
1	Tek Değerli Seçici Listeden herhangi bir değer seçmenize izin veren güçlü bir bileşendir.
2	İki Değer ve 3D Döndürme Etkisi Seçicide 3B döndürme efekti için kullanabilirsiniz.
3	Bağımlı Değerler Değerler, belirtilen eleman için birbirine bağlıdır.
4	Özel Araç Çubuğu Özelleştirmek için tek sayfada bir veya daha fazla seçici kullanabilirsiniz.
5	Satır İçi Seçici / Tarih-saat Satır içi seçicide değerlerin sayısını seçebilirsiniz. Tarih, ay, yıl ve saat, saat, dakika, saniye içerdiği gibi .