Gönderen: cssarsiv | Ağustos 12, 2008

jQuery ile “çek-bırak” özellikli nesneler oluşturmak

2. Yıl teması‘nda küçük bir atraksiyon olsun diye, sol üst köşedeki rozet resmini jQuery kullanarak hareketlendirmiştim. İşleyişi gayet basit. Mouse (fare) ile nesneyi tutup çekiyorsunuz ve bıraktığınız zaman eski yerine geri dönüyor. Basit birşey olmasına rağmen nedense çok ilgi gördü ve bunun nasıl yapıldığını anlatmamı isteyenler oldu. Bu yazıyı da onlar için özel hazırladım ;)

Ben bu atraksiyonu ilk defa moo.fx sayfasında görmüştüm. Siz de bu sayfaya girerek sağ-üst köşedeki 3 KB yazan nesneyi inceleyebilirsiniz. Bu sayfadaki kodlara gözgezdirmiştim ve aynı şeyi jQuery kullanarak yapmayı denemiştim. Aslında 3 basit adımda siz de buna benzer atraksiyonlar yapabilirsiniz ve ziyaretçilerinizi ufak da olsa etkileyebilirsiniz. Şimdi aşağıdaki adımları takip ederek bu işlemi yapmaya başlayalım:

  1. Html kodlaması
  2. Css ile biçimlendirme ve konumlandırma
  3. jQuery ile nesneye hareket kazandırma

1. Html kodlaması

İlk adımda bir içerik nesnesi belirteceğiz. Daha sonra da bu içerik nesnesinin içerisine, hareketlendirmek istediğimiz rozet nesnesini yerleştireceğiz. Şimdilik “rozet” nesnesinin içerisinde yalnızca v2 yazısı görünüyor ama daha sonra bunun arkaplanına css yardımıyla bir rozet resmi atayacağız.

  1. div id=“icerik”>
  2. <div id=“rozet”>v2</div>
  3. Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  4. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  5. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
  6. nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
  7. reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
  8. pariatur. Excepteur sint occaecat cupidatat non proident…
  9. </div>

Bu adımda yaptığımız işlemlerin sonucunu Adım 1 sayfasında veya alttaki ekran görüntüsünde görebilirsiniz.

adım 1

2. Css ile biçimlendirme ve konumlandırma

