Cara Membuat Plugin Tooltip jQuery Dasar

Diterbitkan: 2016-10-22

Jika Anda ada hubungannya dengan pengembangan web akhir-akhir ini, Anda hampir tidak memerlukan pengenalan tentang plugin jQuery atau jQuery. Faktanya, plugin jQuery telah menjadi sangat populer sehingga hampir 70% internet menggunakannya dalam beberapa cara atau yang lain.

Pemula atau Pro, apa pun tingkat keahlian pengembangan web Anda, jQuery pasti harus ada dalam daftar hal yang harus dipelajari dan dikuasai. Dengan mengingat hal ini, dalam tutorial ini, kami akan mengajari Anda cara membuat Plugin jQuery Tooltip dasar.

Jadi, inilah yang akan kita buat:

pelajar tangkapan layar pratinjau jQuery Tooltip

Tanpa membuang waktu lagi, mari kita mengotori tangan kita dengan beberapa pengkodean yang luar biasa dan menguasai pembuatan plugin jQuery.

Struktur File

  1. jqueryToolTip.css – Stylesheet dari tooltip.
  2. jqueryToolTip.js – File plugin jQuery yang sebenarnya.

Kami perlu memastikan bahwa plugin kami cukup fleksibel sehingga dapat melayani berbagai pengguna dan konfigurasi perangkat tanpa gangguan. Sebelum melangkah lebih jauh, kita akan melihat beberapa aturan atau konsep yang akan membantu kita mencapai hal ini.

Aturan Untuk Membuat Plugin jQuery

  1. Pertahankan Identitas Unik – Sangat penting untuk memiliki id dan nama class yang unik sehingga pada saat menata elemen plugin Anda, Anda tidak mengesampingkan gaya halaman saat ini.
  2. Tinggalkan komentar baris – Meninggalkan komentar baris selalu merupakan praktik yang baik. Ini penting ketika berurusan dengan plugin jQuery, karena pengguna dan pemrogram mungkin merasa sulit untuk mencari tahu apa arti setiap baris kode yang ditulis oleh orang lain, dan mencoba menguraikan kode tanpa komentar dapat memakan waktu.
  3. Minify Source Code – Karena plugin Anda bukan satu-satunya hal yang diperlukan untuk membuat situs web, penting untuk menggunakan ruang dan bandwidth sesedikit mungkin untuk pengguna akhir.

Meskipun tidak ada aturan kaku untuk itu, saat coding, saya pribadi mengurus bagian desain sebelum membuat kode saya berfungsi. Kita akan mengikuti model yang sama dalam tutorial ini: kita akan menulis HTML dan CSS yang diperlukan terlebih dahulu sebelum kita menulis kode untuk Plugin Tooltip jQuery yang sebenarnya.

Buat contoh file .html dan tambahkan kode berikut ke dalamnya.

 <div id="jqueryToolTip_wrapper">
    <span class="jqueryToolTip_text">Teks Tooltip Di Sini </span>
    <span class="jqueryToolTip_arrow"></span>
</div><!-- end jqueryToolTip -->

Sekarang buka file jqueryToolTip.css dan rekatkan CSS di bawah ini di dalamnya.

 #jqueryToolTip_wrapper{
			latar belakang: tidak ada ulangi gulir 0 0 rgba(0, 0, 0, 0.8);
			batas-radius: 4px 4px 4px 4px;
			-webkit-border-radius: 4px 4px 4px 4px;
			-moz-border-radius: 4px 4px 4px 4px;
			warna: #FFFFFF;
			ukuran font: 12px;
			font-berat: tebal;
			tinggi garis: normal;
			bantalan: 5 piksel;
			posisi: mutlak;
			indeks-z: 999;
			font-family: Arial, "MS Trebuchet", sans-serif;
		}
		#jqueryToolTip_wrapper .jqueryToolTip_arrow{
			atas: otomatis;
			tampilan: blok;
			lebar:0;
			tinggi: 0;
			perbatasan: 5px padat;
			border-color:transparan transparan rgb(0,0,0) transparan;
			border-color: rgba transparan transparan (0,0,0,0.8) transparan;
			posisi: mutlak;
			atas: -10 piksel;
			kiri:10px
		}
		#jqueryToolTip_wrapper .jqueryToolTip_arrow.arrow_down{
			border-color:rgb(0,0,0) transparan transparan transparan;
			border-color:rgba(0,0,0,0.8) transparan transparan transparan;
			atas:otomatis;
			bawah:-10px;
		}

