Учебники

Основа — JavaScript

Декабрь 21, 2018

В этой главе мы будем изучать JavaScript . В Foundation легко настроить JavaScript; Единственное, что вам нужно, это 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, что означает, что без предупреждения они могут сломаться, измениться или даже исчезнуть.

Вам разрешено выбрать любой селектор jQuery, и если селектор содержит несколько плагинов, то у всех будет одинаковый вызванный выбранный метод.

Аргументы могут передаваться так же, как и передача аргументов в JavaScript.

Методы с префиксом подчеркивания (_) рассматриваются как часть внутреннего API, что означает, что без предупреждения они могут сломаться, измениться или даже исчезнуть.

События

Всякий раз, когда конкретная функция завершается, DOM запускает событие. Например, всякий раз, когда вкладки меняются, их можно прослушать и создать ответ на них. Каждый плагин может инициировать список событий, которые будут документированы в документации плагина. В Foundation 6 плагины обратного вызова удалены и должны быть приняты как слушатели событий.

Например —

46
Share: