JQuery-Plugin-Yapımı_emresupcinİyi akşamlar sevgili okurlarım,

Bu akşam ki dersimizde sizlere JQuery kullanarak plugin’in nasıl oluşturulduğunu anlatacağım. Öncelikli olarak şunu söylemeliyim ki Web tarayıcılarının çeşitli programlarla hazırlanmış dosyaları görüntüleyebilmesi için gerekli yazılım eklentilerine plug-in denilmektedir. Web tarayıcının herhangi bir programın hazırladığı dosyaları görüntüleme özelliğine sahip olmaması durumlarında dosyanın hazırlandığı programı yazan firmanın sunduğu bu set web tarayıcıya yüklenir ve sorunsuz olarak görüntülenmesi sağlanır.

 

Tabii web tarayıcıları da her yeni sürümlerinde ihtiyaç duyulan bu plug-in leri sürüme dahil ederek kullanıcıları zahmetten kurtarır. Başkasının Plugin’lerini kullanarak bir parazit terliksisi gibi yaşamak istemiyorsunuzdur heralde. O yüzden size kendi Plugin’inizi nasıl oluşturacağınızı göstereceğim. Kendin pişir kendin ye misalini ele alalım 🙂

 

 

<html>
   <head>
      <link type=”text/css” href=”jquery-ui-1.8.5.custom/css/uidarkness/
       jquery-ui-1.8.5.custom.css” rel=”Stylesheet” />
                  <script type=”text/javascript” src=”jquery-1.4.2.js”>
                  </script>
           <script type=”text/javascript” src=”jquery-ui-1.8.5.custom/js/jquery-ui-
                    1.8.5.custom.min.js”>
           </script>
                  <script type=”text/javascript”
                                src=”jquery.dragwithstatuslight.js”></script>
                       <script type=”text/javascript”>
                                    $(document).ready(function(){
                                          $(“img”).css({‘width’:’300px’});
                                                $(“img”).dragwithstatuslight();
                                                       });
                          </script>
                   </head>
           <body>
                  <img src=”r1.jpg” /><img src=”r2.jpg” />
           <img src=”r3.jpg” /><img src=”r4.jpg” />
          </body>
</html>

 

 

plugin.html

   

 

jQuery.fn.dragwithstatuslight = function() {
        return this.each(function(){
           $(this).css({
    border:”5px outset”, cursor:”move”
});
           $(this).draggable( {
    start: function(event, ui) {
           $(this).css({opacity : 0.5});

 

 

 

 

 

},
    stop: function(event, ui) {
        status=””;
             $(this).css({opacity : 1});
},
         drag:function(event, ui) {
       status=”X/Y : ” +
   event.pageX + “/” + event.pageY;
}
    });
          }
             );
                  };

jquery.dragwithstatuslight.js

 

 

 

Plugin can alıcı noktası jquery.dragwithstatuslight.js dosyasındadır. Plugin yazıyorsanız mutlaka bu dosyada kullanacağınız metot jQuery.fn ile başlamalıdır. Ayrıca metodun bulunduğu dosya ayrı bir JavaScript dosyası olmalıdır ki Plugin’i kullanacak kisi Plugin’i kendi koduna bağlayabilsin. Bu JavaScript dosyasıda mutlaka jquery ile başlamalı ve kendine özgü isim ile devam etmelidir. Bizim örneğimizde jquery.dragwithstatuslight.js seklinde olmuştur. Oluşturduğum örnekte draggable() metodunu kullandım. Sürüklemek istediğim nesneye bir çerçeve konmasını istedim. Farenin sürükleme aşamasında, sürükleme şeklini alması gerekiyordu. Yine sürüklenen nesnenin sürüklenme anında renginin açmasını ayarladım. Kendi kodumuzda tum bağlamaları yaptıktan sonra dragwithstatuslight() metodunu diğer metotlar gibi çok kolay kullanabiliriz. Örnekte $(“img”).dragwithstatuslight(); seklinde bir kullanımla yazdığım Plugin’deki metodu kullanmış oldum.

Yazar
Yazar
Bilgisayar Programcısı, Web Tasarımcı, Üniversite Öğrencisi...
Twitter Facebook Google Linkedin Flickr YouTube

Önceki Yazı:MAC İşletim Sistemi Ne Kadar Güvenli?

Sonraki Yazı:Windows XP Kullanıcıları İçin 27 İpucu!

BENZER YAZILAR
YORUMLAR
SİZ DE CEVAP YAZABİLİRSİNİZ
Bu yazı hakkında görüşünüzü belirtin.

ES Web Tasarım Web Tasarım Blog Teması Emre Supçin Bu tema ES Web Tasarım tarafından düzenlenmiştir. Hiçbir şekilde kopyalanamaz.