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 .