MooTools Örnek1 : Toggle Divs
29 / Mart / 2008
kipergil
Merhaba arkadaslar ,
MooTools giris yazısından hemen bir ornek ile yazılarımızı devam ettirelim. İlk olarak yapacagımız şey “Javascript Display:none , block ” gibi goster gizle olayını Mootools kullanarak efektli hale getirmek.
Bunun icin yapacagımız sey oldukca kolay.Baslangıc olarak temel html scriptini yazarak mootools kutuphanesini ekliyoruz.Hala mootools kutuphanesini indirmediyseniz buraya tiklamanız yeterli…
Devamını Oku »»
MooTools Nedir ?
Merhaba Arkadaslar ,
Bugünden itibaren ben de, sevgili isa’nin olusturmus oldugu “koodla” bloguna yeni yazılarımla katkıda bulunmaya calısacagım…
Ve ilk konu olarak sizler için MooTools hakkında yazmaya karar verdim.
Sanmayın ki Mootools ustasi yada javascript uzmanıyım.
Sadece elimden geldiği dilimin döndüğü kadarıyla , ogrendigim bilgileri sizlerle paylasacagim.
Gelelim Konumuza…
FootNote :
(Buradan sonra yazılanlarin tamami kisisel gozlemlerim, tabirlerim ve yorumlarimdan olusmaktadir.Bu nedenle bazı bilgiler yada ifade tam aslını yansıtmayabilir.)
Javascript, haberleri resimle gösterme
Günümüzde popüler haber sitelerini gezerken hepimiz görüyoruz, haberler ana sayfada bol resimlerle sunuluyor. Bu şekilde haberler verilirken resimler sizin isteğinize göre gösteriliyor. Örnek olarak hürriyetin sitesini verebiliriz, birden yediye kadar olan numaraların her hangi birisinin üzerine geldiğinizde ilgili haberin resmi çıkıyor.
Bu uygulamamızda biz de buna benzer bir şey yapacağız. Sıra numarasının üzerine gelince ilgili haber gözükecek. Uygulamamızın canlı örneğine buradan göz atabilirsiniz. İsterseniz dosyaları buradan indirebilirsiniz.
Javascript ile “display:none / block”
Önceki yazılarımızda javascript-innerHTML kullanarak bir içeriği göster – gizle uygulaması yapmıştık. Ona benzer bir uygulamayı ise innerHTML kullanmadan, javascript ile doküman elemanının sitil özelliğini değiştirerek yapabiliriz.
Bize bu konuda yardıma koşan CSS kodu “display:none; display:block;”. Bunun bir örneğini görmek için buraya tıklayabilirsiniz, dosyaları ise buradan indirebilirsiniz.
innerHTML ile Dinamik Olarak İçerik Eklemek
Yarattığımız dokümanlara dinamik olarak içerik eklemek istediğimizde HTML-DOM metodları ile bunu yapmak zaman alıcı olabilir. Klasik HTML-DOM, createElement(), appendChild() metodlarını kullanarak dokümana html etiketleri eklememize izin verir ancak bu yöntem oldukça zahmetlidir. İşte burada imdadımıza innerHTML() metodu yetişir.
innerHTML() metodu ile dokumanlara javascript yardımıyla dinamik olarak kod ekleyebiliriz, hemde istediğimiz yerine. innerHTML() kullanarak yapacağımız basit bir deneme uygulamasına bu sayfadan bakabilirsiniz.
Arama
E-Posta Aboneliği
RSS Aboneliği
En Çok Yorumlanan Yazılar
- Ajax ile dinamik listeleme (23)
- PHP ile sınırsız alt kategori mantığı (23)
- Blogger’da “devamını oku” bağlantısı (21)
- MySQL’de “join” kullanımı (17)
- MySQL’de Transaction ve PHP ile kullanımı (16)
- Kullanıcı dostu url hazırlamak (14)
- PHP’nin (muhtemelen) az bilinen 10 özelliği (12)
- Kullandığınız programlama dili ne kadar popüler? (12)
- Kullanıcı dostu URL oluşturma (2. teknik) (11)
- .htaccess konuları [Giriş] (11)
Etiketler
Son Yorumlar
- Murat: Güzel bir teknik, şu ana kadar sınırsız alt kategori lazım olmadı ama olmayacağı anlamına gelmiyor
- iilyas: Bu kodlar çalışmıyor arkadaşım. Localde olduğu içinmi acaba ?
- iilyas: Arkadaşım çok teşekkür ediyorum. Harika anlatmışsın ajaxla çalışmalara başlamak lazım estetik açısından.....
- Nuri: bende bu şekilde bir çalışma yaptım ancak bir sorunum var ne yaptıysam url den index.php bölümünü kaldıramadım....
- Kemal: Makale için çok teşekkürler, resimleri div tagları ile yapabilirmiyiz. Bu arada imagelara link verirsek daha...