Nền tảng - JavaScript
Trong chương này, chúng ta sẽ nghiên cứu về JavaScript . Thật dễ dàng để thiết lập JavaScript trong Foundation; điều duy nhất bạn yêu cầu là jQuery.
Cài đặt JavaScript
Bạn có thể sử dụng tải xuống ZIP, trình quản lý gói hoặc CDN để lấy tệp Foundation JavaScript. Trong mã của mình, bạn có thể cung cấp các liên kết đến jQuery và Foundation dưới dạng thẻ <script>, được đặt trước <body> đóng và kiểm tra xem Foundation có được tải sau jQuery hay không. Để biết thêm thông tin bấm vào đây .
Cấu trúc tệp
Khi bạn cài đặt Foundation thông qua dòng lệnh, các plugin Foundation sẽ tải xuống dưới dạng các tệp riêng lẻ như foundation.tabs.js , foundation.dropdownMenu.js , foundation.slider.js , v.v. Tất cả các tệp này được kết hợp thành foundation.js , cung cấp tất cả các plugin cùng một lúc. Nếu bạn muốn sử dụng một số plugin, đầu tiên nên tải foundation.core.js .
Ví dụ -
<script src = "js/jquery.min.js"></script>
<script src = "js/foundation.core.js"></script>
<script src = "js/foundation.tabs.js"></script>Một số plugin nhất định có thể yêu cầu các thư viện tiện ích cụ thể, đi kèm với cài đặt Foundation. Bạn có thể nghiên cứu chi tiết về các yêu cầu plugin cụ thể trong chương tiếp theo Các tiện ích JavaScript .
Tải các tệp riêng lẻ tạo ra chi phí mạng, đặc biệt cho người dùng di động. Để tải trang nhanh hơn, nên sử dụng grunt hoặc gulp .
Khởi tạo
Hàm foundation () được sử dụng để khởi tạo tất cả plugin Foundation cùng một lúc.
Ví dụ -
(document).foundation();Sử dụng plugin
Sử dụng các thuộc tính dữ liệu, các plugin được kết nối với các phần tử HTML khi chúng khớp với tên của plugin. Một phần tử HTML duy nhất có thể chỉ có một plugin tại một thời điểm, mặc dù phần lớn các plugin có thể được lồng trong các plugin khác. Ví dụ: liên kết chú giải công cụ được tạo bằng cách thêm chú giải công cụ dữ liệu . Để biết thêm thông tin bấm vào đây .
Định cấu hình các plugin
Các plugin có thể được tùy chỉnh bằng cách sử dụng cài đặt cấu hình của nó. Ví dụ, bạn có thể đặt tốc độ trượt của đàn accordion lên và xuống. Cài đặt plugin có thể được thay đổi toàn cầu bằng cách sử dụngDEFAULTSbất động sản. Để biết thêm thông tin bấm vào đây .
Thêm plugin sau khi tải trang
Khi HTML mới được thêm vào DOM, bất kỳ plugin nào trên các phần tử đó sẽ không được khởi tạo theo mặc định. Bạn có thể kiểm tra các plugin mới bằng cách gọi lại hàm .foundation () .
Ví dụ -
$.ajax('assets/partials/kitten-carousel.html', function(data) {
$('#kitten-carousel'</span>).html(data).foundation();
});Sử dụng có lập trình
Trong JavaScript, các plugin có thể được tạo theo chương trình và mỗi plugin là lớp của đối tượng Foundation toàn cầu , với một hàm tạo nhận hai tham số như một phần tử và một đối tượng.
var $accordion = new Foundation.Accordion($('#accordion'), {
slideSpeed: 600, multiExpand: true
});Phần lớn các plugin được cung cấp API công khai, cho phép bạn thao tác với nó thông qua JavaScript. Bạn có thể xem qua các tài liệu của plugin để nghiên cứu các chức năng có sẵn và các phương thức có thể được gọi một cách dễ dàng.
Ví dụ -
$('.tooltip').foundation('destroy');
// this will destroy all Tooltips on the page.
$('#reveal').foundation('open');
// this will open a Reveal modal with id `reveal`.
$('[data-tabs]').eq(0).foundation('selectTab', $('#example'));
// this will change the first Tabs on the page to whatever panel you choose.Bạn được phép chọn bất kỳ bộ chọn jQuery nào và nếu bộ chọn chứa nhiều plugin, thì tất cả chúng sẽ có phương thức đã chọn giống hệt nhau được gọi.
Đối số có thể được chuyển giống như truyền đối số sang JavaScript.
Các phương thức có tiền tố là dấu gạch dưới (_) được coi là một phần của API nội bộ, có nghĩa là, nếu không có cảnh báo, chúng có thể bị hỏng, thay đổi hoặc thậm chí biến mất.
Sự kiện
Bất cứ khi nào một chức năng cụ thể kết thúc, DOM sẽ kích hoạt một sự kiện. Ví dụ: bất cứ khi nào các tab được thay đổi, nó có thể được lắng nghe và tạo phản hồi cho nó. Mỗi plugin có thể kích hoạt danh sách các sự kiện, sẽ được ghi lại trong tài liệu của plugin. Trong Foundation 6, các plugin gọi lại bị loại bỏ và phải được sử dụng làm trình xử lý sự kiện.
Ví dụ -
$('[data-tabs]').on('change.zf.tabs', function() {
console.log('Tabs are changed!');
});