初学者linux基础知识_初学者基础：导航

最新推荐文章于 2022-03-28 21:58:41 发布

daique1908

最新推荐文章于 2022-03-28 21:58:41 发布

阅读量203

点赞数

文章标签： java python css vue javascript ViewUI

初学者linux基础知识

前端框架最重要的方面之一是它如何处理导航。在“初学者基础”的这一部分中，我们将介绍几种导航形式，以及一些增加额外功能JavaScript工具。我还将向您介绍另一个有用的工具，该工具将帮助您成为更好的Foundation开发人员。

分区插件

Foundation最好JavaScript产品之一是Section的形式。一个用于构建多种形式的导航的插件，例如手风琴，制表符，垂直和水平导航。

这是一些示例标记：

<div class="section-container auto" data-section>
  <section>
    <p class="title" data-section-title><a href="#">Section 1</a></p>
    <div class="content" data-section-content>
      <p>Content of section 1.</p>
    </div>
  </section>
  <section>
    <p class="title" data-section-title><a href="#">Section 2</a></p>
    <div class="content" data-section-content>
      <p>Content of section 2.</p>
    </div>
  </section>
</div>

这看起来可能比我们之前介绍的要复杂一些，所以让我为您分解一下。

您创建的任何节，无论是手风琴，制表符，还是导航栏，均以div开头，先使用section-container类，然后是auto类。在同一div上添加一个空的data-section属性。此属性指示我们要处理的是哪种部分，默认情况下，Foundation假设我们需要手风琴。要使用特定类型的部分，只需将auto类更改为tabs ， accordion ， vertical-nav或horizontal-nav 。最后，添加与data-section属性值相同的类。这将确保您显示的节类型正确。

设置包装器后，我们可以添加一些内容。对于包装中的每个部分，您都需要一个标题并将该标题链接到内容：

<section>
    <p class="title" data-section-title><a href="#panel1">Section 1</a></p>
    <div class="content" data-section-content>
      <p>Content of section 1.</p>
    </div>
</section>

我们在这里可以看到每个节都包裹在<section>标记中（这使事情变得容易，尽管您可以使用div）。在每个部分中，我们都有一个<p>标记，其中带有一个title类，该title将指向相应部分的链接括起来。段落标签下面是div，用于保存该部分的内容；这有一类content 。复制上面的代码将在节包装器内创建每个节。

注意：添加vertical-nav类将在大屏幕上显示垂直导航，但是在小屏幕上将切换为手风琴。添加horizontal-nav将引起相同的行为。

深层连结

假设您要链接到部分包装的第二部分，但是当您打开页面时，默认情况下会显示第一部分。不要怕！ Foundation具有深层链接形式的内置解决方案。为了data-options=”deep_linking:true”起作用，我们需要在包装器中添加一个新属性： data-options=”deep_linking:true” 。这告诉Foundation，当用户访问带有片段标识符的URL（例如“ http://www.website.com/#section3”）时，应加载显示该部分的页面。

<div class="section-container auto" data-section data-options="deep_linking: true">
  <section>
    <p class="title" data-section-title><a href="#section1">Section 1</a></p>
    <div class="content" data-slug="section1" data-section-content>
      <p>Content of section 1.</p>
    </div>
  </section>
  <section>
    <p class="title" data-section-title><a href="#section2">Section 2</a></p>
    <div class="content" data-slug="section2" data-section-content>
      <p>Content of section 2.</p>
    </div>
  </section>
</div>

如您所见，我们添加了深度链接数据选项，还向内容div添加了data-slug属性。此数据段指示Foundation在页面加载时显示哪个部分。

侧面导航

Foundation的Side Nav（一种显示垂直菜单的简单方法）与各个部分紧密结合。 HTML结构非常简单，并在必要时允许使用分隔符。让我们看一下标记。

<ul class="side-nav">
  <li class="active"><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li class="divider"></li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a></li>
</ul>

这是一个标准的无序列表，包括包含链接的列表项。将side-nav类添加到<ul>设置所有内容，而active类可用于显示当前正在使用的链接。如果您需要划分列表项，请添加一个带有divider类的空列表项。简单。

子导航

Foundation的Sub Nav通常用于诸如过滤内容之类的事情。标记与“ Side Nav”一样简单明了，但是不同之处在于，它使用描述列表而不是无序列表。这使您可以选择使用术语以及包含链接的描述标签。 Sub Nav中没有分隔符，但是您仍然可以使用active类。这是标记：

<dl class="sub-nav">
  <dt>Filter:</dt>
  <dd class="active"><a href="#">All</a></dd>
  <dd><a href="#">Photos</a></dd>
  <dd><a href="#">Videos</a></dd>
  <dd><a href="#">Music</a></dd>
</dl>

分页

分页也是导航的一种形式。实际上，分页实际上应该包含在<nav>元素中。让我们看一下Foundation中一些分页链接的标记：

<ul class="pagination">
  <li class="arrow unavailable"><a href="">&laquo;</a></li>
  <li class="current"><a href="">1</a></li>
  <li><a href="">2</a></li>
  <li><a href="">3</a></li>
  <li><a href="">4</a></li>
  <li class="unavailable"><a href="">&hellip;</a></li>
  <li><a href="">12</a></li>
  <li><a href="">13</a></li>
  <li class="arrow"><a href="">&raquo;</a></li>
</ul>

取消列表项应该是一个箭头，这需要class arrow 。您可能要使用« 或&lsaquo; 甚至← 。请查看unicode-table.com，以获取更多示例。

分页导航类型使我们可以声明unavailable和current类，后者与我们之前介绍的活动类非常相似。您可能还想将箭头添加到最后一个列表项，这一次使用» 或&rsaquo; ，甚至是→ 。

由于这是简单的标记，因此将其添加到诸如Wordpress之类的内容管理系统非常容易。

奖励：您可以通过将ul标签包装在以pagination-centered类中的导航栏中来使pagination-centered 。与所有Foundation元素一样，分页响应Swift且易于设置样式。