Responsive Reklam Alanı

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.

Paylaşmak Güzeldir
Yazar
Yazar
MAC İşletim Sistemi Ne Kadar Güvenli? Windows XP Kullanıcıları İçin 27 İpucu!
Benzer Yazılar
Bir yorum yazın
Siz de düşüncenizi belirtebilirsiniz.

Web Tasarım Blog Teması ES | Tüm hakları © Emre Supçin'e aittir.