The Foundation framework isn't new to the industry, but it is a framework that hasn't been explored completely. With its latest version, Foundation 5, it has compelled developers to use it without giving it a second thought. Along with major revamp since Foundation 4, it has brought many innovative and useful tools not implemented by any framework to date. One such tool we will explore in this article is Interchange.
Foundation框架对于行业来说并不是什么新鲜事物，但是它尚未被完全探究。 凭借其最新版本Foundation 5 ，它迫使开发人员在使用它时无需三思而后行。 自从Foundation 4以来，它进行了重大改进，带来了许多迄今为止尚未被任何框架实现的创新和有用工具。 我们将在本文中探讨的一种此类工具是Interchange 。
The Foundation 5 framework is included in the list of Best Web Design Frameworks for 2014.
Foundation 5框架包含在2014年最佳Web设计框架列表中。
Interchange, as the name suggests, is a feature that helps developers interchange content on different types of devices and screen sizes.
顾名思义，交换功能是一项功能，可帮助开发人员在不同类型的设备和屏幕尺寸上交换内容。
Imagine you have used a Google Maps script to display the current location of your offline store. It looks and works well in the desktop and tablet version of your website. But when it comes to smaller screens on mobile devices, where the speed of your website matters the most, you have think about whether the live Maps script is really the best solution.
假设您使用了Google Maps脚本来显示离线商店的当前位置。 它在您的网站的台式机和平板电脑版本中看起来都不错，并且效果很好。 但是，当涉及到移动设备上的较小屏幕时，网站的速度才是最重要的。您需要考虑实时地图脚本是否真的是最好的解决方案。
Using Interchange you can solve this problem by interchanging the Maps script with a static image of the location on the go. Sounds cool, doesn't it?
使用Interchange，可以通过将Maps脚本与旅途中的静态图像互换来解决此问题。 听起来不错，不是吗？
My main focus in writing this tutorial is not to solve your Maps problem, but various other similar situations where heavyweight web content can be optimized and replaced on mobile devices and different screen sizes.
我写本教程的主要重点不是解决您的地图问题，而是解决各种其他类似情况，其中可以优化重量级Web内容并在移动设备和不同屏幕尺寸上进行替换。
Interchange is a JS feature that comes pre-loaded in the Foundation 5 package. If you already have a Foundation 5 environment set up, you can skip the “Setting up” topic below. On the other hand, if you're completely new to Foundation, go through the following section carefully.
Interchange是JS功能，预装在Foundation 5软件包中。 如果已经设置了Foundation 5环境，则可以跳过下面的“设置”主题。 另一方面，如果您是Foundation的新手，请仔细阅读以下部分。
设置Foundation 5项目 (Setting up a Foundation 5 Project)
Just like any other CSS framework, Foundation 5 also comes with a set of CSS, JS and Font files. All the necessary files needed to run Foundation 5 come zipped from their website, foundation.zurb.com. Go ahead and download the file. Unzip the folder and copy the CSS, JS and IMG folder inside your web application.
与其他CSS框架一样，Foundation 5也附带了一组CSS，JS和Font文件。 运行Foundation 5所需的所有必需文件均从其网站foundation.zurb.com中压缩。 继续下载文件。 解压缩该文件夹，然后在您的Web应用程序中复制CSS，JS和IMG文件夹。
Create an index file named index.html and then paste the below code into it.
创建一个名为index.html的索引文件，然后将以下代码粘贴到其中。
<!DOCTYPE html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" >
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation 5</title>
<!-- If you are using CSS version, only link these 2 files, you may add app.css to use for your overrides if you like. -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/foundation.css">
<!-- If you are using the gem version, you need this only -->
<link rel="stylesheet" href="css/app.css">
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<!-- body content here -->
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>The above html is a basic recommended markup by Foundation. It has all the correct meta tags and proper linking to necessary files. Make sure all the paths to the static resources (JS, CSS, etc) are properly configured and working, according to your own project.
上面的html是Foundation推荐的基本标记。 它具有所有正确的元标记以及到必要文件的正确链接。 确保根据您自己的项目正确配置了静态资源(JS，CSS等)的所有路径，并且可以正常工作。
Foundation 5 uses Normalize and Mordernizr, so make sure they are properly linked as shown above. Here app.css is just the name of a custom CSS file. You can replace it your main CSS file's name.
Foundation 5使用Normalize和Mordernizr，因此请确保如上所示正确链接它们。 这里的app.css只是自定义CSS文件的名称。 您可以将其替换为主CSS文件的名称。
That’s it. You are all set to launch your first Foundation project.
而已。 您已经准备好启动第一个Foundation项目。
了解Foundation 5交换 (Understanding Foundation 5 Interchange)
Foundation’s Doc states:
基金会文件规定：
Interchange can now pull in HTML partials so you can load different sections of your page for particular media queries.
交换现在可以拉入HTML局部，以便您可以为特定的媒体查询加载页面的不同部分。
In simple words, as the size of the browser changes, it gets triggered automatically and loads different content meant for that screen size.
简而言之，随着浏览器大小的变化，它会自动触发并加载适合该屏幕大小的不同内容。
Interchange uses the data-interchange attribute to identify which content to load. It is a custom attribute created by Foundation 5 and intercepted by foundation.intercept.js present inside js/foundation folder.
交换使用data-interchange属性来标识要加载的内容。 它是由Foundation 5创建的自定义属性，并被js/foundation文件夹中存在的foundation.intercept.js拦截。
In this tutorial, we will check out the following demos:
在本教程中，我们将检查以下演示：
- Interchanging Maps script with a static map image in smaller screens. 在较小的屏幕中，将Maps脚本与静态地图图像互换。
- Interchanging images. 交换图像。
- What happens when JavaScript is disabled in the browser? Will Interchange still work? Let’s see. 在浏览器中禁用JavaScript时会发生什么？ 交流会仍然有效吗？ 让我们来看看。
Starting with the first example:
从第一个示例开始：
互换地图类型 (Interchanging Map type)
Situation: Display a dynamic Google Map in Desktop browsers, a larger static map image in tablets and a smaller static image in Mobile devices.
情况：在桌面浏览器中显示动态Google Map，在平板电脑中显示较大的静态地图图像，在Mobile设备中显示较小的静态图像。
Markup:
标记：
<div data-interchange="[maps/small.html, (small)], [maps/medium.html, (medium)], [maps/large.html, (large)]">
<div data-alert class="alert-box secondary radius">
This is the default content.
<a href="#" class="close">×</a>
</div>
</div>Take a closer look at the value of data-interchange attribute. It takes various rules as its value. Each rule is surrounded by square brackets (the syntax of a JavaScript array) and separated by a comma.
仔细看看data-interchange属性的值。 它以各种规则为其价值。 每个规则都用方括号(JavaScript数组的语法)括起来，并用逗号分隔。
With each rule we have two parameters: the first parameter takes the path to the content and the second parameter specifies the media query, surrounded by parenthesis.
对于每个规则，我们有两个参数：第一个参数采用指向内容的路径，第二个参数指定由括号括起来的媒体查询。
There are seven types of predefined media queries: default, small, medium, large, landscape, portrait and retina.
预定义的媒体查询有七种类型：默认，小型，中型，大型，横向，纵向和视网膜。
The last rule that returns true will be used to load the content in the specified section.
最后一个返回true的规则将用于加载指定部分中的内容。
Inside each Interchange section, we again have a child section which will be shown in case the content specified in the rule is not available. In our case, the default content is an alert box that says “This is the default content.” with a close button in the right side corner.
在每个交换区域中，我们再次有一个子区域，以防规则中指定的内容不可用。 在我们的例子中，默认内容是一个警告框，上面写着“这是默认内容”。 右上角的关闭按钮。
Check out the demo page and try resizing your browser and you will see how the Maps section changes its content.
查看演示页面并尝试调整浏览器的大小，您将看到“地图”部分如何更改其内容。
Now let’s see how to make use of Interchange for loading different resolution images.
现在，让我们看看如何利用Interchange加载不同分辨率的图像。
交换影像 (Interchanging images)
Foundation 5’s Interchange can also be used to replace images for different types of browsers. For example, we have an HD version, a medium sized version and smaller version of a same image. Let’s see how to implement this using data-interchange.
Foundation 5的Interchange还可以用于替换不同类型浏览器的图像。 例如，我们有一个高清图像，一个中等尺寸的图像和一个较小图像的相同图像。 让我们看看如何使用数据交换来实现这一点。
<img data-interchange="[img/space-small.jpg, (small)], [img/space-medium.jpg, (medium)], [img/space-large.jpg, (large)]">When using Interchange for images, it is recommended not to use src attribute. This is done for 2 reasons. First, the image specified in the src tag is going to be overridden by Foundation’s interchange script anyway and secondly, to prevent two simultaneous browser requests for a same <img> tag.
当对图像使用Interchange时，建议不要使用src属性。 这样做有两个原因。 首先，无论如何，src标记中指定的图像将被Foundation的交换脚本覆盖，其次，以防止两个浏览器同时请求相同的<img>标记。
If you further want to optimize your image for retina displays, you can specify a new rule with media query as “retina”.
如果您还想针对视网膜显示优化图像，则可以将带有媒体查询的新规则指定为“视网膜”。
data-interchange="[img/retina.jpg, (retina)]"You should always specify a default media query to guarantee that your html markup at least has some content in every device.
您应该始终指定一个默认的媒体查询，以确保您的html标记至少在每个设备中都包含一些内容。
data-interchange="[img/def.jpg, (default)]"覆盖默认媒体查询 (Overriding default media queries)
In case you are not satisfied with the media query standards provided by the framework, you can always specify your own media query. This is easily done by writing a Foundation script.
如果您对框架提供的媒体查询标准不满意，则可以始终指定自己的媒体查询。 通过编写Foundation脚本很容易做到这一点。
$(document).foundation('interchange', {
named_queries : {
ipad_4 : 'only screen and (max-width: 700px)'
}
});Next time, you can use “ipad_4” instead of one of the seven media queries.
下次，您可以使用“ ipad_4”而不是七个媒体查询之一。
Foundation 5在非基础项目中的互换 (Foundation 5’s Interchange in Non-Foundation Project)
If you want to use Interchange in your non-foundation project, you need to include three JavaScript files: jQuery, FoundationJS and FoundationInterchangeJS.
如果要在非基础项目中使用Interchange，则需要包括三个JavaScript文件：jQuery，FoundationJS和FoundationInterchangeJS。
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.interchange.js"></script>JavaScript禁用案例 (JavaScript Disabled Case)
You can always place a <noscript> tag below every section that uses Interchange Functionality.
您始终可以在使用交换功能的每个部分下面放置一个<noscript>标记。
<img data-interchange="[img/retina.jpg, (retina)]" />
<noscript><img src="img/default.jpg"></noscript>The <noscript> tag will only work when JavaScript is disabled in the browser. This feature further guarantees a section with some content.
<noscript>标记仅在浏览器中禁用JavaScript时有效。 此功能进一步保证了部分内容。
结论 (Conclusion)
This was all about how to optimize your HTML page for various types of browsers. I think Foundation’s Interchange script is an essential tool for every project these days. Hence, just making a mobile friendly design is not enough – optimized design is the demand of the hour!
这就是如何针对各种类型的浏览器优化HTML页面的全部内容。 我认为Foundation的Interchange脚本如今已成为每个项目的必备工具。 因此，仅进行移动友好的设计是不够的–优化设计是当下的需求！
To know more about Foundation framework, you can refer to the following SitePoint articles:
要了解有关Foundation框架的更多信息，可以参考以下SitePoint文章：
You can also download the source code which I have used for this tutorial and try to experiment with it.
您也可以下载本教程使用的源代码，然后尝试进行尝试。
翻译自: https://www.sitepoint.com/foundation-5-interchange-creating-dynamic-page-content/
724
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
