JQuery çerçevesi ile eklentiler nasıl oluşturulur

jQuery bize kod yazmak için çok fazla esneklik sağlıyor ve o kadar basit ki az bilgiyle bile kullanılabiliyor ve büyük projeleri çok zaman kazandırarak gerçekleştirebiliyoruz.
Jquery'nin olasılıklarından biri, bu çerçevede yeni işlevler oluşturmak için onu genişletmemize izin vermesidir. Web uygulamalarımız için çok faydalı olan eklentiler geliştirmeyi ve ardından bunları yeniden kullanabilmeyi veya toplulukla paylaşabilmeyi seçmek iyi bir fikirdir.
Jquery eklentisi geliştirme
Bir eklentinin temel yapısı aşağıdaki gibidir

 jQuery.fn.extend ({[b] miplugin [/ b]: function ([b] parametresi [/ b]) {// eklenti kodu}}); 

Parametreler isteğe bağlıdır. Bir eklentinin nasıl programlandığını anlamak için bazı örnekler oluşturacağız.
Bir düğmeye, metin kutusuna, bağlantıya vb. tıklandığında mesaj döndüren eklenti.
Bir plugin.js dosyasına aşağıdaki kodu yazıyoruz.

 jQuery.fn.extend ({gönder: işlev (mesaj) {// gönderme işlevini ve ileti parametresini $ (bu) .click (işlev () {// işlev bir tıklama uyarısı (mesaj) ile etkinleştirildiyse) tanımlarım; // mesajı göster});}});

Gönder gibi bir düğme içeren bir yapı veya html sayfası oluşturuyoruz

 // jquery kütüphanesini çağırıyoruz // eklentiyi çağırıyoruzGöndermek

Html'yi kaydediyoruz ve tarayıcıdan çalıştırdığımızda butona tıklıyoruz ve jquery fonksiyonunun bir mesaj gösterdiğini göreceğiz.

Aynı js dosyasında veya ayrı eklentiler istiyorsak başka bir eklentide olabilecek başka bir eklenti oluşturuyoruz.
Bu durumda bir butona basıldığında css yönünü değiştirmek olacak, metnin rengini ve arka planını değiştireceğiz.

 jQuery.fn.extend ({arka planı değiştir: işlev (arka plan, metin) {// işlev ve parametreler $ (bu) .click (işlev () {// bir tıklamadan erişilirse jQuery (bu) .css ("arka plan- color ", arka plan); // arka planın rengini değiştirin jQuery (bu) .css (" color ", metin); // metnin rengini değiştirin});}}); 

Ardından, bu durumda id'si arka plan olacak bir düğmenin html kodunu yazmamız gerekiyor.

Rengi değiştir

Fonksiyonu da başlatmalıyız, iki fonksiyonla kalırız.

Renk değiştir butonuna tıklayarak css değişikliklerinin uygulandığını görüyoruz.

Bu anlamda, herhangi bir html öğesine değişiklikler yapabilir ve işlevsellikler atayabiliriz, örneğin html'de mesaj kimliği ile boş bir div oluştururuz:

Sonra gönder eklentisinde değiştiriyoruz

uyarı mesajı)

düğmeye basıldığında div içinde bir mesaj yayınlayacak olan aşağıdaki kodla

 $ ("# mesaj").html ("Veri gönderildi"); 

İletişim kutusu yerine gönder düğmesine tıklandığında artık mesaj div'e yazılır.

Bu Eğitimi beğendiniz ve yardım ettiniz mi?Yazara olumlu puan vermek için bu düğmeye basarak yazarı ödüllendirebilirsiniz.