mafft和mega_初学者基础：进度，警报，工具提示和难以捉摸的Mega Drop

mafft和mega

让我们通过学习如何利用进度条，警报，工具提示和Zurb在其站点上使用的，但实际上不在Foundation中的大型下拉菜单来增加我们的Foundation技能。 我们将看一下使用自定义jQuery将所有这些组件添加到上一教程的联系表中，以便您了解这些元素如何在您自己的项目中工作。 让我们开始吧。

---

工具提示

首先，我们将在“向我发送垃圾邮件”复选框中添加工具提示，告诉用户有关垃圾邮件的更多信息，如果他们选中该复选框，我们将向他们发送垃圾邮件。

<label class="has-tip">
    <span class="has-tip" title="Don't worry we won't really send you any spam this is just to display a checkbox." data-tooltip="" data-width="300">Send me spam</span>
    <input style="display: none;" type="checkbox" checked="checked" />
</label>

就像在每个以前的代码片段中一样，向元素添加功能（如工具提示）都依赖于类来开始，在这种情况下，它就是“具有提示”。

您可能还注意到，我们已经将文本包裹在span标签中的标签内。 该span标签需要Foundation的自定义元素属性之一“ data-tooltip”。 这将为您提供一个有用的工具提示，但是您将需要在提示中输入一些文本，也许还需要设置宽度。 这两个都可以通过更多的属性“ title”和“ data-width”来实现。 没有数据宽度，提示将仅填充元素的父容器的空间。

添加“ has-tip”类并使用这些属性将您选择的元素包装在范围中，意味着您可以轻松地将工具提示粘贴到任何元素。

---

增加互动

在上一教程中，我们构建了一个简单的响应式联系表单，演示了如何使用Foundation的表单元素。 现在，让我们实现更多元素以向表单添加新层。 我们将通过在提交按钮上添加阶段来完成此操作。 我们将以标准的方式单击发送消息按钮，添加进度指示器，成功消息并在发送电子邮件后清除输入。

由于我纯粹是在展示Foundation功能，因此这不是功能性表单，尽管您可以添加基于php的发送脚本并使用ajax进行表单发布而无需离开页面。 看一看使用jQuery提交没有页面刷新的表单以获取更多说明。

在我们的提交输入元素的正下方，我们可以添加进度条。 这将使用与按钮相同的类，这次使用四舍五入的类。

<div class="progress round" id="progress" style="display: none;"></div>

将div与“ progress”类一起使用会设置事物并充当容器，而内部的跨度（利用“ meter”类）则充当逐渐填充容器的颜色。

注意：跨度使用带有进度条开始宽度的样式标签。 稍后我们将使用jQuery对此进行动画处理。

让我们添加一条成功消息，以便用户知道该消息已发送。 在此示例中，我们仅关注成功警报，但是在实际情况下，您可能还需要一个错误警报。 您可以使用Submit处理程序和jQuery validate插件实现此目的。

<div class="alert-box success" style="display: none;" data-alert="">Success! Your message has been sent.
 <a class="close" href="#">×</a></div>

取一个div并添加“ data-alert”属性以及几个类，即“ alert-box”和“ success”。 如果我们也添加一个关闭按钮，那么用户在阅读成功消息后就可以关闭它。 如果您正在看到目前为止我们放在一起的内容，将会看起来有些混乱，但这没关系，因为我们现在将添加一些jQuery以创建所需的交互层。

var submitButton = $('#submitme'); 				// Variable to cache button element
var progressBar = $('#progress'); 				// Variable to cache progress bar element
var progressBarMeter = $('#progress .meter'); 	// Variable to cache meter element
var alertBox = $('.alert-box'); 				// Variable to cache meter element
var closeButton = $('.close'); 					// Variable to cache close button element

$(submitButton).click(function() { // Initiates the send interaction
	$(this).fadeOut(500); // Fades out submit button when it's clicked
	setTimeout(function() { // Delays the next effect
	    $(progressBar).fadeIn(500); // Fades in the progress bar
	    $(progressBarMeter).animate({width : '100%'},2000); // Animates the progress bar
	    setTimeout(function() { // Delays the next effect
	    	$(progressBar).fadeOut(500); // Fades out progress bar when animation completes
	    	setTimeout(function() { // Delays the next effect
				 $(alertBox).fadeIn(500); // Fades in success alert
			}, 500);
	    }, 2500);
	}, 500);
});

为了更好地解释此代码，我对每一行都进行了注释。 这是一个简单的效果队列，可以创建所需的交互。 尽管这纯粹是视觉上的，但可以轻松调整以添加真实的反馈和验证。 对我们来说，添加关闭警报功能对重置表单以备将来使用也很有用。

注意：我们已经通过将函数中使用的所有元素存储在变量中来缓存它们。 您可以阅读快速提示-jQuery Newbs：停止在池中跳转，以详细了解我们为什么这样做

---

重置表格

$(closeButton).click(function() { // Initiates the reset function
	$(alertBox).fadeOut(500); // Fades out success message
	$(progressBarMeter).css({width : '0%'}); // Resets progress bar
	setTimeout(function() { // Delays the next effect
		$('input, textarea').not('input[type=submit]').val(''); // Resets the input fields
		$(submitButton).fadeIn(500); // Fades back in the submit button
	}, 500);

        return false; // This stops the success alert from being removed as we just want to hide it
});

再次在这里，我对每一行进行了注释，以解释每一行的功能。 这几乎涵盖了我们对联系表的升级。 这些功能非常灵活，可以在项目中的任何地方使用，使用CSS进行自定义非常容易。

---

难以捉摸的巨型掉落

我已经在Foundation的Google小组上度过了很多时间，很多人问起Zurb网站上的Mega Drop功能。 我以为我会在这里进行介绍，因为似乎没有人真正介绍过jQuery的前瞻性。

取得一个section标签，并在下拉列表中填充所需的内容，使用“ display：none”然后添加以下jQuery代码添加样式属性：

var megaDrop = $('#megaDrop'); 				// Variable to cache megaDrop element
var megaContainer = $('#megaContainer'); 				// Variable to cache megaContainer element

$(megaDrop).click(function() {
	$(megaContainer).slideToggle(300,function(){
		if ($(this).is(":hidden")) $(megaDrop).html("+");
		else $(megaDrop).html("×");
	});
});

Mega Drop实际上只是一个slideToggle效果，可以显示和隐藏带有滑动动画的容器。 Mega Drop有很多实际用途，无论是扩展导航，隐藏的画廊，甚至是促销视频。

---

有用的工具

许多项目，特别是仪表板界面，都需要图表，而chartjs.org是将它们添加到基于Foundation的项目中的好方法。 为什么不尝试一下，以不同的方式可视化数据，设置动画和自定义？ 这些图表在Foundation框架中看起来很棒，即使在视网膜显示器上也是如此。

Chartjs使用所有现代浏览器都支持HTML5 canvas元素，而polyfill提供对IE7 / 8的支持。 该插件是无依赖的，轻量级的，并提供了许多自定义选项。

---

即将来临

在下一个教程中，我们将介绍Joyride插件（可让用户浏览您的网站），面板，定价表，常规表和交换； 您可以选择为不同的屏幕尺寸设置不同的图像。 仍然需要掩盖！

翻译自: https://webdesign.tutsplus.com/tutorials/foundation-for-beginners-progress-alerts-tooltips-and-the-elusive-mega-drop--webdesign-13195

mafft和mega