AMP e-postasında eylemler ve olaylar
Important: this documentation is not applicable to your currently selected format websites!
on özniteliği, öğelerin üzerine olay işleyicileri yüklemek için kullanılır. Desteklenen olaylar, öğelere bağlıdır.
Sözdizimi için değer, formun alana özgü, basit bir dilidir:
eventName:targetId[.methodName[(arg1=value, arg2=value)]]
Sözdiziminin her bir parçasının açıklamasını aşağıda bulabilirsiniz.
| Sözdizimi | Gerekli mi? | Açıklama |
|---|---|---|
eventName | evet | Bu, bir öğenin gösterdiği olayın adıdır. |
targetId | evet | Bu, öğe için bir DOM kimliği ya da olaya yanıt olarak üzerinde bir eylem yürütmek isteyeceğiniz ön tanımlı özel hedeftir. Aşağıdaki örnekte, targetId öğesi, amp-lightbox hedefi photo-slides için DOM kimliğidir. <amp-lightbox id="photo-slides"></amp-lightbox> <button on="tap:photo-slides">Resimleri Göster </button> |
methodName | hayır | Varsayılan eylemleri olan öğeler içindir. Bu sözdizimi, hedef öğenin ( AMP'nin öğelerin uygulayabileceği bir varsayılan konsepti vardır. Yani |
arg=value | hayır | Bazı eylemler belgelenmişlerse, argüman kabul edebilirler. Argümanlar, key=value gösterimde parantez için tanımlanır. Kabul edilen değerler:
|
Birden fazla olayı işleme
Olayları noktalı virgül ; ile ayırarak bir öğede birden fazla olayı dinleyebilirsiniz.
Örnek: on="submit-success:lightbox1;submit-error:lightbox2"
Tek olay için birden fazla eylem
Eylemleri ',' virgül ile ayırarak aynı eylem için sıralı olarak birden fazla eylem yürütebilirsiniz.
Örnek: on="tap:target1.actionA,target2.actionB"
Genel olarak tanımlı etkinlikler ve eylemler
AMPher türlü HTML öğesinde (AMP öğeleri dahil) dinleyebileceğiniz bir tap olayını genel olarak tanımlar.
AMP ayrıca herhangi bir HTML öğesinde tetikleyebileceğiniz hide, show ve toggleVisibility eylemlerini de genel olarak tanımlar.
Bir öğe ancak önceden hide veya toggleVisibility eylemiyle gizlenmişse ya da hidden özniteliği kullanılmışsa gösterilebilir. show eylemi CSS display:none veya AMP'nin layout=nodisplay öğesi tarafından gizlenen öğeleri desteklemez.
Örneğin, aşağıdaki, AMP'de mümkündür:
<div id="warning-message">Warning...</div> <button on="tap:warning-message.hide">Cool, thanks!</button>
Öğeye özgü olaylar
* - tüm öğeler
| Olay | Açıklama |
|---|---|
tap | Öğeye tıklandığında/dokunulduğunda tetiklenir. |
Giriş öğeleri
| Olay | Açıklama | Öğeler | Veriler |
|---|---|---|---|
change | Öğe değeri değiştirildiğinde ve bu değişiklik uygulandığında tetiklenir. Veri özellikleri HTMLInputElement ve HTMLSelectElement sayfalarındakini kopyalar. | input | event.min |
input[type="radio"],input[type="checkbox"]
| event.checked | ||
select | event.min | ||
input-debounced | Öğenin değeri değiştirildiğinde tetiklenir. Bu, standart change olayına benzer, ancak yalnızca giriş değerinin değişmesi durduktan sonra 300msn geçtiğinde tetiklenir. |
input olayını tetikleyen öğeler. |
change olayı verileriyle aynı. |
input-throttled | Öğenin değeri değiştirildiğinde tetiklenir. Bu standart change olayına benzer, ancak girişin değeri değişirken en fazla 100msn'de bir kez tetiklenir. |
input olayını tetikleyen öğeler. |
change olayı verileriyle aynı. |
amp-accordion > bölüm
| Olay | Açıklama | Veriler |
|---|---|---|
expand | Akordeon bölümü genişletildiğinde tetiklenir. | Yok. |
collapse | Akordeon bölümü küçültüldüğünde tetiklenir. | Yok. |
amp-carousel[type="slides"]
| Olay | Açıklama | Veriler |
|---|---|---|
slideChange | Döngünün geçerli slaytı değiştiğinde tetiklenir. | // Slide number. |
amp-lightbox
| Olay | Açıklama | Veriler |
|---|---|---|
lightboxOpen | lightbox tam görünür olduğunda tetiklenir. | Yok |
lightboxClose | lightbox tam kapalı olduğunda tetiklenir. | Yok |
amp-list
| Olay | Açıklama | Veriler |
|---|---|---|
fetch-error(düşük güven) | Veri getirilemediğinde tetiklenir. | Yok |
amp-selector
| Olay | Açıklama | Veriler |
|---|---|---|
select | Bir seçenek seçildiğinde veya seçimi kaldırıldığında tetiklenir. | // Target element's "option" attribute value. |
amp-sidebar
| Olay | Açıklama | Veriler |
|---|---|---|
sidebarOpen | Geçiş sona erdikten sonra kenar çubuğu tamamen açıldığında tetiklenir. | Yok |
sidebarClose | Geçiş sona erdikten sonra kenar çubuğu tamamen kapatıldığında tetiklenir. | Yok |
amp-state
| Olay | Açıklama | Veriler |
|---|---|---|
fetch-error(düşük güven) | Veri getirilemediğinde tetiklenir. | Yok |
form
| Olay | Açıklama | Veriler |
|---|---|---|
submit | Form gönderildiğinde teslim edilir. | |
submit-success | Form gönderme yanıtı başarılı olduğunda tetiklenir. | // Response JSON. |
submit-error | Form gönderme yanıtı bir hata verdiğinde tetiklenir. | // Response JSON. |
valid | Form geçerli olduğunda tetiklenir. | |
invalid | Form geçersiz olduğunda tetiklenir. |
Öğeye özgü eylemler
* (tüm öğeler)
| Eylem | Açıklama |
|---|---|
hide | Hedef öğeyi gizler. |
show | Hedef öğeyi gösterir. Eğer autofocus öğesi sonuç olarak görünür olursa, odak kazanır. |
toggleVisibility | Hedef öğe görünürlüğünü açar veya kapatır. Eğer autofocus öğesi sonuç olarak görünür olursa, odak kazanır. |
toggleClass(class=STRING, force=BOOLEAN) | Hedef öğenin sınıfını değiştirir. force isteğe bağlıdır ve tanımlanırsa, sınıfın yalnızca true olarak ayarlandığında eklenmesini, ancak kaldırılmamasını ve yalnızca false olarak ayarlandığında kaldırılmasını sağlar. |
focus | Hedef öğenin odak kazanmasını sağlar. Odağı kaybetmek için başka bir öğe üzerinde focus ile odaklanın (genelde ana öğeye). Erişilebilirlik hususlarından ötürü body/documentElement üzerine odaklanarak odağı kaybetmemenizi tavsiye ediyoruz. |
amp-accordion
| Eylem | Açıklama |
|---|---|
toggle(section=STRING) |
amp-accordion bölümlerinin expanded ve collapsed durumlarını değiştirir. Argüman olmadan çağrıldığında, akordeonun tüm bölümlerini değiştirir. Id bölümünü belirterek belirli bir bölümü tetikler:on="tap:myAccordion.toggle(section=
|
expand(section=STRING) | Akordeonun bölümlerini genişletir. Bir bölüm zaten genişletilmişse, genişletilmiş olarak kalır. Argüman olmadan çağrıldığında, akordeonun tüm bölümlerini genişletir. Id bölümünü belirterek belirli bir bölümü tetikler:on="tap:myAccordion.expand(section='section-id')"
|
collapse(section=STRING) | Akordeonun bölümlerini daraltır. Bir bölüm zaten daraltılmışsa, daraltılmış olarak kalır. Argüman olmadan çağrıldığında, akordeonun tüm bölümlerini daraltır. Id bölümünü belirterek belirli bir bölümü tetikler: on="tap:myAccordion.collapse(section='section-id')"
|
amp-carousel[type="slides"]
| Eylem | Açıklama |
|---|---|
goToSlide(index=INTEGER) | Döngüyü belirtilen bir slayt dizinine ilerletir. |
amp-image-lightbox
| Eylem | Açıklama |
|---|---|
open (default) | Kaynak görüntünün eylemi tetiklediği görüntü lightbox'ını açar. |
amp-lightbox
| Eylem | Açıklama |
|---|---|
open (default) | Lightbox'ı açar. |
close | Lightbox'ı kapatır. |
amp-list
| Olay | Açıklama | Veriler |
|---|---|---|
changeToLayoutContainer |
Dinamik yeniden boyutlandırmaya izin vermek için amp-list yerleşimini layout="CONTAINTER" olarak günceller. | |
fetch-error(düşük güven) | Veri getirilemediğinde tetiklenir. | Yok |
amp-selector
| Eylem | Açıklama |
|---|---|
clear | Tanımlanmış bir amp-selector bileşeninden tüm seçimleri temizler. |
selectUp(delta=INTEGER) | Seçimi `delta` değeri kadar yukarı taşır. Varsayılan `delta` -1 olarak ayarlanmıştır. Hiçbir seçenek seçilmezse, seçilen durum son seçeneğin değeri olur. |
selectDown(delta=INTEGER) | Seçimi `delta` değeri kadar aşağı taşır. Varsayılan `delta` 1 olarak ayarlanır. Hiçbir seçenek seçilmezse, seçilen durum ilk seçeneğin değeri olur. |
toggle(index=INTEGER, value=BOOLEAN) | `selected` uygulamasını değiştirir. Select özniteliği yoksa, bu eylem onu ekler. Select özniteliği mevcutsa, bu eylem onu kaldırır. `Value` argümanında bir boole değeri ekleyerek bir ekleme veya kaldırma işlemini zorlayabilir ve devam ettirebilirsiniz. `true` değeri, `selected` özniteliğini eklemeye zorlar ve zaten varsa kaldırmaz. `false` değeri özniteliği kaldırır, ancak yoksa eklemez. |
amp-sidebar
| Eylem | Açıklama |
|---|---|
open (default) | Kenar çubuğunu açar. |
close | Kenar çubuğunu kapatır. |
toggle | Kenar çubuğu durumunu değiştirir. |
form
| Eylem | Açıklama |
|---|---|
clear | Formun girişlerindeki değerleri siler. |
submit | Formu gönderir. |
Özel hedefler
Aşağıdakiler, AMP sistemi tarafından sağlanan ve özel gereksinimleri olan hedeflerdir:
Hedef: AMP
AMP hedefi AMP çalışma zamanı tarafından sağlanır ve belgenin tamamı için geçerli olan üst düzey eylemleri uygular.
| Eylem | Açıklama |
|---|---|
setState({foo: 'bar'})1
| amp-bind gerektirir. Değişmez bir nesneyi bağlanabilir durumuna bağlar. |
1Çoklu eylemlerle kullanıldığında, sonraki eylemler çağrı öncesinde tamamlanmak üzere setState() eylemini bekleyecektir. Olay başına sadece tek bir setState() eylemine izin verilir.