mehmetduran.com - Paylaşmak Güzeldir...
jQuery Eklenti (Plugin) ve jQuery Özel Metot Hazırlama
Bu yazımda jQuery ile nasıl eklenti hazırlanacağını ve nasıl özel metot oluşturulacağını göstermeye çalışacağım. Daha önce burada eklenti hazırlama ile ilgili bir yazı yazmıştım. Ancak gün geçtikçe jQuery'nin yaygınlaşması ve neredeyse her yerde kullanılması hem eklenti hazırlamayı hem de özel metotlar yazmayı zorunlu kıldı. Ayrıca yapacağımız her türlü uygulamayı eklenti olarak ya da tekrar kullanılabilir olarak yazmak kod tekrarını ve zaman kaybını önleyecektir. Bunun için bundan sonra eklenti yazıp kullanmak benim tercihim olacaktır. Şimdi jQuery için eklenti yazmak ve özel metot oluşturmak için neler yapmamız gerektiğine bakalım.

Öncelikle eklenti oluşturmaya bakalım. Aşağıdaki gibi bir kodlama ile jQuery ile eklent oluşturabiliyoruz. Örnek olarak herhangi bir textbox'a veya textarea'ya uygulanabilen ve uygulanan elementlerin değerlerini sayan bir eklentinin kodlarına bakalım.

 
(function($) {
    $.fn.extend({
        Say: // Fonksiyon adı
        function(ayarlar) {
            // eğer ayarlar boş gelirse default eklenti ayarlarını yüklüyoruz.
            ayarlar = $.extend({ limit: 500 }, ayarlar);
            return this.each(function() {
                // eklentiyi kullanacağımız her nesne için çalışacak kodlar bu kısımda yer alacak
                var nesne = $(this);
                var sayici = $("<p style=\"position:absolute;font:9pt tahoma;top:" +
                    (nesne.offset().top + nesne.height() + 5) + "px;left:" +
                    (nesne.offset().left + nesne.width() - 10) + "px;\"></p>")
                    .insertAfter(nesne);
                nesne.bind("keyup", function() {
                    var adet = nesne.val().length;
                    if (adet < ayarlar.limit) {
                        sayici.html(adet); 
                    }
                    else { nesne.val(nesne.val().substring(0, ayarlar.limit)); sayici.html(nesne.val().length); }
                });
            });
        }
    });
} (jQuery));
 
 
//(function($) {
//    $.fn.Say = function(ayarlar) {
//        // Eklentimiz bu şekilde de tanımlanabilir.
//        // Kodlar burada yer alacak.
//    }
//} (jQuery));
 
 
// Kullanımı ---> $("#textbox1").Say(); veya $("#textbox1").Say({limit: 100});
 

Bu şekillerde jQuery eklentilerimizi tanımlayıp, kullanabiliyoruz. Ancak daha detaylı ve geniş eklentiler için jQuery kod bilgimizin, css bilgimizin ve html bilgimizin iyi olması gerekir. Bu şekilde birçok eklenti hazırlayıp, kullanabiliriz. Önümüzdeki dönemde sitemde kullandığım özellikleri ekleni haline getirip, hem başka uygulamalarda hem de sitemde paylaştığım yazılarda yazdığım eklentileri kullanmayı düşünüyorum. Böylece gereksiz kod yazmaktan ve zaman kaybından kurtulmuş olacağım.

jQuery ile yapabileceğimiz bir diğer önemli özellik özel metot tanımlama ve kullanma özelliği. Bu şekilde de birçok işlem için özel metotlar yazıp, işlemlerimiz için yazdığımız metotları kullanabiliriz. Örneğin jQuery içinde gelen Ajax metodu buna bir örnek olabilir. Hem direk olarak kullanabilecek ve hesaplamalar yapan işlemler için hem de eklenti gibi ancak herhangi bir nesneye uygulanamayacak işlemler için özel metotlar oluşturup, kullanabiliriz. Aşağıdaki kodlarda ise jQuery ile özel metot oluşturma ve kullanmayı görebilirsiniz.

 
$.Uyari = function(ayarlar) {
    ayarlar = $.extend({ content: "Uyarı Mesajı." }, ayarlar);
    alert(ayarlar.content);
}
 
 
// Kullanımı --> $.Uyari(); veya $.Uyari({content: "Alert İçeriği."});
 

Bu şekilde de özel metotlar hazırlayıp, kullanabiliriz. Örneğin modal uygulamaları bu şekilde metot olarak hazırlayıp kullanmak, message box tarzında uyarı pencereleri hazırlayıp kullanmak oldukça kolay ve kullanışlı olacaktır. Önümüzdeki dönemde de bu tür uygulamalar hazırlayıp, paylaşacağım.

