如何创建一个基本的 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({
位置：“顶部”
});
})
</脚本>
完成的！