zepto 和jquery_初学者基础：粘性导航，灵活的视频和Zepto-优快云博客

本文探讨了Foundation框架中的Magellan插件，用于创建粘性导航，以及框架内的可见性类、击键、缩略图和灵活视频功能。同时介绍了zepto.js，一个轻量级的JavaScript库，作为jQuery的替代品。

zepto 和jquery

在我们对Zurb Foundation的检查的这一部分中，我们将讨论创建粘性导航的Magellan 。我们将研究可见性类，从右到左的支持，击键，缩略图，灵活的视频以及zepto的来龙去脉。我将解释这些功能的用例以及如何在您的项目中最好地实现它们。

在本届会议中，我们讨论了基金会框架的大部分内容，并且还有很长的路要走。现在让我们看一些可以快速实现到站点中的功能。这次我们将从一个名为MagellanJavaScript插件开始，它允许您向项目添加粘性导航。

麦哲伦

当用户离开标准导航（例如向下滚动页面）时，要求客户在页面上保持固定的导航并不少见。麦哲伦（Magellan）进行了救援，一旦用户滚动到某个点，便在页面上添加了固定导航。

通过简单的标记，很容易上手。

<div data-magellan-expedition="fixed">
  <ul class="sub-nav">
    <li data-magellan-arrival="contact"><a href="#">Contact</a></li>
    <li data-magellan-arrival="about"><a href="#">About</a></li>
  </ul>
</div>

存放在带有div的传统制服列表结构中，可以容纳所有内容，这应该快速，轻松地启动和运行。麦哲伦有两种特殊属性： data-magellan-expiditon用作位置类型， data-magellan-arrival可以与页面锚点之类的对象配对。

由于此JavaScript插件非常轻巧，因此您需要知道的唯一其他选项是可以在初始化时传递的选项。

$(document).foundation('magellan',{
  // specify the class used for active sections
  activeClass: 'active',
  // how many pixels until the magellan bar sticks, 0 = auto
  threshold: 0
});

同样，这里有两个选择；为自己设置一个自定义的magellan类，并在页面上设置magellan将要采取的行动。

能见度

现在您看到了，现在您没有了！通常，将您的所有内容重新设置为不同的屏幕尺寸可能会很棘手。使用Foundation的可见性类，您可以根据断点集简单地显示更多或更少的元素。让我们从“显示”类开始，所有这些类都非常简单，并带有各种断点。当我需要在智能手机和台式机之间添加/删除元素时，也许对于像iPad这样的设备，可见性类最有用。

.show-for-small       /* Visible up to 768px */
.show-for-medium-down /* Visible from 768px down */
.show-for-medium      /* Visible between 768px and 1280px */
.show-for-medium-up   /* Visible from 768px up */
.show-for-large-down  /* Visible from 1280px down */
.show-for-large       /* Visible between 1280px and 1440px */
.show-for-large-up    /* Visible from 1280px up */
.show-for-xlarge      /* Visible above 1440px only */

要在这些相同的断点处隐藏元素，只需使用“隐藏”而不是“显示”即可。也许您需要一个特定的基于方向的课程？这些也包括在内。您还会注意到触摸类。在这里宠坏了选择。

.show-for-landscape   /* Visible for landscape orientation */
.show-for-portrait    /* Visible for portrait orientation */
.hide-for-landscape   /* Hidden for landscape orientation */
.hide-for-portrait    /* Hidden for portrait orientation */

/* The touch detection classes */
.show-for-touch       /* Visible for touch enabled devices */
.hide-for-touch       /* Hidden for touch enabled devices */

同样，如果您处于狭窄的位置并且需要隐藏一些元素，或者相反，如果您发现自己处于广阔的开放空间中，则可以在其中放置更多元素，这些将非常有用。

RTL支持

我以为我会尽快解决这个问题，因为没有人真正提到从右到左的支持。

如果您有一个以阿拉伯语为中心（例如）用户群的国际项目，那么这非常方便。以波斯语为例，它使用阿拉伯字母的修改版本，该字母需要从右到左的文本。尽管BBC新闻之类的网站都演示了此功能，但他们拥有一支能够应对这一设计挑战的开发人员团队。在Foundation中，一切都为您完成。

<html class="no-js" lang="ar" dir="rtl">

