Jquery yardımı ile açılır kapanır panel ile kullanıcı girişi bloğunu kullanmak
Drupal sitelerimiz gerçekten çok sağlam fakat görsellik açısından biraz uzak kalıyor.
Bu sitede gördüğünüz "Müşteri Paneli" (Sol üst köşede) açılan bir panel olarak çalışıyor. Bu panel jquery kullanılarak oluşturuldu. Jquery drupale entegre olduğundan hiç bir ek dosya çağırmadan sadece kodlarımızı yazarak bu işlemi gerçekleştirebiliyoruz.
Öncelikle belirtmem gerekirki bir önceki yazımdaki style.css ve template.php dosyasına eklemeniz gereken kodları baştan ekleyin. Daha sonra aşağıdaki kodları sayfalarımıza ekleyeceğiz.
Öncelikle temamızın içersindeki style.css dosyasını açıyoruz ve aşağıdaki kod bölümünü ekliyoruz:
.paneli_ac {
background:#666666;
color:#fff;
border:1px solid #444444;
width:100px;
height:20px;
padding:4px;
margin:0;
}
.panel {
background:#000;
display:none;
color:#fff;
padding:10px;
width:920px;
height:50px;
}
/* Açılır kapanır panel stili bitişi */
Bu kodları temanızın görüntüsüne göre ayarlayabilirsiniz.
Daha sonra page.tpl.php dosyası içersinde /head etiketinin hemen öncesine aşağıdaki kod satırlarını ekliyoruz:
<script>
$(document).ready(function(){
$(".paneli_ac").click(function(){
$(".panel").slideToggle("slow");
$(this).toggleclass("active"); return false;
});
});
</script>
<!-- AÇILIR PANEL KOD BITISI -->
Son olarak da kullanıcı giriş bloğumuzun ekrana yazdırılacağı kodu eklemeye sıra geldi.
Kodu temamızın ilk
Şimdi aşağıdaki kodu page.tpl.php dosyasının ilk div etiketinden hemen sonra ekliyoruz:
<div class="panel"><div id="navigation"><?php print
user_bar() ?></div></div>
<div class="paneli_ac">Müşteri Paneli</div>
<!-- AÇILIR PANEL KOD BITISI -->
Güle güle kullanın.
Yorumlar
Yeni yorum veya soru gönder