如何創建一個基本的 jQuery 工具提示插件
已發表: 2016-10-22如果您最近與 Web 開發有任何關係，那麼您幾乎不需要介紹jQuery或jQuery 插件。 事實上，jQuery 插件已經變得如此流行，以至於近 70% 的互聯網都以某種方式使用它們。
無論您是新手還是專業人士，無論您的 Web 開發專業水平如何，jQuery 都絕對應該在您需要學習和掌握的東西清單上。 考慮到這一點，在本教程中，我們將教你如何創建一個基本的jQuery Tooltip 插件。
所以，這就是我們將要創建的：
不用再浪費時間了，讓我們動手編寫一些很棒的代碼並掌握 jQuery 插件的創建。
文件結構
- jqueryToolTip.css – 工具提示的樣式表。
- jqueryToolTip.js – 實際的 jQuery 插件文件。
我們需要確保我們的插件足夠靈活，以便它可以輕鬆地為各種用戶和設備配置提供服務。 在繼續之前，我們將了解一些有助於我們實現這一目標的規則或概念。
創建 jQuery 插件的規則
- 保持身份唯一性——擁有唯一的
id和class名非常重要，這樣在為插件元素設置樣式時，您不會覆蓋當前的頁面樣式。 - 留下行評論- 留下行評論始終是一種好習慣。 這在處理 jQuery 插件時是必不可少的，因為用戶和程序員可能會發現很難弄清楚別人編寫的每一行代碼的含義，而且試圖在沒有註釋的情況下破譯代碼可能會很耗時。
- 縮小源代碼– 由於您的插件不是創建網站所需的唯一東西，因此為最終用戶使用盡可能少的空間和帶寬很重要。
雖然沒有嚴格的規則，但在編碼時，我個人會在使我的代碼正常運行之前負責設計部分。 在本教程中，我們將遵循相同的模型：我們將首先編寫所需的 HTML 和 CSS，然後再為實際的jQuery Tooltip Plugin編寫代碼。
創建一個示例.html文件並向其中添加以下代碼。
<div id="jqueryToolTip_wrapper">
<span class="jqueryToolTip_text">工具提示文本放在這裡</span>
<span class="jqueryToolTip_arrow"></span>
</div><!-- 結束 jqueryToolTip -->
現在打開jqueryToolTip.css文件並將下面的 CSS 粘貼到其中。
#jqueryToolTip_wrapper{
背景：無重複滾動 0 0 rgba(0, 0, 0, 0.8);
邊框半徑：4px 4px 4px 4px；
-webkit-border-radius：4px 4px 4px 4px；
-moz-邊框半徑：4px 4px 4px 4px；
顏色：#FFFFFF；
字體大小：12px；
字體粗細：粗體；
行高：正常；
填充：5px；
位置：絕對；
z指數：999；
字體系列：Arial，“MS Trebuchet”，無襯線；
}
#jqueryToolTip_wrapper .jqueryToolTip_arrow{
頂部：自動；
顯示：塊；
寬度：0；
高度：0；
邊框：實心5px；
邊框顏色：透明透明 rgb(0,0,0) 透明；
邊框顏色：透明透明 rgba(0,0,0,0.8) 透明；
位置：絕對；
頂部：-10px；
左：10px
}
#jqueryToolTip_wrapper .jqueryToolTip_arrow.arrow_down{
邊框顏色：rgb(0,0,0) 透明 透明 透明；
邊框顏色：rgba(0,0,0,0.8) 透明 透明 透明；
頂部：自動；
底部：-10px；
}
確保在示例.html文件中包含.css文件，然後使用瀏覽器打開.html文件。 如果一切順利，您將能夠看到一個帶有向上箭頭的漂亮工具提示，與下面給出的圖像非常相似。
帶有向下箭頭的工具提示
為了向同一個工具提示添加向下箭頭，您需要做的就是將類.arrow_down添加到現有類.jqueryToolTip_arrow的跨度
前：
<span class="jqueryToolTip_arrow"></span>
後：
<span class="jqueryToolTip_arrow arrow_down"></span>
要求
現在我們已經完成了 HTML 和 CSS 部分，在我們真正投入編寫插件代碼之前，我們可以花一些時間來理解需求。
- 我們需要找出要定位的元素（因為我們無法在每個錨鏈接上顯示工具提示）。
- 我們需要在懸停狀態下抓取當前錨鏈接上的 X 和 Y 軸。
- 最後，我們需要將我們的工具提示
div重新定位到當前處於懸停狀態的錨鏈接。
這可能看起來很複雜，但 jQuery 過濾器和 CSS 定位元素將使我們的工作變得更容易。
jQuery插件基礎
總結代碼：
(函數($){
$.fn.jqueryToolTip = 函數（工具提示選項）{
}
}
})(jQuery);
上面給出的代碼是您每次從頭開始創建插件時需要使用的代碼。 這裡jqueryToolTip是插件名稱，可以替換為任何你想要的。 盡量保持它的唯一性，因為兩個同名的插件會造成巨大的混亂。
默認設置：
var toolTipDefaults = {
位置：“底部”
},
根據您的插件，您可能需要一些默認設置。 例如，在我們的教程中，位置是我們需要處理的事情（也就是說，我們是否希望在元素頂部或下方顯示工具提示）。
覆蓋默認值：
toolTipSettings = $.extend({}, toolTipDefaults, toolTipOptions);
如果最終用戶願意，最好讓他們覆蓋默認設置。 在我們的例子中，我們默認將工具提示設置在底部。 現在，如果最終用戶希望它位於頂部，上面的代碼將使用最終用戶指定的選項覆蓋默認設置。
除了我們上面討論的內容之外，其他一切都是純 jQuery 代碼。 所以，我們現在可以開始了！ 只需打開jqueryToolTip.js文件並將以下代碼放入其中。
(函數($){
$.fn.jqueryToolTip = 函數（工具提示選項）{
var toolTipDefaults = {
位置：“底部”
},
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);
我們創建了一個名為toolTipTemplate的變量，它將包含我們的jQuery ToolTip 插件的 HTML 標記。 此後，我們會將 HTML 標記附加到網頁的正文中。
$(this).each(函數(){
$(this).hover(函數(){
// 這裡是鼠標懸停在鏈接上之後發生的動作的代碼
});
});
$(this)是對將啟動我們的插件的元素的引用。 每次最終用戶的光標懸停在所需元素上時，我們都會顯示工具提示並將其中的文本更改為鏈接的標題attr 。
$(this).each(函數(){
// 懸停功能
$(this).hover(函數(){
var toolTipTitle = $(this).attr("title"); // 獲取當前鏈接標題
var toTop = $(this).offset().top; // 獲取當前鏈接 Y 軸
var toLeft = $(this).offset().left; // 獲取當前鏈接 X 軸
var toolTipHeight = $('#jqueryToolTip_wrapper').css("height"); // 獲取工具提示高度
var itemHeight = $(this).css("height"); // 獲取鏈接高度
if(toolTipSettings.position == 'top')
{
$('#jqueryToolTip_wrapper').find('.jqueryToolTip_arrow').addClass('arrow_down');
var topFinal = parseInt(toTop) - parseInt(toolTipHeight) - 10;
}
別的
{
var topFinal = parseInt(toTop) + parseInt(itemHeight) + 10;
}
$('.jqueryToolTip_text').html(toolTipTitle); // 將工具提示文本更改為當前鏈接標題
$('#jqueryToolTip_wrapper').css("display","block"); // 設置工具提示顯示為阻塞
$('#jqueryToolTip_wrapper').css({ // 設置工具提示的左上角為當前鏈接位置
頂部：頂部決賽，
左：向左
});
}，功能（）{
$('#jqueryToolTip_wrapper').css("display","none"); // 懸停後隱藏工具提示
});
});
在上面的代碼中，我對每一行都進行了註釋，以便讓您更好地理解給定代碼試圖做什麼。
把它們放在一起
(函數($){
$.fn.jqueryToolTip = 函數（工具提示選項）{
// 插件的默認設置
var toolTipDefaults = {
位置：“底部”
},
// 擴展默認設置
toolTipSettings = $.extend({}, toolTipDefaults, toolTipOptions);
// 工具提示插件的 HTML 標記
var toolTipTemplate = '<div id="jqueryToolTip_wrapper"><span class="jqueryToolTip_text"></span><span class="jqueryToolTip_arrow"></span></div><!-- end jqueryToolTip -->' ;
// 附加標記
$('body').append(toolTipTemplate);
$(this).each(函數(){
// 懸停功能
$(this).hover(函數(){
var toolTipTitle = $(this).attr("title"); // 獲取當前鏈接標題
var toTop = $(this).offset().top; // 獲取當前鏈接 Y 軸
var toLeft = $(this).offset().left; // 獲取當前鏈接 X 軸
var toolTipHeight = $('#jqueryToolTip_wrapper').css("height"); // 獲取工具提示高度
var itemHeight = $(this).css("height"); // 獲取鏈接高度
if(toolTipSettings.position == 'top')
{
$('#jqueryToolTip_wrapper').find('.jqueryToolTip_arrow').addClass('arrow_down');
var topFinal = parseInt(toTop) - parseInt(toolTipHeight) - 10;
}
別的
{
var topFinal = parseInt(toTop) + parseInt(itemHeight) + 10;
$('#jqueryToolTip_wrapper').find('.jqueryToolTip_arrow').removeClass('arrow_down');
}
$('.jqueryToolTip_text').html(toolTipTitle); // 將工具提示文本更改為當前鏈接標題
$('#jqueryToolTip_wrapper').css("display","block"); // 設置工具提示顯示為阻塞
$('#jqueryToolTip_wrapper').css({ // 設置工具提示的左上角為當前鏈接位置
頂部：頂部決賽，
左：向左
});
}，功能（）{
$('#jqueryToolTip_wrapper').css("display","none"); // 懸停後隱藏工具提示
});
});
}
})(jQuery);
如何調用插件
調用我們的jqueryToolTip插件與任何其他 jQuery 插件一樣簡單。
包含 JS 文件：
[html type=”text/javascript” 語言=”<script”]
<p>包括樣式表：</p>
<link rel="stylesheet" href="../Documents/Unzipped/jqueryToolTipPluginTutorial/jqueryToolTipPluginTutorial/jqueryToolTip.css" />
創建一個帶有標題屬性的錨鏈接：
<a href="#" title="工具提示演示">工具提示演示</a>
調用插件（基本）：
<script type="text/javascript">
$(函數(){
$('a').jqueryToolTip();
})
</腳本>
調用插件（傳遞選項）：
<script type="text/javascript">
$(函數(){
$('a').jqueryToolTip({
位置：“頂部”
});
})
</腳本>
完成的！