JQuery Kullanarak Plugin Nasıl Oluşturulur?

JQuery Kullanarak Plugin Nasıl Oluşturulur? İyi akşamlar sevgili okurlarım, Bu akşam ki dersimizde sizlere JQuery kullanarak plugin’in nasıl oluşturulduğunu anlatacağım. Öncelikli şekilde şunu söylemeliyim ki Web tarayıcılarının türlü programlarla oluşmuş dosyaları görüntüleyebilmesi için lüzumlu yazılım eklentilerine plug-in denilmektedir. Web tarayıcının herhangi bir programın hazırladığı dosyaları görüntüleme niteliğine sahip olmaması durumlarında dosyanın hazırlandığı programı yazan firmanın sunduğu bu set web tarayıcıya yüklenir ve rahat şekilde 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 bunun gibi yaşamak istemiyorsunuzdur heralde. O sebepten 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 müşteri noktası jquery.dragwithstatuslight.js dosyasındadır. Plugin yazıyorsanız her zaman bu dosyada kullanacağınız yöntem jQuery.fn ile başlamalıdır. Ayrıca metodun olduğu dosya ayrı bir JavaScript dosyası olmalıdır ki Plugin’i kullanacak kisi Plugin’i kendi koduna bağlayabilsin. Bu JavaScript dosyasıda her zaman jquery ile başlamalı ve kendine özgü İsim 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 alternatifini 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 öbür metotlar bunun gibi aşırı pratik kullanabiliriz. Örnekte $(“img”).dragwithstatuslight(); seklinde bir kullanımla yazdığım Plugin’deki metodu kullanmış oldum.


Yapılan Yorumlar
Erdem OFLAZ

Bir mum, diğer mumu tutuşturmakla ışığından bir şey kaybetmez.
 Kategoriler
 Popüler yazılar