交換

JavaScript

交換使用媒體查詢動態載入適於使用者裝置的回應式內容。

與圖片一起使用

在行動網路中頻寬很寶貴，因此有助於在較小的螢幕上為使用者提供較小的圖片。使用交換，您可以根據使用者的螢幕大小為使用者提供特定的圖片。CSS 媒體查詢用於判斷使用者的裝置大小，以及應該提供哪個圖片。

在以下範例中，我們有三個不同大小的圖片：一個是小螢幕，一個是中螢幕，一個是大螢幕。使用以下格式設定回應式圖片。圖片會隨著瀏覽器調整大小而自動變更。

<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 中斷點—請參閱以下的命名媒體查詢。

交換依序評估規則，最後符合的規則將會被使用。因此，您應該從最小螢幕到最大螢幕來排序您的規則。

與 HTML 搭配使用

Interchange 也可以交換 HTML 的整個區塊。這讓您可以在小螢幕上載入適合行動裝置的元件，或是在大螢幕上載入更進階的版本。

在以下範例中，我們將 data-interchange 套用在 <div> 而不是 <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`	物件	要加入觸發器的 jQuery 物件。
`options`	物件	覆寫預設的外掛設定。

外掛選項

使用這些選項自訂 Interchange 的執行個體。外掛選項可以設定為個別的資料屬性、一個合併的 data-options 屬性，或作為傳遞給外掛建構函式的物件。深入了解如何初始化 JavaScript 外掛。

名稱	類型	預設	描述
`data-rules`	`陣列`	`null`	套用至 Interchange 元素的規則。使用 `data-interchange` 陣列表示法設定。
`data-type`	`字串`	`auto`	要替換的回應式資源類型。它可以採用下列選項： - `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 的執行個體。