基金会5立交-创建动态页面内容

Foundation框架是不是新的行业，但它是尚未完全探索的框架。 凭借其最新版本， 基金会5 ，它迫使开发人员使用它没有给它一个第二个想法。 随着自基金会4大革新，它带来了不被任何框架之日起实施许多创新和有用的工具。 一个这样的工具，我们将在本文中探讨的是交换 。

该基金会5架构包含在列表中最佳网页设计框架于2014年 。

交汇处，正如它的名字所暗示的，是一种功能，帮助开发人员交流的内容在不同类型的设备和屏幕尺寸。

想象一下，你用了谷歌地图的脚本来显示您的脱机存储的当前位置。 它看起来和你的网站的台式机和平板电脑版本效果很好。 但是，当涉及到移动设备上，在您的网站的速度才是最重要的小屏幕，你想想活地图脚本是否真的是最好的解决方案。

使用交汇处，您可以通过互换地图脚本在旅途中的位置的静态图像解决这个问题。 听起来很酷，不是吗？

在写这篇教程中我的主要焦点是不是为您解决地图的问题，但其他各种类似的情况下，权重股的网页内容进行优化和替换在移动设备和不同的屏幕尺寸。

交换是一个JS功能，预装在基金会5包。 如果您已经有一个基金会5环境设置，你可以跳过下面的“设置”主题。在另一方面，如果你是完全新的基础，经过以下仔细一节。

设立基金会5项目

就像任何其他的CSS框架，基金会5还提供了一组CSS，JS和字体文件。 所有运行基金会5所需的必要文件来压缩从他们的网站， foundation.zurb.com 。 继续前进，下载文件。 解压缩的文件夹，并复制了CSS，JS和IMG文件夹中的Web应用程序中。

创建一个名为index.html的索引文件，然后将下面的代码粘贴到其中。

上面的html是由基金会基本推荐的标记。 它拥有所有正确的meta标签和适当的链接到所需的文件。 确保所有的路径的静态资源（JS，CSS等）的正确配置和工作，根据你自己的项目。

基金会5采用标准化和Mordernizr，所以一定要确保他们得到适当的挂钩，如上图所示。 这里app.css仅仅是一个自定义的CSS文件的名称。 你可以更换你的主css文件的名称。

就是这样。 你们都将推出你的第一个基金项目。

了解基金会5交汇处

基金会的文件状态：

立交现在可以在HTML中的谐音拉那么你可以加载页面的不同部分特定媒体查询。

简单地说，作为浏览器的大小变化，它就会自动触发和负荷意味着该屏幕大小不同的内容。

交换使用data-interchange属性来标识要加载的内容。 它是由基金会5创建和截取自定义属性foundation.intercept.js目前里面js/foundation文件夹。

在本教程中，我们将看看下面的演示：

• 交换地图的脚本，在较小的屏幕上的静态地图图像。
• 交换图像。
• 当的Javascript在浏览器中被禁用，会发生什么？ 将交流还有效吗？ 让我们来看看。

从第一个例子：

互换地图类型

情况：显示一个动态的谷歌地图在桌面浏览器，在平板电脑较大的静态地图图像，并在移动设备较小的静态图像。

标记：

 
 
 This is the default content. × 
 

仔细看看的价值data-interchange属性。 这需要各种规则作为它的值。 每个规则是用方括号（Javascript数组的语法），并用逗号隔开。

每个规则，我们有两个参数：第一个参数需要的路径，内容，第二个参数指定媒体查询，用括号包围。

有七种类型的预定义的媒体查询：默认情况下，小型，中型，大型，风景，人像和视网膜。

返回TRUE的最后一条规则将被用来加载指定部分中的内容。

在每个交换部分，我们再有，将显示在案件已在规则中指定的内容是不可用的子部分。 在我们的例子中，默认内容是说：“这是默认的内容。”与右侧角球关闭按钮的警告框。

退房的演示页并尝试调整您的浏览器，你将看到如何在地图部分改变其内容。

现在让我们看看如何利用交汇处加载不同分辨率的图像。

图像互换

基座5的交汇处，也可以用来代替图片不同类型的浏览器。 例如，我们有一个高清版本，一个中等大小的版本和一个相同的图像的较小版本。 让我们来看看如何使用的数据交换来实现这一点。

当使用交汇处的影像时，建议不要使用src属性。 这样做是出于两个原因。 首先，在src标签中指定的图像将是由基金会的交流剧本无论如何，其次被重写，以防止对相同的两个浏览器同时请求标签。

如果您还想要优化你的图像视网膜显示器，您可以指定媒体查询一个新的规则为“视网膜”。

 data-interchange="[img/retina.jpg, (retina)]"

你应该总是指定一个默认的媒体查询，以保证您的html标记，至少在每一个设备上的某些内容。

 data-interchange="[img/def.jpg, (default)]"

覆盖默认的媒体查询

如果你是不满意的框架所提供的媒体查询的标准，你可以随时指定自己的媒体查询。 这是很容易写一个基金会脚本完成。

 $(document).foundation('interchange', { named_queries : { ipad_4 : 'only screen and (max-width: 700px)' } });

下一次，你可以用它代替七大媒体查询中的一个“ipad_4”。

基金会5的交汇处非基础项目

如果你想使用交换在你的非基础项目，您需要包括三个Javascript文件：jQuery的，FoundationJS和FoundationInterchangeJS。

禁用Javascript案例

您可以随时放置

该

结论

这是所有关于如何优化你的HTML页面的不同类型的浏览器。 我认为基金会的交汇处脚本是为每个项目的必备工具，这些天。 因此，仅仅做一个移动友好的设计是不够的 - 优化设计是小时的需求！