Foundation之导航栏详解-Web前端之家

让我们继续为基于Foundation的项目添加更多的功能,如将学习Joyride插件,该插件帮助引导用户来使用你的站点;还会学习价格表格、标准表格和交换功能:一种新奇响应式图片工具。我们通过一些模版示例,你还可以下载源码来学习如何实现这些特性的。

最近一段时间实在是太忙了,公司事情多,自己的事情也多,都没时间更新博客了。项目基本完成,腾出点时间更新下博客了。

我们将从最简单的特性开始讲解。

今天谈的内容还是Foundation,先前发布过二篇文章了。下面就说下第三章-Foundation之导航栏详解。一个前端框架是否优秀,其中看该框架如何处理导航栏。我们先来看几种形式用javascript工具实现效果的导航栏。我还会介绍另一种有益于你更好地成为Foundation开发者、很有用的工具。废话少说,进入正题:

面板

我们先介绍下一款插件:section插件:

在任意元素中添加一个类“panel”,就会形成一个简单颜色块。这种“块”显示的盒模型是“border-box”,因此添加padding的话,不会添加元素的宽高,只会向内扩展。这样就很方便来控制元素的大小了。

Foundation提供其中一个最好的javascript插件就是Section:类似于tabs有选择性地,在同一时间内显示一块页面内容。Section主要以几种形式的导航栏出现,如手风琴式导航,tabs,
垂直和水平导航。效果如下图:

Wehaveasimpleselectionofhostingpackagesforyoutochoosefrom,thesewillworkfantasticallyforanycompany.WithultrafastmySQLdatabaseconnections,contentmanagementsystemsreallyfly.Addtothis24/7customersupportand99.9%uptimeandyou’vegotagreathostingpackage.

Section1

为了更好地说明,我添加两列,宽度都为“large-6”,一列是图片,一列是面板,这样就可以很好地对齐了。

Contentofsection1.

价格表格

Section2

有时候,创建一个网站的一个比较重要的理由就是卖东西,因此,价格表格经常出现在网站上,另外,Foundation也覆盖了这个功能,但和传统表格不一样的是,这些表格实际上就是一个无序列表,搭配指定的类形成的。

Contentofsection2.

Startup

这段代码可能比前面章节都要复杂些,我来解释一下:

$9.95

不管你打算创建哪种形式的Section,都要以

Anawesomepackagetogetanycompanyontotheirfeet.Withinstantsetupandmagicmoneymakingplugins.

开头,这个data-section属性声明我们正在使用哪种Section,class:auto指明使用Foundation默认的风格:手风琴。如果想使用上其他风格的话,可以把auto改为tabs,accordion,vertical-nav或者是horizontal-nav。最后给data-section赋上相同class值,来确认你用对特定形式的section。

1Database

接下来需要添加

5GBStorage

块,里面添加一个title和该title链到内容的链接:

20Users

Section1

BuyNow

Contentofsection1.

从代码示例中可以看到,ul元素有一个类“pricing-table”,然后在li元素中倒使用很多类,包括
“title”,“price”,“description”,“bullet-item”和“cta-button”。而你只要做的是,定制你的内容。
你应该还会添加多个价格表格来起对比的作用。

从上面代码可以看出每个Section都是有

标准表格

容器包含着。还有一个

价格表格作用很大吧,接下来你可以需要一个真的的表格来展示数据,在Foundation中使用表格也是很简单的,首先创建一个table,包含其他元素,而你只要做的只是为每一列设置宽度即可。

标签,添加class为title,
链接链到相对应的内容。接着下面包含的是Section要显示内容块,需要添加class为content,
重复多个

Startup

内容就可以创建多个Section了。

Enterprise

备注:添加class名vertical-nav或者horizontal-nav时,在大屏幕上正常显示垂直或者水平的导航栏,但遇到小屏幕时就会自动转换成accordin风格导航。

GlobalCorporation

深层链接

1Database

假设你想默认链接到第二个section,但是当你打开页面时,它还是默认显示第一个section的内容。不用纠结!Foundation本身就提供了解决方案,方案就是需要添加一个新的属性值:data-options=”deep_linking:true”在外面的section容器。当用户浏览一个有锚点的url时,例如

5Database

Section1

10Database

Contentofsection1.

NoBackups

Section2

50GBBackups

Contentofsection2.

100GBBackups

从上面的代码,应该注意到在

交换插件

这个内容div里面添加了一个新属性为data-slug,是用来告诉Foundation加载页面时,先显示哪个Section。侧导航

虽然在Foundation中所有图片默认都是流式布局的,而有时候你却改变一下:图片能够响应式。

Foundation的侧导航通常被包含在内容div里面。它的html架构也是非常简单的,而且可以使用divider分区分。看如下代码所需要的标签:

现在有一个问题就是在图片中有文本。最近Zurb增加了一个插件叫“交换”;实现原理也是很简单的,当屏幕大小为指定时,就使用不同的图片来替换你选择的图片。实现过程就是通过添加特定属性,为“data-interchange”。这是用来选择图片源改变的选择。

Link1

如上看出,我添加很多选择性的属性值,里面有很多参数,这样你就选择性地设置定制的点来交换不同的图片。

Link2

这并不是一个高性能的插件,因为交换是需要一到两秒的时间,Zurb有希望在将来会解决这个问题。这个插件的主要好处之一就是它减少在移动设备上的加载时间,因为会下载更小优化过的相同图片,使得更好地加载网页其他部分。

Link3

Joyride插件

Link4

在前面的每一节教程中,都会涉及学习一个插件,但这次,我们将学习两个。

代码显示的是一段标准的无序列表,包含一系列内嵌链接的子项。无论你想要什么,添加关键class:side-nav到ul,然后在li里添加class:active表明当前显示的子项链接。如果你想区分子项,就可以添加一段

在某情况下,引导用户来熟悉你的网站对用户来说一种很好帮助。例如,Google在推出新的特性时候,就会这样做。通过一步一步地指引你的用户,并
且解释每一部分都是怎么使用的。Joyride插件实现过程就是添加一个列表,来表示每一步指引。这列表可
以是有序列表或者无序列表,但是都必须添加类“joyride-list”和属性“data-joyride”。

代码来显示分界线。子导航

Let’sgetstarted,herewehaveanintro.

Foundation的子导航通常用来过滤、挑选特定的内容。但是子导航并不是像前面那样使用无序列表,而是使用描述列表。这样的好处就是有选择地使用描述标签来定义特定术语包含链接。这里就不能使用divider了,但依然还是用使用class:active,见代码如下:

FirstStop

Hereweusethenewinterchangefunctiontochangeimagesbasedonscreensize.

Filter:

SecondStop

Weareusingpricingtablesheretodisplayalistofservicesfromahostingcompany.

All

ThirdStop

Thisisjustalinkbutitopensamodalwithastandardtableinside,excitingeh?

Photos

EndOfTheLine

Ourtourendshere,pleaseremembertotakeallyourbelongingswithyouonyourwaytotheexit.

每一个li项目都必须添加“data-id”,如果fist
stop是一个h2标签,那么你的data-id就是“data-id=”title””了。然后h2元素就要添加一个id为“title”。

接下来你将要添加一个“next”的按钮告诉用户如何操作进入下一步。这里就需要添加一个新的属性“data-text”到每一个li上去,在上面的代码中可以看出,使用了值“Go”来开始,使用值“Next”来进入下一步。

还有其他一些选择可以直接添加到li项目的,比如data-options=”tipLocation:top;
tipAnimation:fade”
,你可能猜出作用就是显示内容的位置和淡入进来。还有很多参数可以使用在JavaScript初始化中,你还可以使用cookies插件,如果用户登录时
保存一个选择就是只是显示一次。

有用的工具

有点不足的是,Foundation没有包含一个证明插件或者特性,如果实现这些那就非常方便了,Quovolver可以弥补通过设置一个简单的设置和灵活的标记。在你的页脚中添加脚本,去掉一些标记。

总结

接下来我们将学习Magellan,
用来创建一个粘性的导航栏。还学习可视化类,支持右到左,键盘响应,缩略图,flex视频和zepto的细节。我都将一一解释这些特性,并且学习如何更好地在自己的项目中实现出来。

Videos

Music

分页功能

分页功能也是导航中的一种;事实上,分页应该被包含在

元素当中,Foundation使用哪些标记来实现分页,见如下代码:

«

1

2

3

4

12

13

»

分页中左右两侧通常都用箭头表示,那就需要用到class:arrow,左侧内容上使用左箭头:«或者‹,甚至←右侧使用右箭头:»
,或者 ›,甚至→,更多字符编码到unicode-table.com来查找。

新澳门萄京娱乐场官网,分页导航允许我们使用class:unavailable 和
current,分别表示不可用状态和当前使用状态。

上面段代码添加到如WordPress的内容管理系统中去是相当简单的。

提示:你可以给ul添加一个class:pagination-centered来居中分页导航,就好像Foundation所有元素那样,分页功能是响应式并且很容易去改变样式的。

有用的工具

使用响应式前端框架,如Foundation,是一种快速的途径使得你的工程很好地显示在所有的设备上,但是测试页面依然是一件繁琐的任务。为了减轻测试工作,我开发了一个工具叫
Respondr,只要输入url,就可以把内容显示在智能手机、平板电脑和普通电脑上,可以很快地发现页面上的不足。

总结

这章节就说到这里,现在您是否对Foundation有了一定的了解了呢。后面在第四章学习顶栏插件、面包屑导航和另外一些有用工具。如您有任何问题可以给我留言,猛搓这里:在线留言

发表评论

电子邮件地址不会被公开。 必填项已用*标注