AMP
TR
English Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский 中文 Polski Tiếng việt

AMP e-postasında eylemler ve olaylar

Bu belgeleme, AMP e-posta biçiminin eylemlerini ve etkinliklerini kapsar. AMP web siteleri, hikayeleri ve reklamları için Eylemler ve olaylar hakkında daha fazla bilgi edinin.

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 (targetId ile referansı verilen) gösterdiği ve bir olay tetiklendiğinde yürütmek isteyeceğiniz yöntemdir.

AMP'nin öğelerin uygulayabileceği bir varsayılan konsepti vardır. Yani methodName çıkarıldığında, AMP bu varsayılan yöntemi uygulayacaktır.
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:
  • tırnak içinde olmayan basit metin dizeleri: simple-value
  • tırnak içindeki metin dizeleri: "string value" veya 'string value'
  • boole değerleri: true veya false
  • numbers: 11 veya 1.1
  • olay verilerine dot-syntax referansı: event.someDataVariableName

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
event.max
event.value
event.valueAsNumber
input[type="radio"],
input[type="checkbox"] 		event.checked
select 
event.min
event.max
event.value
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.
event.index

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.
event.targetOption
// Array of "option" attribute values of all selected elements.
event.selectedOptions

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.
event.response
submit-error Form gönderme yanıtı bir hata verdiğinde tetiklenir. 
// Response JSON.
event.response
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.