İlk adımda, hareketlendirmek istediğimiz “rozet” nesnesini ve bunu içerisinde tutan “içerik” nesnesini oluşturmuştuk. İkinci adımda bu nesneleri css kullanarak biçimlendireceğiz. Ayrıca “rozet” nesnesinin yerini css ile konumlandırma (positioning) konusundan faydalanarak “içerik” nesnesinin sol-üst köşesine taşıyacağız. Şimdi bu işlemleri yapan css kodlarına gözatalım:

  1. <style type=“text/css”>
  2. div#icerik {
  3. position: relative;
  4. margin: 0 auto;
  5. width: 450px;
  6. padding: 5px 10px;
  7. border: 5px solid #444;
  8. background-color: #7f8183;
  9. color: #fff;
  10. font: normal 12px/18px “Trebuchet MS”;
  11. }
  12. div#rozet {
  13. position: absolute;
  14. width: 77px;
  15. height: 77px;
  16. top: -40px;
  17. left: -40px;
  18. text-indent: -9999px;
  19. background: url(rozet.png) 0 0 no-repeat;
  20. /* IE 6 için saydamlık probleminin çözümü */
  21. _background: transparent;
  22. _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘rozet.png’, sizingMethod=‘scale’);
  23. }
  24. </style>
  • Bu kodlar yardımıyla “icerik” nesnesini relative olarak, “rozet” nesnesini ise absolute olarak konumlandırdık. Daha sonra “rozet” nesnesinin genişlik ve yükseklik değerlerini, arkaplan olarak olarak kullandığımız “rozet.png” dosyasının genişlik ve yükseklik değerlerine eşitledik (77px). Hemen ardından top ve left değerleri ile “rozet” nesnesinin, “icerik” nesnesinin sol-üst köşesine yerleşmesini sağladık (-40px). Son iki satırda ise IE 6’nın png dosyalarıyla yaşadığı saydamlık problemine çözüm getirmiş olduk. Bu problem ile ilgili ayrıntılı bilgi edinmek isterseniz Internet Explorer 6 için saydam PNG desteği sayfasını okumalısınız.

    Bu adımda yaptığımız işlemlerin sonucunu Adım 2 sayfasında veya alttaki ekran görüntüsünde görebilirsiniz.

    adım 2

    3. jQuery ile nesneye hareket kazandırma

    Yapacak tek bir işlem kaldı: jQuery ve 2 adet eklenti yardımıyla “rozet” nesnesine hareket kazandırmak… Bu adımda bize EasyDrag ve Easing eklentileri de lâzım olacak. O yüzden bu eklentileri indirip jQuery ile birlikte web sayfamıza dahil etmeliyiz. Bu dahil etme işlemini şöyle yapabilirsiniz:

    1. <script type=“text/javascript” src=“jquery.js”></script>
    2. <script type=“text/javascript” src=“jquery.easydrag.js”></script>
    3. <script type=“text/javascript” src=“jquery.easing.js”></script>
    Artık herşey hazır olduğuna göre rozet nesnesini hareketlendirecek kodlarımıza bakalım:
    1. <script type=“text/javascript”>
    2. $(document).ready(function(){
    3. $(“div#rozet”).easydrag();
    4. $(“div#rozet”).ondrop(function(){
    5. $(‘div#rozet’).animate(
    6. { top:‘-40px’, left:‘-40px’},
    7. {duration: 1000, easing: ‘easeOutElastic’}
    8. );
    9. });
    10. });
    11. </script>
  • Öncelikle $("div#rozet").easydrag(); kodu ile rozet nesnesinin sürüklenebilir olmasını sağlıyoruz. Sonraysa $("div#rozet").ondrop(); kodunu kullanarak sürüklenen nesne bırakıldığında herhangi bir işlem yapılmasını belirtiyoruz. Bu iki kod EasyDrag eklentisinin bize sağladığı özelliklerdir.

    Bu işlemlerden sonra ondrop() fonksiyonu tetiklendiği anda rozet nesnesinin ilk top ve left değerlerine geri dönmesini jQuery’nin yerleşik fonksiyonu olan animate() ile sağlıyoruz. Bu işlem 1000 milisaniyelik bir sürede gerçekleşiyor. Ayrıca bu esnada rozet nesnemize Easing eklentisinin easeOutElastic isimli efektinin uygulanmasını belirtiyoruz. Tüm bu işlemleri yapmamızı sağlayan animate() fonksiyonu hakkında detaylı bilgiyi jQuery ve Efekt işlemleri isimli yazımda bulabilirsiniz.

    Bu son adımda yaptığımız işlemlerin sonucunu Adım 3 sayfasında görebilirsiniz.

    adım 3

    Sonuç

    Gördüğünüz gibi son derece kolay bir işlem. Dikkat etmemiz gereken şey, ilk başta belirlemiş olduğumuz adımları tek tek ve sırayla uygulamaya geçirmiş olmamızdır. Aslında basit gibi görünen bu konuda pekçok bilgiyi de içiçe kullanmış olduk. O yüzden arada sırada böyle atraksiyonlar hazırlamak, öğrendiğimiz bilgileri somut olarak kullanma adına faydalı oluyor. Siz de mutlaka okuduğunuzla kalmayıp, buradaki işlemleri kendi kendinize uygulayınız. Bu yazıyla ilgili dosyaları ise bu bağlantıdan bilgisayarınıza indirebilirsiniz.

    Kaynak : Eburhan

  • Reklamlar

    CSS Dersler kategorisinde yayınlandı | Etiketler: ,


    Bir Cevap Yazın

    Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

    WordPress.com Logosu

    WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

    Twitter resmi

    Twitter hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

    Facebook fotoğrafı

    Facebook hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

    Google+ fotoğrafı

    Google+ hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

    Connecting to %s

    Kategoriler

    %d blogcu bunu beğendi: