Фонд - JavaScript
В этой главе мы изучим JavaScript . Настроить JavaScript в Foundation легко; единственное, что вам нужно, это jQuery.
Установка JavaScript
Вы можете использовать загрузку ZIP, диспетчер пакетов или CDN, чтобы получить файл Foundation JavaScript. В коде вы можете предоставить ссылки на jQuery и Foundation в виде тегов <script>, помещенных перед закрывающим <body>, и проверить, загружается ли Foundation после jQuery. Для получения дополнительной информации нажмите здесь .
Файловая структура
Когда вы устанавливаете Foundation через командную строку, плагины Foundation загружаются в виде отдельных файлов, таких как foundation.tabs.js , foundation.dropdownMenu.js , foundation.slider.js и так далее. Все эти файлы объединены в foundation.js , который предоставляет все плагины одновременно. Если вы хотите использовать какой-либо плагин, сначала необходимо загрузить foundation.core.js .
Например -
<script src = "js/jquery.min.js"></script>
<script src = "js/foundation.core.js"></script>
<script src = "js/foundation.tabs.js"></script>Для некоторых плагинов могут потребоваться определенные служебные библиотеки, которые поставляются с установкой Foundation. Вы можете подробно изучить требования к конкретным плагинам в следующей главе Утилиты JavaScript .
Загрузка отдельных файлов создает накладные расходы на сеть, особенно для мобильных пользователей. Для более быстрой загрузки страницы рекомендуется использовать grunt или gulp .
Инициализация
Функция foundation () используется для одновременной инициализации всех плагинов Foundation.
Например -
(document).foundation();Использование плагинов
С помощью атрибутов данных плагины подключаются к элементам HTML, поскольку они соответствуют имени плагина. Один элемент HTML может иметь только один плагин одновременно, хотя большинство плагинов могут быть вложены в другие. Например, ссылка всплывающей подсказки создается путем добавления всплывающей подсказки с данными . Для получения дополнительной информации нажмите здесь .
Настройка плагинов
Плагины можно настроить, используя его параметры конфигурации. Например, вы можете установить скорость скольжения аккордеона вверх и вниз. Настройки плагина можно изменить глобально с помощью плагинаDEFAULTSсвойство. Для получения дополнительной информации нажмите здесь .
Добавление плагинов после загрузки страницы
Когда новый HTML добавляется в DOM, любые плагины для этих элементов не инициализируются по умолчанию. Вы можете проверить наличие новых плагинов, повторно вызвав функцию .foundation () .
Например -
$.ajax('assets/partials/kitten-carousel.html', function(data) {
$('#kitten-carousel'</span>).html(data).foundation();
});Программное использование
В JavaScript плагины могут быть созданы программно, и каждый плагин является классом глобального объекта Foundation с конструктором, который принимает два параметра, такие как элемент и объект.
var $accordion = new Foundation.Accordion($('#accordion'), {
slideSpeed: 600, multiExpand: true
});Большинство плагинов имеют общедоступный API, который позволяет управлять им через JavaScript. Вы можете просмотреть документацию плагина, чтобы изучить доступные функции и методы, которые можно легко вызвать.
Например -
$('.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.Вам разрешено выбрать любой селектор jQuery, и если этот селектор содержит несколько плагинов, то все они будут иметь идентичный выбранный метод.
Аргументы можно передавать так же, как аргументы в JavaScript.
Методы с префиксом подчеркивания (_) считаются частью внутреннего API, что означает, что без предупреждения они могут сломаться, измениться или даже исчезнуть.
События
Когда конкретная функция завершается, DOM запускает событие. Например, всякий раз, когда вкладки меняются, его можно прослушать и создать ответный ответ. Каждый плагин может запускать список событий, который будет задокументирован в документации плагина. В Foundation 6 подключаемые модули обратного вызова удалены и должны использоваться в качестве прослушивателей событий.
Например -
$('[data-tabs]').on('change.zf.tabs', function() {
console.log('Tabs are changed!');
});