河北高端网站制作：创建一个基本的jQuery工具提示插件

2019.06.03 河北高端网站制作

147

如果您最近与web开发有任何关系，您几乎不需要介绍jQuery或jQuery插件..事实上，jQuery插件已经变得如此流行，以至于近70%的互联网以某种方式使用它们。

新手或专业人士，无论您的Web开发专业水平如何，jQuery绝对应该在您需要学习和掌握的事情列表中。河北高端网站制作考虑到这一点，在本教程中，我们将教您如何创建一个基本的jQuery工具提示插件。

在不浪费更多时间的情况下，让我们用一些很棒的代码处理一下，掌握jQuery插件的创建。

文件结构

  1. jqueryToolTip.css

    -工具提示的样式表。

  2. jqueryToolTip.js

    -实际的jQuery插件文件。

我们需要确保我们的插件是足够灵活的，以便它可以服务于各种用户和设备配置，没有任何麻烦。在进一步研究之前，我们将先看看有助于我们实现这一目标的一些规则或概念。

创建jQuery插件的规则

  1. 保持身份唯一性

    -非常重要的是要有独特的

    id

    和

    class

    名称，以便在设计插件元素的样式时，您不会覆盖当前的页面样式。

  2. 左行注释

    -留下评论始终是一种良好的做法。在处理jQuery插件时，这是必不可少的，因为用户和程序员可能会发现很难弄清楚别人编写的每一行代码意味着什么，并且试图在没有注释的情况下破译代码是很费时的。

  3. 缩小源代码

    -由于您的插件并不是创建网站所需的唯一工具，因此为最终用户使用尽可能少的空间和带宽是很重要的。

虽然它没有严格的规则，但在编写代码时，我会亲自处理设计部分，然后再将代码功能化。在本教程中，我们将遵循相同的模型：在编写实际代码之前，我们将首先编写所需的HTML和CSSjQuery工具提示插件.

创建一个示例.html文件并向其添加以下代码。

<div id="jqueryToolTip_wrapper">
    <span class="jqueryToolTip_text">Tooltip Text Goes Here </span>
    <span class="jqueryToolTip_arrow"></span></div><!-- end jqueryToolTip -->

现在打开jqueryToolTip.css文件并粘贴下面的CSS在里面。

		#jqueryToolTip_wrapper{
			background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8);
			border-radius: 4px 4px 4px 4px;
			-webkit-border-radius: 4px 4px 4px 4px;
			-moz-border-radius: 4px 4px 4px 4px;
			color: #FFFFFF;
			font-size: 12px;
			font-weight: bold;
			line-height: normal;
			padding: 5px;
			position: absolute;
			z-index: 999;
			font-family: Arial, "MS Trebuchet", sans-serif;
		}
		#jqueryToolTip_wrapper .jqueryToolTip_arrow{
			top: auto;
			display:block;
			width:0;
			height:0;
			border:solid 5px;
			border-color:transparent transparent rgb(0,0,0) transparent;
			border-color:transparent transparent rgba(0,0,0,0.8) transparent;
			position:absolute;
			top:-10px;
			left:10px
		}
		#jqueryToolTip_wrapper .jqueryToolTip_arrow.arrow_down{
			border-color:rgb(0,0,0) transparent transparent transparent;
			border-color:rgba(0,0,0,0.8) transparent transparent transparent;
			top:auto;
			bottom:-10px;
		}

确保包括.css在你的样本中存档.html文件，然后打开.html文件使用浏览器。如果一切顺利，您将能够看到一个漂亮的工具提示与向上箭头非常类似的图像给出如下。

jQuery Tooltip preview screenshot

向下箭头工具提示

河北高端网站制作为了将向下箭头添加到相同的工具提示中，只需添加类即可。.arrow_down到使用现有类的span.jqueryToolTip_arrow

之前：

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

之后：

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

所需

现在我们已经完成了HTML和CSS部分，我们可以花一些时间来理解需求，然后才真正投入到为插件编写代码中。

  1. 我们需要找出要瞄准的元素(因为我们不能在每个锚链接上显示工具提示)。
  2. 在悬停状态下，我们需要抓取当前锚链上的X和Y轴。
  3. 最后，我们需要重新定位工具提示。

    div

    到当前处于悬停状态的锚链接。

这看起来可能很复杂，但是jQuery过滤器和针对元素的CSS将使我们的工作更加容易。

jQuery插件基础

包装密码：

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

上面给出的代码是您每次从头开始创建插件时都需要使用的代码。这里jqueryToolTip是插件的名称，可以被任何你想要的东西所取代。尽量保持它的独特性，因为两个相同名称的插件可能会造成巨大的混乱。

默认设置：

		var toolTipDefaults = {
			position:"bottom"
		},

根据您的插件，您可能需要一些默认设置。例如，在我们的教程中，位置是我们需要注意的东西(也就是说，我们是否要在元素的顶部或下面显示工具提示)。

覆盖默认值：

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

如果终端用户愿意的话，让他们覆盖默认设置总是一种好做法。在我们的例子中，默认情况下，我们已经将工具提示设置为底部。现在，如果最终用户希望它位于顶部，上述代码将使用最终用户指定的选项覆盖默认设置。

除了前面讨论的内容之外，其他都是简单的jQuery代码。所以，我们现在可以开始了！简单地打开jqueryToolTip.js文件并将以下代码放入其中。

		(function($){
			$.fn.jqueryToolTip = function(toolTipOptions){
				var toolTipDefaults = {
					position:"bottom"
				},
				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它将包含我们的HTML标记。jQuery工具提示插件..之后，我们将把HTML标记附加到网页的正文中。

		$(this).each(function(){
			$(this).hover(function(){
				// here goes the code for actions that occur after hovering over the link
			});
		});

$(this)是对将启动插件的元素的引用。每当最终用户的光标停留在所需的元素上时，我们将显示工具提示，并将其中的文本更改为标题attr链接。

		$(this).each(function(){
			// on hover function
			$(this).hover(function(){
				var toolTipTitle = $(this).attr("title"); // getting current link title
				var toTop = $(this).offset().top; // getting current link Y axis
				var toLeft = $(this).offset().left; // getting current link X axis
				var toolTipHeight = $('#jqueryToolTip_wrapper').css("height"); // getting toolTip Height
				var itemHeight = $(this).css("height"); // getting link Height

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

				$('.jqueryToolTip_text').html(toolTipTitle); // changing tooltip text to current link title
				$('#jqueryToolTip_wrapper').css("display","block"); // setting tooltip display to block
				$('#jqueryToolTip_wrapper').css({   // setting tooltip left and top position to the current link position
					top: topFinal,
					left: toLeft				});
			},function(){
				$('#jqueryToolTip_wrapper').css("display","none");  // hiding tooltip after hover is done
			});
		});

在上面的代码中，我对每一行进行了注释，以便让您更好地理解给定的代码试图做什么。

把一切都放在一起

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

				// default settings for the plugin
				var toolTipDefaults = {
					position:"bottom"
				},

				// extending default settings
				toolTipSettings = $.extend({}, toolTipDefaults, toolTipOptions);

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

				// appending the markup
				$('body').append(toolTipTemplate);

				$(this).each(function(){
					// on hover function
					$(this).hover(function(){
						var toolTipTitle = $(this).attr("title"); // getting current link title
						var toTop = $(this).offset().top; // getting current link Y axis
						var toLeft = $(this).offset().left; // getting current link X axis
						var toolTipHeight = $('#jqueryToolTip_wrapper').css("height"); // getting toolTip Height
						var itemHeight = $(this).css("height"); // getting link Height

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

						$('.jqueryToolTip_text').html(toolTipTitle); // changing tooltip text to current link title
						$('#jqueryToolTip_wrapper').css("display","block"); // setting tooltip display to block
						$('#jqueryToolTip_wrapper').css({   // setting tooltip left and top position to the current link position
							top: topFinal,
							left: toLeft						});
					},function(){
						$('#jqueryToolTip_wrapper').css("display","none");  // hiding tooltip after hover is done
					});
				});
		}
		})(jQuery);

如何调用插件

打电话给我们jqueryToolTip插件和其他jQuery插件一样简单。

包括JS文件：

[HTML type=“text/javascript”language=“<script”]

<p>Include Style Sheet:</p>

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

创建带有title属性的锚链接：

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

调用插件(Basic)：

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

调用插件(传递选项)：

<script type="text/javascript">
    $(function(){
        $('a').jqueryToolTip({
            position:"top"
        });
    })</script>


相关推荐
分享： 1 2 3

关键词

手机网站制作手机网站建设企业网站建设做网站价格医疗网站建设营销网站建设网站建设哪家好网站制作方案企业网站制作如何制作网站江门网站优化专业网站建设网站制作公司

热门分享

最新文章

随机推荐

最新案例

寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监
TOP