jQuery

jquery-wordpress

Использование jQuery в WordPress

Ваш скрипт jQuery запускается в браузере пользователя после того, как веб-страница WordPress будет получена. Базовая конструкция jQuery состоит из двух частей: селектор, который определяет, к каким элементам HTML относится код, и действие или событие, которое определяет, что код делает или на что он реагирует. Основная конструкция события выглядит следующим образом:

Когда событие, такое как щелчок мыши, происходит в HTML элементе, выбранного селектором, функция, которая определена внутри последних круглых скобок, выполняется.

Все последующие примеры кода основаны на этом контенте HTML страницы. Предположим, что он появляется на экране управления настройками вашего плагина, определенный в файле myplugin_settings.php. Это простая таблица с радио кнопками рядом с их заголовками:

Вывод может выглядеть примерно так на вашей странице настроек:

pdh-ajax-exampleВ следующем разделе про AJAX, мы будем строить AJAX обмен, который сохраняет выбор пользователя в usermeta и добавляет ряд записей, помеченных выбранным названием. Не очень практическое применение, но оно иллюстрирует все важные шаги. jQuery код может находиться либо во внешнем файле или выводятся на страницу внутри <script> блока. Мы сосредоточимся на варианте с внешним файлом, так как передача значений от PHP требует особого внимания. Тот же самый код может быть выведен на страницу, если это кажется более целесообразным для вас.

Селектор и событие

Селектор находится в той же форме как и CSS селекторы: «.class» или «#id». Существует большое количество видов селекторов, но эти два вы будете использовать часто. В нашем примере, мы будем использовать класс «.pref». Существует также множество возможных событий, из которых вы, скорее всего, будете часто использовать событие «click». В нашем примере мы будем использовать событие «change»,  для захвата переключателя радио-кнопки. Имейте ввиду, что jQuery-события часто называют несколько иначе, чем в JavaScript. А пока, после того как мы добавим пустую анонимную функцию, наш пример будет выглядеть следующим образом:

Этот код будет «что-то делать«, когда любой элемент из «pref» класса изменяется.

Примечание: этот фрагмент кода, и все последующие примеры, для иллюстрации использования AJAX. Код не подходит для рабочего окружения, поскольку связанные с ними операции, такие как безопасный ввод, обработка ошибок и интернационализация были намеренно опущены. Убедитесь, что вы решили эти важные операции в коде рабочего проекта.

Смотрите также статью о подключении jQuery-скриптов в WordPress.

Навигация по разделам:

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *