Jquery yardımı ile açılır kapanır panel ile kullanıcı girişi bloğunu kullanmak
İlgili Konular: Drupal Genel Bilgiler
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:
/* Açılır kapanır panel stili */
.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 */
.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:
<!-- AÇILIR PANEL KOD BAŞLANGICI -->
<script>
$(document).ready(function(){
$(".paneli_ac").click(function(){
$(".panel").slideToggle("slow");
$(this).toggleclass("active"); return false;
});
});
</script>
<!-- AÇILIR PANEL KOD BITISI -->
<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
etiketi içersine yazıyoruz. Bu sayede ortalanmış veya otomatik boyutlandırılan bir temamız var ise eklediğimiz blok bu ayarlara biraz olsun uyacaktır. Bu kodu eklemeden önce still dosyasındaki width:920px; genişlik ayarını sitenizin genişliğine uygun olarak değiştiriniz.
Şimdi aşağıdaki kodu page.tpl.php dosyasının ilk div etiketinden hemen sonra ekliyoruz:
<!-- AÇILIR PANEL KOD BAŞLANGICI -->
<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 -->
<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.
Benzer Paylaşımlar
- Drupal ile SMTP Mail Gönderme
- Microsoft da artık drupale destek veriyor
- Yorum kısmında uzun kullanıcı adlarını kısaltmak ve (onaylanmadı) yazısını kaldırmak
- Drupal Kitabı (Panels eklentisi kullanım kılavuzu)
- Drupal 7 Tam Gaz Geliyor
- Drupal bellekleme - hızlandırma (Cache)
- Etiketleri alt alta sıralamak
- Drupalciler İstanbul da buluşup tanışalım
- 2010 Mayıs ayında yapılacak önemli güvenlik güncellemeleri
- Blokları sadece üye profillerinde göstermek
Etiketler: jquery ile drupal kullanıcı girişi drupal kullanıcı giriş bloğunu değiştirmek drupal kullanıcı giriş bloğna efekt vermek drupal açılır kapanır panel yapımı drupal
Yeni yorum veya soru gönder