Pastikan Anda menyertakan file .css di dalam contoh file .html , lalu buka file .html menggunakan browser. Jika semuanya berjalan dengan baik, Anda akan dapat melihat tooltip yang tampak bagus dengan panah atas yang sangat mirip dengan gambar yang diberikan di bawah ini.

Tangkapan layar pratinjau jQuery Tooltip

Tip Alat Dengan Panah Bawah

Untuk menambahkan panah bawah ke tooltip yang sama, yang perlu Anda lakukan hanyalah menambahkan kelas .arrow_down ke rentang dengan kelas yang ada .jqueryToolTip_arrow

Sebelum:

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

Setelah:

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

Persyaratan

Sekarang setelah kita selesai dengan bagian HTML dan CSS, kita dapat meluangkan waktu untuk memahami persyaratan sebelum kita benar-benar terjun ke dalam penulisan kode untuk plugin.

  1. Kami perlu mencari tahu elemen mana yang akan ditargetkan (karena kami tidak dapat menampilkan tooltip pada setiap tautan jangkar tunggal).
  2. Kita perlu mengambil sumbu X dan Y pada tautan jangkar saat ini dalam keadaan melayang.
  3. Terakhir, kita perlu memposisikan ulang div tooltip kita ke tautan jangkar saat ini dalam keadaan melayang.

Ini mungkin tampak rumit tetapi filter jQuery dan elemen penargetan CSS akan membuat pekerjaan kita jauh lebih mudah.

Dasar-dasar Plugin jQuery

Kode Penutup:

 (fungsi($){
			$.fn.jqueryToolTip = function(toolTipOptions){
			}
			}
		})(jQuery);

Kode yang diberikan di atas adalah yang perlu Anda gunakan setiap kali Anda mulai membuat plugin dari awal. Di sini jqueryToolTip adalah nama plugin dan dapat diganti dengan apa pun yang Anda inginkan. Cobalah untuk membuatnya tetap unik karena dua plugin dengan nama yang sama dapat membuat kekacauan besar.

Pengaturan Bawaan:

 var toolTipDefaults = {
			posisi: "bawah"
		},

Tergantung pada plugin Anda, Anda mungkin perlu memiliki beberapa pengaturan default. Misalnya, dalam tutorial kita, posisi adalah sesuatu yang perlu kita jaga (yaitu, apakah kita ingin menampilkan tooltip di atas elemen atau di bawahnya).

Mengganti Default:

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

Itu selalu merupakan praktik yang baik untuk membiarkan pengguna akhir mengesampingkan pengaturan default jika mereka menginginkannya. Dalam kasus kami, kami telah mengatur tooltip menjadi di bawah secara default. Sekarang, jika pengguna akhir menginginkannya berada di atas, kode di atas akan menimpa pengaturan default dengan opsi yang ditentukan oleh pengguna akhir.

Terlepas dari apa yang telah kita bahas di atas, yang lainnya adalah kode jQuery biasa. Jadi, sekarang kita bisa mulai! Cukup buka file jqueryToolTip.js dan letakkan kode berikut di dalamnya.

 (fungsi($){
			$.fn.jqueryToolTip = function(toolTipOptions){
				var toolTipDefaults = {
					posisi: "bawah"
				},
				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);

Kami telah membuat variabel yang disebut toolTipTemplate yang akan berisi markup HTML untuk Plugin jQuery ToolTip kami. Setelah itu, kami akan menambahkan markup HTML ke badan halaman web.

 $(ini).setiap(fungsi(){
			$(ini).hover(fungsi(){
				// ini dia kode untuk tindakan yang terjadi setelah mengarahkan kursor ke tautan
			});
		});

$(this) adalah referensi ke elemen yang akan memulai plugin kita. Setiap kali kursor pengguna akhir melayang di atas elemen yang diperlukan, kami akan menampilkan tooltip dan mengubah teks di dalamnya menjadi attr judul tautan.

 $(ini).setiap(fungsi(){
			// pada fungsi hover
			$(ini).hover(fungsi(){
				var toolTipTitle = $(ini).attr("judul"); // mendapatkan judul tautan saat ini
				var toTop = $(ini).offset().top; // mendapatkan sumbu Y tautan saat ini
				var toLeft = $(ini).offset().left; // mendapatkan sumbu X tautan saat ini
				var toolTipHeight = $('#jqueryToolTip_wrapper').css("tinggi"); // mendapatkan tinggi Tip alat
				var itemTinggi = $(ini).css("tinggi"); // mendapatkan tautan Tinggi

				if(toolTipSettings.position == 'top')
				{
					$('#jqueryToolTip_wrapper').find('.jqueryToolTip_arrow').addClass('arrow_down');
					var topFinal = parseInt(toTop) - parseInt(toolTipHeight) - 10;
				}
				lain
				{
					var topFinal = parseInt(toTop) + parseInt(itemHeight) + 10;
				}

				$('.jqueryToolTip_text').html(toolTipTitle); // mengubah teks tooltip ke judul tautan saat ini
				$('#jqueryToolTip_wrapper').css("tampilan","blok"); // menyetel tampilan tooltip untuk diblokir
				$('#jqueryToolTip_wrapper').css({ // mengatur tooltip kiri dan posisi atas ke posisi link saat ini
					atas: atasFinal,
					kiri: keKiri
				});
			},fungsi(){
				$('#jqueryToolTip_wrapper').css("tampilan","tidak ada"); // menyembunyikan tooltip setelah hover selesai
			});
		});

Dalam kode di atas, saya telah mengomentari setiap baris untuk memberi Anda pemahaman yang lebih baik tentang apa yang coba dilakukan oleh kode yang diberikan.

Menyatukan Semuanya

 (fungsi($){
			$.fn.jqueryToolTip = function(toolTipOptions){

				// pengaturan default untuk plugin
				var toolTipDefaults = {
					posisi: "bawah"
				},

				// memperluas pengaturan default
				toolTipSettings = $.extend({}, toolTipDefaults, toolTipOptions);

				// Markup HTML untuk plugin tooltip
				var toolTipTemplate = '<div id="jqueryToolTip_wrapper"><span class="jqueryToolTip_text"></span><span class="jqueryToolTip_arrow"></span></div><!-- end jqueryToolTip -->' ;

				// menambahkan markup
				$('body').append(toolTipTemplate);

				$(ini).setiap(fungsi(){
					// pada fungsi hover
					$(ini).hover(fungsi(){
						var toolTipTitle = $(ini).attr("judul"); // mendapatkan judul tautan saat ini
						var toTop = $(ini).offset().top; // mendapatkan sumbu Y tautan saat ini
						var toLeft = $(ini).offset().left; // mendapatkan sumbu X tautan saat ini
						var toolTipHeight = $('#jqueryToolTip_wrapper').css("tinggi"); // mendapatkan tinggi Tip alat
						var itemTinggi = $(ini).css("tinggi"); // mendapatkan tautan Tinggi

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

						$('.jqueryToolTip_text').html(toolTipTitle); // mengubah teks tooltip ke judul tautan saat ini
						$('#jqueryToolTip_wrapper').css("tampilan","blok"); // menyetel tampilan tooltip untuk diblokir
						$('#jqueryToolTip_wrapper').css({ // mengatur tooltip kiri dan posisi atas ke posisi link saat ini
							atas: atasFinal,
							kiri: keKiri
						});
					},fungsi(){
						$('#jqueryToolTip_wrapper').css("tampilan","tidak ada"); // menyembunyikan tooltip setelah hover selesai
					});
				});
		}
		})(jQuery);

Cara Memanggil Plugin

Memanggil plugin jqueryToolTip kami semudah plugin jQuery lainnya.

Sertakan File JS:

[html type="text/javascript" language="<script"]

<p>Sertakan Lembar Gaya:</p>

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

Buat tautan jangkar dengan atribut judul:

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

Memanggil Plugin (Dasar):

 <script type="text/javascript">
    $(fungsi(){
        $('a').jqueryToolTip();
    })
</skrip>

Memanggil Plugin (Opsi Lewat):

 <script type="text/javascript">
    $(fungsi(){
        $('a').jqueryToolTip({
            posisi: "atas"
        });
    })
</skrip>

Selesai!

Tangkapan layar pratinjau tutorial plugin jQuery Tooltip

Demo LangsungUnduh Kode Sumber