用这个替换您的html标签，您将离开。等等，我知道您在想什么，我不要阿拉伯语，对吗？不用担心，还支持中文zh，波斯语fa，希伯来语hei / iw，日语ja，乌尔都语ur，意第绪yi / ji。只需使用您喜欢的语言更改“ lang”属性的值即可。

击键

我敢打赌，许多下载了Foundation的人已经跳过了击键复选框，因为您不确定它是什么。对？好吧，如果您还没有看过文档，那么您将找到答案。

击键环绕文本并将其显示为键。因此，您无需在无聊的旧文本中说出按下控制键的功能，也可以将其修饰并赋予一些含义，而不用说出它们的含义。

<kbd>ctrl</kbd> + <kbd>alt</kbd> + <kbd>del</kbd>

简单但有效，尤其是当您将按键分配给某些功能（例如使方向按钮控制轨道滑块）时。

缩图

缩略图是使用锚定样式小图像的快速方法。

这是为Foundation增添魔力的那些小细节之一。 <a class="th">图像，将其拍在<a class="th">标记中，标记为“ th”。繁荣。任务完成。这对于很少或没有设计投入的项目非常有用，因为开发人员可以使用框架中包含的最小样式使网站看起来很棒。

<a href="#" class="th" >

<img src="images/funkyTown.jpg" alt="Get down to funky town" />

</a>

Flex视频

嵌入视频可能会很痛苦，尤其是对于那些具有双重尺寸属性（很不方便）的旧的基于Flash的视频播放器，这也是一种努力。目标很简单；您想将自己喜欢的哈哈猫的视频添加到您的网站，但每天晚上睡觉前或每天早上在iPad上或在浴室时，当您在手机上观看时，肮脏的东西都会被压缩或切断。借助flex-video，您可以松一口气，然后恢复所有大声笑的动作。

将带有“ flex-video”类的流行网站（如Youtube和Vimeo）中的任何视频包装起来，然后基础将保持纵横比不变，缩放视频并防止半只大声笑猫被严重毁容或砍伤。

<div class="flex-video">

<iframe width="420" height="315" src="//www.youtube.com/embed/RcVyl9X3gFo" frameborder="0" allowfullscreen></iframe>

</div>

Zepto

在Foundation框架的每个程序包中都有一个名为“ zepto”的特殊JavaScript库，其行为与jQuery几乎相同。

在页面加载时，Foundation会查看zepto是否将运行，如果运行，则jQuery将发送至顽皮的步骤。问题是，然而，zepto不能完全替代jQuery。实际上，它比jQuery轻了大约7,100行代码，那么为什么这样做呢？为什么Foundation会为这个婴儿JavaScript库放弃jQuery？

Zepto复制了足够多的jQuery功能集，以应付Foundation布置的所有基本命令。既然框架是移动优先的，那么使用轻巧得多的库是一个明智之举，因为通过蜂窝连接将jQuery加载到移动设备上需要花费几秒钟的时间。这些额外的7,100行代码并不是多余的，因为它们处理了所有精美的动画和浏览器兼容性，以及其他工作。

我是一个非常沉重的jQuery动画用户，因此我倾向于一口气杀死zepto。但是，我最近在一个仅用于移动设备且不需要任何jQuery动画的项目上工作。使用zepto给用户带来了整整2.3秒的加载时间。因此，如果您可以避免jQuery的膨胀，那么zepto是绝佳的替代选择。

有用的工具

当您的用户不可避免地迷失在您网站上的404入侵者游戏的死胡同中时，给他们做些事情！

可在mass：werk网站上找到，这是一种有趣且可能令人上瘾的方式，可让您在下一个站点项目中迷失方向。使用箭头键控制枪<kbd>A</kbd> & <kbd>S</kbd>进行移动，并按<kbd>space</kbd>进行射击（看看我在那里做了什么？）

即将来临

在下一篇文章中，我们将研究SASS，如何获得Foundation的SASS版本，进行设置，所需的工具以及如何在将来的项目中使用这种强大的样式预处理器的简要概述。

翻译自: https://webdesign.tutsplus.com/tutorials/foundation-for-beginners-sticky-navigation-flexible-video-and-zepto--webdesign-13754

zepto 和jquery