Temel jQuery Araç İpucu Eklentisi Nasıl Oluşturulur

Yayınlanan: 2016-10-22

Son zamanlarda web geliştirme ile ilgili bir şey yaptıysanız, jQuery veya jQuery eklentilerine giriş yapmanıza gerek yok. Aslında, jQuery eklentileri o kadar popüler hale geldi ki, internetin yaklaşık %70'i şu veya bu şekilde onlardan yararlanıyor.

Acemi veya Profesyonel, web geliştirme uzmanlığınız ne olursa olsun, jQuery kesinlikle öğrenilecekler ve ustalaşılacak şeyler listenizde olmalıdır. Bunu göz önünde bulundurarak, bu eğitimde size temel bir jQuery Tooltip Plugin'in nasıl oluşturulacağını öğreteceğiz.

Yani, oluşturacağımız şey bu:

jQuery Araç İpucu önizleme ekran görüntüsü öğrenici

Daha fazla zaman kaybetmeden, harika kodlamalarla ellerimizi kirletelim ve bir jQuery eklentisi oluşturma konusunda ustalaşalım.

Dosya Yapısı

  1. jqueryToolTip.css – Araç ipucunun stil sayfası.
  2. jqueryToolTip.js – Gerçek jQuery eklenti dosyası.

Eklentimizin, çeşitli kullanıcılara ve cihaz konfigürasyonlarına sorunsuz bir şekilde hizmet edebilmesi için yeterince esnek olduğundan emin olmamız gerekiyor. Daha ileri gitmeden önce, bunu başarmamıza yardımcı olacak bazı kural veya kavramlara bir göz atacağız.

jQuery Eklentisi Oluşturma Kuralları

  1. Kimlikleri Benzersiz Tutun – Eklenti öğelerinizi şekillendirirken mevcut sayfa stillerini geçersiz kılmamanız için benzersiz id ve class adlarına sahip olmak çok önemlidir.
  2. Satır yorumları bırakın – Satır yorumlarını bırakmak her zaman iyi bir uygulamadır. Bu, jQuery eklentileriyle uğraşırken çok önemlidir, çünkü kullanıcılar ve programcılar, başka biri tarafından yazılan her bir kod satırının ne anlama geldiğini anlamakta zorlanabilirler, ve kodu yorum yapmadan deşifre etmeye çalışmak zaman alabilir.
  3. Kaynak Kodunu Küçültün – Bir web sitesi oluşturmak için gereken tek şey eklentiniz olmadığından, son kullanıcı için mümkün olduğunca az alan ve bant genişliği kullanmak önemlidir.

Bunun katı bir kuralı olmamakla birlikte, kodlama yaparken, kodumu işlevsel hale getirmeden önce tasarım kısmıyla bizzat ilgileniyorum. Bu eğitimde de aynı modeli izleyeceğiz: asıl jQuery Tooltip Plugin kodunu yazmaya başlamadan önce gerekli HTML ve CSS'yi yazacağız.

Örnek bir .html dosyası oluşturun ve buna aşağıdaki kodu ekleyin.

 <div id="jqueryToolTip_wrapper">
    <span class="jqueryToolTip_text">Araç İpucu Metni Buraya Gidiyor </span>
    <span class="jqueryToolTip_arrow"></span>
</div><!-- jqueryToolTip'i sonlandır -->

Şimdi jqueryToolTip.css dosyasını açın ve aşağıdaki CSS'yi içine yapıştırın.

 #jqueryToolTip_wrapper{
			arka plan: yok tekrar kaydırma 0 0 rgba(0, 0, 0, 0.8);
			sınır yarıçapı: 4px 4px 4px 4px;
			-webkit-border-radius: 4px 4px 4px 4px;
			-moz-border-radius: 4px 4px 4px 4px;
			renk: #FFFFFF;
			yazı tipi boyutu: 12 piksel;
			yazı tipi ağırlığı: kalın;
			satır yüksekliği: normal;
			dolgu: 5 piksel;
			konum: mutlak;
			z-endeksi: 999;
			yazı tipi ailesi: Arial, "MS Trebuchet", sans-serif;
		}
		#jqueryToolTip_wrapper .jqueryToolTip_arrow{
			üst: otomatik;
			Ekran bloğu;
			genişlik:0;
			yükseklik:0;
			kenarlık:katı 5 piksel;
			border-color:şeffaf şeffaf rgb(0,0,0) şeffaf;
			border-color:şeffaf şeffaf rgba(0,0,0,0.8) şeffaf;
			konum:mutlak;
			üst:-10 piksel;
			sol:10 piksel
		}
		#jqueryToolTip_wrapper .jqueryToolTip_arrow.arrow_down{
			border-color:rgb(0,0,0) şeffaf şeffaf şeffaf;
			border-color:rgba(0,0,0,0.8) şeffaf şeffaf şeffaf;
			üst: otomatik;
			alt:-10 piksel;
		}

