Reklam öğenizi genişletmek için kullanıcı etkileşiminde genişletmeyi kontrol eden bir nesne oluşturun. Bunu, kullanıcı tıklamasında veya fareyle üzerine gelmede genişleyecek şekilde ayarlayabilirsiniz. Bu makaledeki örnekte, nesneyi daraltılmış panelin herhangi bir yeri tıklandığında genişleyecek şekilde nasıl ayarlayacağınız gösterilmektedir.
Düğme oluşturma
HTML dosyasında bir <div> öğesi oluşturun ve buna bir kimlik (örneğin, "expand-button") verin.
"expand-button" kimlikli yeni bir div öğesi ekleyin.
<body>
<div id="main-panel">
<div id="collapsed-panel">
<!-- Daraltılmış içeriği buraya ekleyin. -->
<div id="expand-button"></div>
</div>
<div id="expanded-panel">
<!-- Genişletilmiş içeriği buraya ekleyin. -->
</div>
</div>
</body>Düğmeyi biçimlendirme
Oluşturduğunuz nesneyi, ("expand-button") kimliğini kullanarak CSS ile biçimlendirin.
Örnek kodDüğmeyi daraltılmış panel ile aynı boyuta ayarlamak ve görünmez yapmak için CSS'yi kullanın.
#expand-button {
position: absolute;
width: inherit;
height: inherit;
opacity: 0;
cursor: pointer;
}Genişletme kodu ekleme
Bir reklamı genişletme, tam olarak şu sıralamayı izleyen eşzamanlı olmayan bir süreçtir:
- Reklam öğesi,
requestExpandyöntemini kullanarak genişletme isteğinde bulunur. - Bu istek,
EXPAND_STARTetkinliğini göndererek reklam öğesine genişletme animasyonunu (varsa) gerçekleştirmesini bildirir. - Genişletme animasyonu bittikten sonra, reklam öğesi
finishExpandyöntemini kullanarak genişletme işleminin tamamlanmasını ister. - Bu istek,
EXPAND_FINISHetkinliğini gönderir. Bu etkinlik, reklam öğesine artık genişletilmiş panelde ek işlevler veya animasyonu gerçekleştirebileceğini bildirir.
<head>
<script type="text/javascript">
var isExpanded = false;
function expandStartHandler() {
// Perform expand animation.
// İsteğe bağlı olarak, çağrıda genişletme yönünü belirtmek isterseniz:
// Enabler.getExpandDirection(); //
// Animasyon bittiğinde şu çağrılmalıdır:
Enabler.finishExpand();
}
function expandFinishHandler() {
// Genişletildiğinde son durumun
// ayarlanmasında kolaylık sağlayacak geri çağırma.
isExpanded = true;
}
function collapseStartHandler() {
// Daraltma animasyonunu gerçekleştirin.
// Animasyon bittiğinde şu çağrılmalıdır:
Enabler.finishCollapse();
}
function collapseFinishHandler() {
// Daraltıldığında son durumun ayarlanmasında
// kolaylık sağlayacak geri çağırma.
isExpanded = false;
}
function actionClickHandler() {
isExpanded ? Enabler.requestCollapse() : Enabler.requestExpand();
}
Enabler.addEventListener(
studio.events.StudioEvent.EXPAND_START,
expandStartHandler);
Enabler.addEventListener(
studio.events.StudioEvent.EXPAND_FINISH,
expandFinishHandler);
Enabler.addEventListener(
studio.events.StudioEvent.COLLAPSE_START,
collapseStartHandler);
Enabler.addEventListener(
studio.events.StudioEvent.COLLAPSE_FINISH,
collapseFinishHandler);
actionBtn.addEventListener(
'click',
actionClickHandler,
false);
</script>
...
</head>
İsteğe bağlı: Reklam öğesini ilk kez yüklendiğinde otomatik olarak genişletme
Bazı yayıncılar, reklam bir sayfada ilk kez yüklendiğinde reklam öğelerinin otomatik olarak genişletilmesine izin verir. Bunu yapmak için Etkinleştirici'nin setStartExpanded yöntemini kullanın.
expandStartHandler işlevinin önüne yerleştirin. Bu yöntem, Etkinleştirici'nin INIT etkinliğinden önce çağrılabilir.Enabler.setStartExpanded(true);