- enterId:146624 MooTools Örnek1 : Toggle Divs « KOODLA | BLOG

MooTools Örnek1 : Toggle Divs

Date29 / Mart / 2008 Author kipergil    Category MooTools     Tags Yorumlar5 Yorum Yapilmis.

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…

Daha sonra bir HTML sayfasının head taglari arasına mootools scriptine link vermemiz yeterli…

 
<script src="mootools-release-1.11.js" language="javascript" type="text/javascript"></script>

Ornegimize gelecek olursak , html sayfamızın body bölümüne asagidaki HTML kodumuzu giriyoruz. Bir adet anchor tagi ve bir adet div layer.

 
 
<a href="#" id="toggle"> GÖSTER / GİZLE </a>
 
 
<p id="test">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer .
</div>

Bu bolume kadar yaptigimiz gayet kolay.
Simdi mootools kutuphanesinin Fx.Slide classini kullanarak linke tiklandııgnda , test isimli layeri gosterip gizleme ozelligi ekleyelim.

Bunun icin yine head bölümüne bu kodu ekliyoruz.

 
 
<script language="javascript" type="text/javascript">
window.addEvent('domready', function(){
var mySlide = new Fx.Slide('test');
 
$('toggle').addEvent('click', function(e){
 
e = new Event(e);
 
mySlide.toggle();
 
e.stop();
 
});
</script>

Burada yapılan sey sayfa yuklendiginde yani domReady ozelligi saglandıgında ilgili scriptleri yazarak ,
link ile div arasinda bir bag kuruyoruz.

var mySlide = new Fx.Slide(‘test’);

Bu satı sayesinde yaptıgımız sey , Fx.Slide classindan bir object yaratmak. Parametre olarak kullanmıs oldugumuz layerin id’sini veriyoruz.(test)

Daha sonra ise ;

$(‘toggle’).addEvent(‘click’, function(e){ }

Bu satir ile id’is toggle olan elemani alıp , click eventine bir fonksiyon atıyoruz.
Mootools da $(‘elementID’) ile sayfamızda bulunan elementlere kolayca erisebiliyoruz.document.getElementById(‘elementID’) ‘ de oldugu gibi…

Sonranı ise MooTools bizim icin hallediyor. Fx.Slide Classının toggle fonksiyonu bizim icin gerekli olan efekti saglıyor…MySlide adinda olsuturdumuz Fx.Slide objesi bildiginiz uzere ‘test’ id’li layeri kontrol ediyordu…
Boylece asagidaki kod ile mooTools da hazır olan toggle() fonsiyonu ile , arzu ettigimiz efekti yapmıs oluyoruz…

mySlide.toggle();

Ornek dokumani incelemek icin tıklayınız…

- Bu blogda yer alan yazıları RSS ile takip edebilirsiniz. RSS aboneliği için tıklayın.

- Ya da bu blogda yer alan bütün yazıları içindekiler sayfasında görüntüleyebilirsiniz. Tıklayın!

MooTools Örnek1 : Toggle Divs yazısına 5 Yorum yapılmış.

  • faruk 30 Mart 2008, 13:17

    Teşşekkürler, güzel bir yazı olmuş… öğretici.

    Mootols hakkında daha çok yazı bekliyoruz :)

  • Uğur ÇELENK 10 Nisan 2008, 21:48

    Güzel bir yazı olmuş fakat düşünülmesi gereken çok önemli bir nokta var:
    “Sadece div’in açılıp kapanmasının efektli olması için 65kb lık javascript kullanılması ne kadar mantıklı olur?”

  • mustafa 11 Nisan 2008, 21:09

    Aslinda bu örnek sadece bir giriş niteliginde…Yani bu kutuphaneyi kullanarak tek yapabildigimiz sey toggle efekti değil.

    Mootools.net sitesindeki ornekleri inceleyebilirsiniz…
    Dokuman boyutu biraz buyuk bu noktada haklısınız.

    Ama mootools bunun icinde bize bir imkan sunuyor. Download sayfasına bakarsanız , sadece kullanacaginiz efekt ve classlar icin opsiyonel bir scrpit kutuphanesi olusturabilirsiniz.

    Yani sadece toggle efekti kullanacaksaniz , mootools kutuphanesindeki ilgili classlardan olusan bir paket download edebilirsiniz.

    Ornekleri inceledigimizde ben sunu sormustum senin düşüncenin aksine :D

    “179kblik bir kutuphane ile tüm bunlar nasıl yapılabiliyor :D ”

    sitenin amac ve kullanım alanına gore verilmesi gerekn bir karar sonucta…Kullanıp kullanmamak tamamen kisisel kararınızdır…

    Yorum icin teskkurler…

  • Uğur ÇELENK 20 Nisan 2008, 18:31

    “sadece kullanacaginiz efekt ve classlar icin opsiyonel bir scrpit kutuphanesi olusturabilirsiniz.”
    bunu bilmiyordum, bu ayrıntı için teşekkürler..

  • mirc 09 Ocak 2009, 11:28

    tskler..

Arama


E-Posta Aboneliği


RSS Aboneliği

En Çok Yorumlanan Yazılar

Etiketler

404 ajax apache arama butonu as astrofizik açık kaynak banner blogger blogger/blogspot Blogger / Blogspot blogspot case chmod css date dosya yükleme editör etiket etkinlik favicon featured form ftp galeri Genel gimp hata sayfası header htaccess htpasswd ilişkisel veritabanı index innodb javascript join JQuery kategori koodla linux mysql opacity php resim url

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...

Sayfalar


Faydalı Bağlantılar