Örnek .html dosyanızın içine .css dosyasını eklediğinizden emin olun ve ardından bir tarayıcı kullanarak .html dosyasını açın. Her şey yolunda giderse, aşağıda verilen resme oldukça benzer bir yukarı ok ile güzel görünümlü bir araç ipucu görebileceksiniz.

jQuery Araç İpucu önizleme ekran görüntüsü

Aşağı Oklu Araç İpucu

Aynı araç ipucuna aşağı ok eklemek için tek yapmanız gereken, mevcut sınıf .arrow_down ile yayılma alanına .arrow_down sınıfını .jqueryToolTip_arrow .

Önce:

 <span class="jqueryToolTip_arrow"></span>

Sonrasında:

 <span class="jqueryToolTip_arrow arrow_down"></span>

Gereksinimler

Artık HTML ve CSS kısmını bitirdiğimize göre, eklentinin kodunu yazmaya başlamadan önce gereksinimleri anlamak için biraz zaman alabiliriz.

  1. Hangi öğeyi hedefleyeceğimizi bulmamız gerekiyor (çünkü araç ipucunu her bir bağlantı bağlantısında gösteremiyoruz).
  2. Hover durumunda mevcut bağlantı bağlantısındaki X ve Y eksenini yakalamamız gerekiyor.
  3. Son olarak, araç ipucu div fareyle üzerine gelindiğinde mevcut bağlantı bağlantısına yeniden konumlandırmamız gerekiyor.

Bu karmaşık görünebilir ancak jQuery filtreleri ve CSS hedefleme öğeleri işimizi çok daha kolaylaştıracaktır.

jQuery Eklentilerinin Temelleri

Paketleme Kodu:

 (işlev($){
			$.fn.jqueryToolTip = function(toolTipOptions){
			}
			}
		})(jQuery);

Yukarıda verilen kod, sıfırdan bir eklenti oluşturmaya her başladığınızda kullanmanız gereken şeydir. Burada jqueryToolTip eklentinin adıdır ve istediğiniz herhangi bir şeyle değiştirilebilir. Aynı ada sahip iki eklenti büyük bir karmaşa yaratabileceğinden, onu benzersiz tutmaya çalışın.

Varsayılan ayarları:

 var toolTipDefaults = {
			konum: "alt"
		},

Eklentinize bağlı olarak, bazı varsayılan ayarlara sahip olmanız gerekebilir. Örneğin, öğreticimizde konum, ilgilenmemiz gereken bir şeydir (yani, ipucunu öğenin üstünde veya altında göstermek isteyip istemediğimiz).

Varsayılanları Geçersiz Kılma:

 toolTipSettings = $.extend({}, toolTipDefaults, toolTipOptions);

Son kullanıcıların, isterlerse varsayılan ayarları geçersiz kılmalarına izin vermek her zaman iyi bir uygulamadır. Bizim durumumuzda, araç ipucunu varsayılan olarak altta olacak şekilde ayarladık. Şimdi, son kullanıcı üstte olmasını isterse, yukarıdaki kod, son kullanıcı tarafından belirtilen seçeneklerle varsayılan ayarları geçersiz kılar.

Yukarıda tartıştıklarımızın dışında, geri kalan her şey düz jQuery kodudur. Yani, şimdi başlayabiliriz! Basitçe jqueryToolTip.js dosyasını açın ve aşağıdaki kodu içine yerleştirin.

 (işlev($){
			$.fn.jqueryToolTip = function(toolTipOptions){
				var toolTipDefaults = {
					konum: "alt"
				},
				toolTipSettings = $.extend({}, toolTipDefaults, toolTipOptions);
				var toolTipTemplate = '<div id="jqueryToolTip_wrapper"><span class="jqueryToolTip_text"></span><span class="jqueryToolTip_arrow"></span></div><!-- end jqueryToolTip -->' ;
				$('body').append(toolTipTemplate);
			}
		})(jQuery);

jQuery ToolTip Plugin'imiz için HTML işaretlemesini içerecek olan toolTipTemplate adında bir değişken oluşturduk. Bundan sonra, HTML işaretlemesini bir web sayfasının gövdesine ekleyeceğiz.

 $(bu).her(işlev(){
			$(bu).hover(işlev(){
				// bağlantının üzerine geldikten sonra gerçekleşen eylemlerin kodu burada
			});
		});

