互换

JavaScript

Interchange 使用媒体查询来动态加载适合用户设备的响应式内容。

与图片配合使用

移动网络上的带宽非常宝贵

在以下示例中，我们有三种不同的图像尺寸：一种用于小型屏幕，一种用于中型屏幕，一种用于大型屏幕。使用以下格式设置响应式图像。当浏览器调整大小时，图像将自动更改。

<img data-interchange="[assets/img/interchange/small.jpg, small], [assets/img/interchange/medium.jpg, medium], [assets/img/interchange/large.jpg, large]">

图像集是按以下格式分隔的项目逗号分隔列表

[image_path, media_query]

image_path 可以是相对路径或绝对路径。media_query 可以是任何 CSS 媒体查询或 Foundation 断点 — 请参见以下的已命名媒体查询。

Interchange 按顺序评估规则，将使用最后一个匹配的规则。出于此原因，您应该从最小屏幕到最大屏幕对规则进行排序。

与 HTML 配合使用

Interchange 还可以交换整个 HTML 块。这使您可以在小型屏幕上加载对移动设备友好的组件，或在大型屏幕上加载更高级的版本。

在以下示例中，我们对 <div> 应用了 data-interchange，而不是 <img> 元素，并且路径指向 HTML 文件，而不是图像。

<div data-interchange="[assets/partials/interchange-default.html, small], [assets/partials/interchange-medium.html, medium], [assets/partials/interchange-large.html, large]"></div>

与背景图像配合使用

在非 <img> 元素上使用 Interchange 时，您可以传入图像路径，而不是 HTML 路径，并且元素的 background-image 属性将设置为匹配规则的路径。

<div data-interchange="[assets/img/interchange/small.jpg, small], [assets/img/interchange/medium.jpg, medium], [assets/img/interchange/large.jpg, large]"></div>

已命名媒体查询

Interchange 支持将已命名的查询用作完整 CSS 媒体查询的简写。Sass 中 $breakpoints 变量中定义的任何断点都将起作用，以及一些其他关键字。了解有关更改默认断点的更多信息。

查询名称	媒体查询
small	`screen and (min-width: 0em)`
medium	`only screen and (min-width: 40em)`
large	`only screen and (min-width: 64em)`
xlarge	`only screen and (min-width: 75em)`
xxlarge	`only screen and (min-width: 90em)`
portrait	`screen and (orientation: portrait)`
landscape	`screen and (orientation: landscape)`
retina	`only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx)`

要添加您自己的已命名媒体查询，请将它们作为属性添加到 Foundation.Interchange.SPECIAL_QUERIES。

Foundation.Interchange.SPECIAL_QUERIES['square'] = 'screen and (aspect-ratio: 1/1)';

程序化使用

在以编程方式使用 Interchange 时，您需要在 options 对象中传入您的规则集，以及容器元素（不是内容元素），如下所示

var $photoFrame = $('#some-container');
var interchange = new Foundation.Interchange($photoFrame, {
  rules: [
    "[path/to/default.jpg, small]", 
    "[path/to/medium.jpg, medium]",
    "[path/to/large.jpg, large]"
  ]
 });

JavaScript 参考

初始化

要使用此插件，您的 JavaScript 中必须包含以下文件

foundation.core.js
foundation.interchange.js
- 与实用程序库 foundation.util.mediaQuery.js

Foundation.Interchange

创建 Interchange 的新实例。

var elem = new Foundation.Interchange(element, options);

触发这些事件： Interchange#event:init

名称	类型	说明
`element`	Object	要添加触发器的 jQuery 对象。
`options`	Object	覆盖默认插件设置。

插件选项

使用这些选项来自定义 Interchange 实例。插件选项可以设置为单个数据属性、一个合并的 data-options 属性或作为传递给插件构造函数的对象。了解有关如何初始化 JavaScript 插件的更多信息。

名称	类型	默认值	说明
`data-rules`	`数组`	`空`	要应用于 Interchange 元素的规则。使用 `data-interchange` 数组表示法进行设置。
`data-type`	`字符串`	`自动`	要更换的响应式资源的类型。它可以获取以下选项：- `auto`（默认）：根据元素标签或资源扩展名选择类型，- `src`：更换 `[src]` 属性，建议用于图像 ``。 - `background`：更换 `background-image` CSS 属性。 - `html`：更换元素内容。

方法

replace

$('#element').foundation('replace', path);

将图像的 src 属性更新为指定路径，或将容器的 HTML 更改为该路径。

触发这些事件： Interchange#event:replaced

名称	类型	说明
`path`	字符串	图像或 HTML 部分的路径。

_destroy

$('#element').foundation('_destroy');

销毁一个 interchange 实例。