基礎 - JavaScript 工具

上一頁
下一頁

Foundation 包含用於新增常見功能的 JavaScript 工具。它非常有用且易於使用。此 JavaScript 工具庫可以在 Your_folder_name/node_modules/foundation-sites/js 資料夾中找到。

盒子

  • Foundation.Box 庫包含一些方法。

  • js/foundation.util.box.js 是指令碼檔名，在編寫程式碼時可以包含它。

  • 兩種方法都可以傳遞 jQuery 物件或純 JavaScript 元素。

var dims = Foundation.Box.GetDimensions(element);

返回的物件指定了元素的尺寸，如下所示：

{
   height: 54,
   width: 521,
   offset: {
      left: 198,
      top: 1047
   },
   
   parentDims: {
      height: ...    //The same format is share for parentDims and windowDims as the element dimensions.
   },
   
   windowDims: {
      height: ...
   }
}

  • 包含 ImNotTouchingYou 函式。

  • 根據傳遞的元素，返回一個布林值，表示是否與視窗邊緣或可選的父元素衝突。

  • 下面給出的行中指定的兩個選項，即 leftAndRightOnly、topAndBottomOnly，用於僅識別一個軸上的碰撞。

var clear = Foundation.Box.ImNotTouchingYou (
   element [, parent, leftAndRightOnly, topAndBottomOnly]);

鍵盤

  • Foundation.Keyboard 中有許多方法，有助於簡化鍵盤事件互動。

  • js/foundation.util.keyboard.js 是指令碼檔名，在編寫程式碼時可以包含它。

  • 物件 Foundation.Keyboard.keys 包含鍵值對，其中鍵在框架中更常使用。

  • 每當按下鍵時，就會呼叫 Foundation.Keyboard.parseKey 以獲取字串。這有助於管理您自己的鍵盤輸入。

以下程式碼用於查詢給定$element內的所有可聚焦元素。因此，您無需編寫任何函式和選擇器。

var focusable = Foundation.Keyboard.findFocusable($('#content'));

  • handleKey 函式是此庫的主要函式。

  • 此方法用於處理鍵盤事件；每當任何外掛向實用程式註冊時，都可以呼叫它。

Foundation.Keyboard.register('pluginName', {
   'TAB': 'next'
});

...//in event callback
Foundation.Keyboard.handleKey(event, 'pluginName', {
   next: function(){
      //do stuff
   }
});

當您想使用自己的鍵繫結時，可以呼叫 Foundation.Keyboard.register 函式。

媒體查詢

  • MediaQuery 庫是所有響應式 CSS 技術的支柱。

  • js/foundation.util.mediaQuery.js 是指令碼檔名，在編寫程式碼時可以包含它。

  • Foundation.MediaQuery.atLeast('large') 用於檢查螢幕寬度是否至少與斷點一樣寬。

  • Foundation.MediaQuery.get('medium') 獲取斷點的媒體查詢。

  • Foundation.MediaQuery.queries 是媒體查詢的陣列，Foundation 用於斷點。

  • Foundation.MediaQuery.current 是當前斷點大小的字串。

Foundation.MediaQuery.get('medium');
Foundation.MediaQuery.atLeast('large');
Foundation.MediaQuery.queries;
Foundation.MediaQuery.current;

以下程式碼在視窗上廣播媒體查詢更改。

$(window).on('changed.zf.mediaquery', function(event, newSize, oldSize){});

運動與移動

  • Foundation.Motion javascript 類似於 Motion UI 庫，該庫包含在 Foundation 6 中。它用於建立自定義 CSS 過渡和動畫。

  • js/foundation.util.motion.js 是指令碼檔名，在編寫程式碼時可以包含它。

  • Foundation.Move 用於使 CSS3 支援的動畫簡單而優雅。

  • requestAnimationFrame(); 方法告訴瀏覽器執行動畫；它請求在瀏覽器執行下一次重繪之前呼叫您的動畫函式。

Foundation.Move(durationInMS, $element, function() {
   //animation logic
});

動畫完成後，將觸發 finished.zf.animate。

計時器與影像載入

Orbit 使用計時器函式和影像載入。js/foundation.util.timerAndImageLoader.js 是指令碼檔名，在編寫程式碼時可以包含它。

var timer = new Foundation.Timer($element, {duration: ms, infinite: bool}, callback);

影像載入方法在影像完全載入時在您的 jQuery 集合中執行回撥函式。

Foundation.onImagesLoaded($images, callback);

觸控

  • 這些方法用於向元素新增偽拖動事件和滑動。

  • js/foundation.util.touch.js 是指令碼檔名，在編寫程式碼時可以包含它。

  • addTouch 方法用於將元素繫結到 Slider 外掛中移動裝置的觸控事件。

  • spotSwipe 方法將元素繫結到 Orbit 外掛中移動裝置的滑動事件。

$('selector').addTouch().on('mousemove', handleDrag);

$('selector').spotSwipe().on('swipeleft', handleLeftSwipe);

觸發器

  • 它為選定的元素觸發指定的事件。

  • js/foundation.util.triggers.js 是指令碼檔名，在編寫程式碼時可以包含它。

  • 觸發器在許多 Foundation 外掛中使用。

$('selector').on('open.zf.trigger', handleOpen);
$('selector').on('close.zf.trigger', handleClose);
$('selector').on('toggle.zf.trigger', handleToggle);

此庫中使用了以下兩種方法，即 resize 和 scroll。

  • resize() 方法在發生 resize 事件時觸發 resize 事件。

  • scroll() 方法在發生 scroll 事件時觸發 scroll 事件。

$('#someId').on('scrollme.zf.trigger', handleScroll);
$('#someId').on('resizeme.zf.trigger', handleResize);

其他

  • Foundation 在核心庫中包含一些功能，這些功能在許多地方使用。

  • js/foundation.core.js 是指令碼檔名，在編寫程式碼時可以包含它。

  • Foundation.GetYoDigits([number, namespace]) 返回一個帶有名稱空間的隨機 36 進位制 uid。預設情況下，它返回長度為 6 個字元的字串。

  • Foundation.getFnName(fn) 返回 JavaScript 函式名稱。

  • Foundation.transitionend 在 CSS 過渡完成後發生。

列印頁面
上一頁
下一頁
廣告