$(this) , eklentimizi başlatacak öğenin referansıdır. Son kullanıcının imleci gerekli öğenin üzerine her geldiğinde, araç ipucunu göstereceğiz ve içindeki metni bağlantının başlık attr değiştireceğiz.

 $(bu).her(işlev(){
			// fareyle üzerine gelme işlevi
			$(bu).hover(işlev(){
				var toolTipTitle = $(this).attr("title"); // mevcut bağlantı başlığını almak
				var toTop = $(this).offset().top; // mevcut bağlantı Y ekseni alınıyor
				var toLeft = $(this).offset().left; // mevcut bağlantı X ekseni alınıyor
				var toolTipHeight = $('#jqueryToolTip_wrapper').css("height"); // toolTip Yüksekliği alınıyor
				var itemHeight = $(this).css("yükseklik"); // bağlantı Yüksekliği alınıyor

				if(toolTipSettings.position == 'üst')
				{
					$('#jqueryToolTip_wrapper').find('.jqueryToolTip_arrow').addClass('arrow_down');
					var topFinal = parseInt(toTop) - parseInt(toolTipHeight) - 10;
				}
				Başka
				{
					var topFinal = parseInt(toTop) + parseInt(itemHeight) + 10;
				}

				$('.jqueryToolTip_text').html(toolTipTitle); // araç ipucu metnini mevcut bağlantı başlığına değiştirme
				$('#jqueryToolTip_wrapper').css("display","blok"); // araç ipucu görüntüsünü engelleyecek şekilde ayarlama
				$('#jqueryToolTip_wrapper').css({ // araç ipucunu sol ve üst konumu geçerli bağlantı konumuna ayarlama
					üst: üstFinal,
					sol: içinSol
				});
			},işlev(){
				$('#jqueryToolTip_wrapper').css("display","yok"); // fareyle üzerine gelme tamamlandıktan sonra ipucunu gizleme
			});
		});

Yukarıdaki kodda, verilen kodun ne yapmaya çalıştığını daha iyi anlamanız için her satıra yorum yaptım.

Hepsini bir araya koy

 (işlev($){
			$.fn.jqueryToolTip = function(toolTipOptions){

				// eklenti için varsayılan ayarlar
				var toolTipDefaults = {
					konum: "alt"
				},

				// varsayılan ayarları genişletme
				toolTipSettings = $.extend({}, toolTipDefaults, toolTipOptions);

				// araç ipucu eklentisi için HTML işaretlemesi
				var toolTipTemplate = '<div id="jqueryToolTip_wrapper"><span class="jqueryToolTip_text"></span><span class="jqueryToolTip_arrow"></span></div><!-- end jqueryToolTip -->' ;

				// işaretlemenin eklenmesi
				$('body').append(toolTipTemplate);

				$(bu).her(işlev(){
					// fareyle üzerine gelme işlevi
					$(bu).hover(işlev(){
						var toolTipTitle = $(this).attr("title"); // mevcut bağlantı başlığını almak
						var toTop = $(this).offset().top; // mevcut bağlantı Y ekseni alınıyor
						var toLeft = $(this).offset().left; // mevcut bağlantı X ekseni alınıyor
						var toolTipHeight = $('#jqueryToolTip_wrapper').css("height"); // toolTip Yüksekliği alınıyor
						var itemHeight = $(this).css("yükseklik"); // bağlantı Yüksekliği alınıyor

						if(toolTipSettings.position == 'üst')
						{
							$('#jqueryToolTip_wrapper').find('.jqueryToolTip_arrow').addClass('arrow_down');
							var topFinal = parseInt(toTop) - parseInt(toolTipHeight) - 10;
						}
						Başka
						{
							var topFinal = parseInt(toTop) + parseInt(itemHeight) + 10;
							$('#jqueryToolTip_wrapper').find('.jqueryToolTip_arrow').removeClass('arrow_down');
						}

						$('.jqueryToolTip_text').html(toolTipTitle); // araç ipucu metnini mevcut bağlantı başlığına değiştirme
						$('#jqueryToolTip_wrapper').css("display","blok"); // araç ipucu görüntüsünü engelleyecek şekilde ayarlama
						$('#jqueryToolTip_wrapper').css({ // araç ipucunu sol ve üst konumu geçerli bağlantı konumuna ayarlama
							üst: üstFinal,
							sol: içinSol
						});
					},işlev(){
						$('#jqueryToolTip_wrapper').css("display","yok"); // fareyle üzerine gelme tamamlandıktan sonra ipucunu gizleme
					});
				});
		}
		})(jQuery);

Eklenti Nasıl Çağırılır

jqueryToolTip eklentimizi çağırmak, diğer jQuery eklentileri kadar basittir.

JS Dosyasını Dahil Et:

[html type=”metin/javascript” dil=”<script”]

<p>Stil Sayfasını Dahil Et:</p>

 <link rel="stylesheet" href="../Documents/Unzipped/jqueryToolTipPluginTutorial/jqueryToolTipPluginTutorial/jqueryToolTip.css" />

Başlık özniteliğine sahip bir bağlantı bağlantısı oluşturun:

 <a href="#" title="ToolTip Demo">ToolTip Demo</a>

Eklentiyi Çağırma (Temel):

 <script type="metin/javascript">
    $(işlev(){
        $('a').jqueryToolTip();
    })
</script>

Eklentiyi Çağırma (Geçme Seçenekleri):

 <script type="metin/javascript">
    $(işlev(){
        $('a').jqueryToolTip({
            konum:"üst"
        });
    })
</script>

Bitti!

jQuery Tooltip eklentisi öğretici önizleme ekran görüntüsü

Canlı DemoDownload Kaynak Kodu