Nền tảng - Tiện ích JavaScript
Foundation bao gồm các tiện ích JavaScript được sử dụng để thêm các chức năng phổ biến. Nó rất hữu ích và dễ sử dụng. Thư viện tiện ích JavaScript này có thể được tìm thấy trong thư mục Your_folder_name / node_modules / foundation-sites / js
Cái hộp
Thư viện Foundation.Box bao gồm một số phương thức.
Các js/foundation.util.box.js là tên tệp tập lệnh, có thể được bao gồm trong khi viết mã.
Có thể chuyển các đối tượng jQuery hoặc các phần tử JavaScript thuần túy cho cả hai phương thức.
var dims = Foundation.Box.GetDimensions(element);Đối tượng trả về chỉ định thứ nguyên của phần tử là:
{
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: ...
}
}Chức năng ImNotTouchingYou được bao gồm.
Dựa trên phần tử được truyền, giá trị Boolean được trả về, giá trị này là xung đột với cạnh cửa sổ hoặc tùy chọn hoặc phần tử mẹ.
Hai tùy chọn được chỉ định trong dòng được đưa ra bên dưới tức là leftAndRightOnly, topAndBottomOnly được sử dụng để xác định va chạm chỉ trên một trục.
var clear = Foundation.Box.ImNotTouchingYou (
element [, parent, leftAndRightOnly, topAndBottomOnly]);Bàn phím
Có nhiều phương pháp trong Foundation.Keyboard , giúp tương tác sự kiện bàn phím dễ dàng.
Các js/foundation.util.keyboard.js là tên tệp tập lệnh, có thể được bao gồm trong khi viết mã.
Đối tượng Foundation.Keyboard.keys bao gồm các cặp khóa / giá trị, những khóa nào được sử dụng trong khuôn khổ thường xuyên hơn.
Bất cứ khi nào phím được nhấn thì Foundation.Keyboard.parseKey được gọi để lấy một chuỗi. Điều này giúp quản lý đầu vào bàn phím của riêng bạn.
Đoạn mã sau được sử dụng để tìm tất cả các phần tử có thể lấy tiêu điểm trong phần tử $ đã cho . Do đó, bạn không cần viết bất kỳ hàm và bộ chọn nào.
var focusable = Foundation.Keyboard.findFocusable($('#content'));Hàm handleKey là một hàm chính của thư viện này.
Phương pháp này được sử dụng để xử lý sự kiện bàn phím; nó có thể được gọi bất cứ khi nào bất kỳ plugin nào được đăng ký với tiện ích.
Foundation.Keyboard.register('pluginName', {
'TAB': 'next'
});
...//in event callback
Foundation.Keyboard.handleKey(event, 'pluginName', {
next: function(){
//do stuff
}
});Có thể gọi hàm Foundation.Keyboard.register khi bạn muốn sử dụng các ràng buộc khóa của riêng mình.
MediaQuery
Thư viện MediaQuery là xương sống của tất cả các kỹ thuật CSS đáp ứng.
Các js/foundation.util.mediaQuery.js là tên tệp tập lệnh, có thể được bao gồm trong khi viết mã.
Các Foundation.MediaQuery.atLeast ( 'lớn') được sử dụng để kiểm tra xem màn hình ít nhất là rộng như một breakpoint.
Các Foundation.MediaQuery.get ( 'vừa') được truy vấn phương tiện truyền thông của một breakpoint.
Các Foundation.MediaQuery.queries là một mảng của các truy vấn phương tiện truyền thông, Quỹ sử dụng cho breakpoint.
Các Foundation.MediaQuery.current là một chuỗi các kích thước breakpoint hiện hành.
Foundation.MediaQuery.get('medium');
Foundation.MediaQuery.atLeast('large');
Foundation.MediaQuery.queries;
Foundation.MediaQuery.current;Đoạn mã sau sẽ truyền phát thay đổi truy vấn phương tiện trên cửa sổ.
$(window).on('changed.zf.mediaquery', function(event, newSize, oldSize){});Chuyển động & Di chuyển
Foundation.Motion javascript tương tự như thư viện Motion UI, được bao gồm trong Foundation 6. Nó được sử dụng để tạo chuyển tiếp CSS tùy chỉnh và hoạt ảnh.
Các js/foundation.util.motion.js là tên tệp tập lệnh, có thể được bao gồm trong khi viết mã.
Foundation.Move được sử dụng để làm cho hoạt ảnh được hỗ trợ bởi CSS3 trở nên đơn giản và trang nhã.
requestAnimationFrame();phương thức yêu cầu trình duyệt thực hiện một hoạt ảnh; nó yêu cầu hàm hoạt ảnh của bạn được gọi trước khi trình duyệt thực hiện lần sơn lại tiếp theo.
Foundation.Move(durationInMS, $element, function() {
//animation logic
});Khi hoạt ảnh hoàn tất, finish.zf.animate được kích hoạt.
Hẹn giờ & hình ảnh đã tải
Quỹ đạo sử dụng cả hai, bộ đếm thời gian chức năng và hình ảnh được tải. Cácjs/foundation.util.timerAndImageLoader.js là tên tệp tập lệnh, có thể được bao gồm trong khi viết mã.
var timer = new Foundation.Timer($element, {duration: ms, infinite: bool}, callback);Phương thức tải hình ảnh chạy một hàm gọi lại trong bộ sưu tập jQuery của bạn khi hình ảnh được tải hoàn toàn.
Foundation.onImagesLoaded($images, callback);Chạm
Các phương pháp được sử dụng để thêm các sự kiện kéo giả và vuốt đến các phần tử.
Các js/foundation.util.touch.js là tên tệp tập lệnh, có thể được bao gồm trong khi viết mã.
Các addTouch phương pháp được sử dụng để các yếu tố ràng buộc để chạm vào các sự kiện trong các plugin Slider cho các thiết bị di động.
Các spotSwipe phương pháp liên kết các yếu tố với các sự kiện hãy vuốt bằng plugin Orbit cho các thiết bị di động.
$('selector').addTouch().on('mousemove', handleDrag);
$('selector').spotSwipe().on('swipeleft', handleLeftSwipe);Gây nên
Nó kích hoạt sự kiện được chỉ định cho các phần tử đã chọn.
Các js/foundation.util.triggers.js là tên tệp tập lệnh, có thể được bao gồm trong khi viết mã.
Các trình kích hoạt được sử dụng trong nhiều plugin Foundation.
$('selector').on('open.zf.trigger', handleOpen);
$('selector').on('close.zf.trigger', handleClose);
$('selector').on('toggle.zf.trigger', handleToggle);Hai phương pháp sau được sử dụng trong thư viện này tức là thay đổi kích thước và cuộn.
Phương thức resize () kích hoạt sự kiện thay đổi kích thước khi sự kiện thay đổi kích thước xảy ra.
Phương thức scroll () kích hoạt sự kiện cuộn khi một sự kiện cuộn xảy ra.
$('#someId').on('scrollme.zf.trigger', handleScroll);
$('#someId').on('resizeme.zf.trigger', handleResize);Điều khoản khác
Foundation chứa ít tính năng trong thư viện cốt lõi, được sử dụng ở nhiều nơi.
Các js/foundation.core.js là tên tệp tập lệnh, có thể được bao gồm trong khi viết mã.
Foundation.GetYoDigits ([số, không gian tên]) trả về một uid cơ sở-36 ngẫu nhiên với không gian tên. Nó trả về độ dài chuỗi dài 6 ký tự theo mặc định.
Foundation.getFnName (fn) trả về tên hàm JavaScript.
Foundation.transitionend xảy ra khi quá trình chuyển đổi CSS hoàn tất.