zepto 和jquery_初学者基础：粘性导航，灵活的视频和Zepto

daique1908

关注

翻译最新推荐文章于 2026-11-10 09:06:32 发布 188 阅读 AI 写同款· GEO 优化 ›

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是绝佳的替代选择。