Örnek kodlarını verdiğim eklentinin ve metodun çalışan hallerini buradan görebilir ve dosyaları buradan indirebilirsiniz.

İyi Çalışmalar.
Mehmet Duran 09 Ekim Cuma 2009 14 29673 5,0
jQuery Javascript Jquery Metot Eklenti Plugin İndir Tanıtım Html Css
Bookmark and Share
Bu Yazıyı Değerlendirin.
Konuyla İlgili Olabilecek Diğer Yazılar Vesikalık Fotoğraflarınızı Eskiye Benzetin C# ile Merge Sort Algoritması Veritabanı İlişkisi ile Accordion Menü Oluşturma The Ultimate Css (E-Book) Asus P565'imi Windows Mobile 6.5'e Yükselttim
Yorumlar
Yorum Yaz
RSS Yorum Takibi
Salih Gedik 10 Ekim Cumartesi 2009 00:56 #1
Süper bir yazı daha. Şimdi biraz kurcalarım. Eline sağlık
Sedat Kumcu 11 Ocak Pazartesi 2010 04:38 #2
Uzun zamandır merak ettiğim ama bir türlü araştıramadığım çok faydalı bi makale olmuş. Ellerinize sağlık. İyi çalışmalar.
hakan 24 Ocak Pazar 2010 12:26 #3
merhaba. Bazı video sitelerine video eklerken direkt videonun url sini yazarak video eklenebiliyor.yani embed kod yazılmadan.ama embed kodun src bölümünde o videonun url i ile embed daki src bölümünde küçük farklılıklar var.yani texte yazılan bir video url ini nasıl direkt kendi sitemize dinamik olark embed edebilirz.? Yani http://vimeo.com/8612053 şu videodaki tanıtımı izlerseniz daha net olur demek istediğim. Yani buradaki video ekleme bölümü dinamik olması için hazır scriptler mi var?Tskur.
Mehmet Duran 24 Ocak Pazar 2010 12:36 #4
Video'daki gibi bir yapı için arka planda embed kodu üreten bir algoritma vardır. Videounun adresi girildiğinde o adreste yer alan video bulunarak bulunan videoya göre embed kod üretilir ve üretilen embed kod sayfaya basılır ve video bölümü oluşturulur. Burada video adresinin bulunması ve embed kodun üretilmesi için server taraflı kodlama olduğunu düşünüyorum. Javascript ve Ajax ile bu kodlar çalıştırılır.
hakan 24 Ocak Pazar 2010 15:25 #5
Peki bunu nasıl yapabilirim.?İnternetten dünden beri araştırıyorum ama buna benzer bile kod örneği bulamadım.Ben de size sorayım dedim.Çünkü güzel bir uygulama olduğunu ve her projede kullanılabileceğini düşünüyorum.Acaba sizin bir bilginiz ya da benzer bir örnek varsa yardımcı olursanız sevinirim??
Mehmet Duran 24 Ocak Pazar 2010 15:37 #6
Öncelikle kendi düşündüğün gibi birşey yapmak için kendi algoritmanı geliştirmelisin. Ben videodaki gibi bir örneği açıklamaya çalışıyım. Öncelikle kullanıcı bir adres girecek ve girilen adresdeki videonun embed kodu süzülecek (bulunacak). Bunun için regex kullanılabilir. Süzülen kodu kullanıcıya gösterirsin ve kullanıcı bunu paylaşmak isterse bu kodu veritabanına, kullanıcıyla ilişkili olacak biçimde kaydedersin ve kullanıcının profilinde veya nerde olacaksa bu kodu sayfaya basarsın. Tüm bunları yapacak veritabanı ve programlama bilgin varsa örneğe ihtiyaç duymadan yapmalısın diye düşünüyorum.
hakan 24 Ocak Pazar 2010 16:20 #7
Cevap için tesekkuler.Programlama ve veritabanı bilgim var(C#,MSSQL) ama o sitedeki embed ya da javascript kodunu nasıl çekebileceğimi bilmiyorum. Ondan sonrası zaten kolay.Bu konuda küçük bir örnek olsa iyi olurdu.Regex i deneyeceğim.
Mehmet Duran 24 Ocak Pazar 2010 16:36 #8
Regex dışında Html parsing olayı ile de çözebilirsin. Bu konuyu da araştırabilirsin. Kolay gelsin.
hakan 27 Ocak Çarşamba 2010 18:46 #9
Tekrar merhaba.youtube daki bir videonun html kodunu bir string degiskene yazdırabiliyorum.ama bu degisken içerisinden istediğim tag ı bir türlü alamıyorum.Hem string özellikleri ile(indexof,contains,..) ve regex ile.Mesela tag-input id="embed_code" burada tag-input id yazınca(contains ile) buluyor ama attribute nu de ekleyince bulamıyor neden acaba?Nasıl bir kod mantıgı uygulamalıyım?Response.Write(string degisken) yapınca o url deki sayfa default.aspx de açabiliyorum? yani orada sorun yok.??
Mehmet Duran 28 Ocak Perşembe 2010 00:05 #10
Burada string karşılaştırması ile yapman her zaman doğru sonuç vermeyebilir. Tagların açılma kapanma durumunu kontrol etmelisin. Yani tagın başlangıç noktası ve kapanma noktasını bulmalısın. Bunu regex ile yapabilirsin. (html parsing olarak adlandırılmakta). Bu işlemleri kolaylıkla yapmaya yarayan ücretsiz hazır kütüphaneler var. Araştırırsan (html parsing olarak) bulabilirsin.
hakan 02 Nisan Cuma 2010 23:18 #11
Tekrar merhaba. Ben youtube daki bir url e Webrequest,Webresponse ile istek de bulunup streamreader aracılığı ile ilgili sayfanın html kodunu bir tektboxa yazdırıyorum. Ama buradan sadece videoyu almak için html içerisinden hangi kodu alacağımı anlayamadım.Youtube sitesinde Embed code yazan yerde, object ile başlayan satır var bu direkt siteye koyunca doğru çalışıyor ama html kod içerinde bu satırı bulamıyorum.Kaynağı göster Ctrl+F ile de bulamıyorum.Nasıl bu object ile başlayan kısmı alabilirim
Mehmet Duran 02 Nisan Cuma 2010 23:51 #12
Merhaba. Aslında daha önce konuştuklarımız doğru ama son yorumunda yazdığın gibi büyük siteler artık kodları direk olduğu gibi sayfalara gömmüyor. Youtube'a baktığımızda object tagı ile gelen video kodları script ile sayfa gömülüyor. Bu yüzden daha önce konuştuklarımız burada pek kullanışlı olmuyor. Böyle yapılmasının nedeni bu şekilde kullanımların önüne geçmek olabilir. Ancak bu işi sadece youtube için yapacaksan bu kadar uğraşmaya gerek yoktu maalesef. Çünkü url'yi biliyorsan, url'deki videonun id değerine göre object kodunu kendin oluşturabilirsin. Bunun için youtube'da bir video sayfası açıp url ile youtube'un vermiş olduğu embed kodunu incelemeni öneririm. Kısa süre sonra mantığını kavrayacaksın ve url'deki değere göre object kodunu kendin oluşturabileceksin.
hakan 03 Nisan Cumartesi 2010 00:08 #13
Sadece youtube için dediğin doğru.Ama dinamik olmasını istiyorum.Yani youtube,dailymotion..gibi bazı video sitelerini de desteklemesini istiyorum.bununla ilgili hazır php kodu bulmuştum(şimdi hatırlamıyorum-zaten o site de php ile yapılmış)ama ben asp.net kullandığım için bir işe yaramadı. Acaba kafamda belirlediğim video siteleri için ayrı ayrı kod mu yazsam bu da çok amatörce bir yaklaşım mı olur?Yani youtube için ayrı dailymotion için ayrı kod gibi.Yine de ilgilendiğin için tesk.
Mehmet Duran 03 Nisan Cumartesi 2010 00:16 #14
Yorumumda ben de belirtmiştim. Söylediğim sadece youtube içindi. Yaklaşımın amatörce değil bana göre. Çünkü bunu yapman zorunlu. Her site birbirinden farklı. Eğer adres elindeyse youtube videosunun embed kodu çok rahat oluşturuluyor. Ancak buradaki kodu youtube'un güncellenmesine göre sık sık gözden geçirmen lazım. Youtube'da olduğu gibi diğer siteler için de aynı şeyi yapmalısın.
İsim :
Site :
Yorum :

Buradan bu yazıya ait yorumları RSS olarak takip edebilirsiniz.

Bu servis ile yazılara eklenen yorumları RSS ile takip ederek konu ile ilgili başkaları tarafından yapılan yorumları veya konuyla ilgili sorduğunuz sorulara verilen cevapları görebilirsiniz.
Ne edersen kendine, edersin kendi kendine.
Bölümler
Yazılar
Arşiv
Arama
Linkler
Site İçi Arama
Son Zamanlarda Ne Yapıyorum ?
İstatistikler - Araçlar - Reklam
İstatistikler
Sayaç
Mehmet Duran | mehmetduran.com | Copyright © 2009