Использование встроенного интерфейса jQuery в моей теме

25

На каждой странице моей темы нужно будет использовать jquery UI. Я знаю, что он включен в Drupal 7, но я не могу расшифровать слишком техническую документацию Drupal. Похоже, единственный способ сделать это с помощью файла template.php. Но так как я не понимаю этот файл, я пытаюсь избежать этого.

Есть ли другой способ, или я должен просто попробовать файл template.php?

Бен
источник
Что ты пытаешься сделать? Все функции пользовательского интерфейса jquery и то, что не должно быть доступно для вас. Выполнить пользовательский код JS на каждой странице? Выполнить это на определенной странице? конкретное событие? Есть много способов заставить JS выполняться, а именно drupal_add_js
LSU_JBob
Я пытаюсь использовать .datepicker () для некоторых полей, которые появляются на каждой странице в моей теме. Может быть, еще кое-что позже.
Бен
@Ben Не забудьте назначить награду, если ответ решил вашу проблему.
googletorp
@googletorp Извините, моя первая награда. Награда присуждается.
Бен
Я чувствую, что многие ответы опускаются на последнем этапе, что, как только вы добавите drupal_add_library ('system', 'ui.button') или что-то еще, вам нужно добавить строку или два javascript в вашу тему, которая фактически вызывает плагин.
Райан Прайс

Ответы:

36

Добавление JS на страницу действительно не так сложно, даже если вам нужно использовать php.

Для обычных файлов JS вы можете сделать что-то вроде этого

drupal_add_js($path_to_js)

Однако Drupal зарегистрировал пользовательский интерфейс jQuery в библиотеках, что облегчает добавление файлов JS и CSS для некоторых плагинов пользовательского интерфейса jQuery. Это можно сделать с помощью

drupal_add_library($module, $library);

Все плагины jQuery UI существуют в системном модуле, так что вы можете сделать

drupal_add_library('system', 'ui');

или

drupal_add_library('system', 'ui.accordion');

Некоторые из этих плагинов имеют зависимости, потому что они используют другие плагины. Drupal обрабатывает это очень умно и будет включать в себя необходимые компоненты.

Вы можете увидеть полный список плагинов jQuery здесь . Он отформатирован как массив PHP, но обычно соглашение об именах - ui.PLUGIN-NAME.

Если вам нужно добавить JS на каждую страницу, вы можете просто добавить обработчик страницы предварительной обработки и добавить их туда. Это будет выглядеть примерно так в файле template.php.

function NAME_OF_THEME_preprocess_page(&$variables) {
  drupal_add_library('system', 'ui');
  drupal_add_library('system', 'ui.accordion');
  drupal_add_library('system', 'effects.highlight');
}
googletorp
источник
Я попытался добавить именно то, что у вас здесь (но вместо имени NAME_OF_THEME) в файл template.php, но это не сработало. Любые идеи? Вот что у меня есть: function nocturnal_preprocess_page(&$variables) { drupal_add_library('system', 'ui'); drupal_add_library('system', 'ui.datepicker'); }
Бен
@ben Вам необходимо очищать кеш каждый раз, когда вы добавляете новую функцию ловушки или предварительной обработки. Попробуйте очистить кеш. Вам также нужен способ проверить, работает ли он, поскольку вы добавляете только файлы JS, которые сами по себе ничего не делают.
googletorp
Я очистил кеш, и он должен работать с некоторыми полями даты, которые ранее использовали пользовательский интерфейс jquery, на который ссылаются вручную. Все еще отлаживаю, но пока не могу найти ничего плохого.
Бен
@Ben Первый шаг - посмотреть на источник и посмотреть, включены ли файлы (отключите агрегацию JS, если она включена)
googletorp
3
@googletorp: Не могли бы вы немного рассказать о разнице между drupal_add_library('system', 'ui');и drupal_add_library('system', 'ui.accordion');? Первый получает все или только ядро? Нужна ли мне строка для каждого плагина, который я использую?
Ярл
4

Вы пробовали модуль date_popup ? хорошо работает с API формы

LSU_JBob
источник
Я не хочу модуль, потому что форма, которая нуждается в нем, очень сложна и требует специального кодирования. Это жестко закодировано в шаблоне для темы. Я пытаюсь найти лучший способ использовать пользовательский интерфейс jquery, который поставляется с Drupal. Единственный способ заставить его работать - это поместить его в папку моей темы и связать там. Но поскольку я запускаю несколько сайтов на одной установке Drupal, и все эти сайты будут нуждаться в jQuery UI, я хотел просто использовать встроенный jQuery UI для предотвращения дублирования работы.
Бен
у вас должна быть возможность вызывать любые jQuery-интерфейсы с любого сайта и добавлять их в ядро ​​drupal. Форма построена с помощью API формы?
LSU_JBob
2
Почему форма встроена в файлы шаблона? это не очень дружественно ... если вы не используете API формы, вы упускаете некоторые преимущества, такие как встроенная защита от атак SQL-инъекций. Я бы настоятельно рекомендовал извлечь ваши формы из файлов шаблонов и написать собственный модуль, в котором вы создаете формы, используя API форм. Постарайся не быть ковбоем. В любом случае вы можете ссылаться на javascript из любого места, используя drupal_add_js, что-то вроде этого drupal_add_js ('/ misc / ui / jquery.ui.core.min.js', 'file'); И drupal_add_js ('/ misc / ui / jquery.ui.datepicker.js', 'file');
LSU_JBob
3
Создайте форму в пользовательском модуле, используя API формы, затем в файлах tpl вызовите render (drupal_get_form ('form_id')); Я обещаю, что форма api, возможно, с каким-то пользовательским javascript, может справиться с любыми сложными требованиями Я чувствую, что вы только усложняете себе задачу, пытаясь втиснуть всю эту функциональность в файл tpl. С технической точки зрения это слой темы, поэтому не рекомендуется использовать большие куски функционального внутреннего кода в них.
LSU_JBob
3
Я думаю, что он говорит СОЗДАТЬ модуль. Функциональные вещи, такие как формы, принадлежат модулям. API форм позволяет вам создавать любые формы, которые вы можете себе представить, в своем собственном модуле. Тема должна быть независимой от функциональности в большинстве случаев. Это даст вам больше гибкости в будущем.
Джонатан Ровни
4
  1. Рефакторинг вашей жестко запрограммированной формы в файле .tpl в реализацию Form API. Как сказал @LSU_JBob, нет причин, по которым вам следует создавать форму без использования FAPI. Я рекомендую вам прочесть Руководство по быстрому запуску API форм и добавить закладку в справочную страницу API форм .
  2. После того, как вы создали свою форму и сможете отправлять в нее значения, обрабатывать ее и т. Д., Загрузите и прочитайте код в модуле « Дата добавления». Дата используется для предоставления типа всплывающего окна даты, которое вы хотите создать, но для CCK в D6 и основных полей в D7. Хотя вы не хотите работать с полями, модуль Date использует пользовательский интерфейс JQuery для выполнения того, что вы пытаетесь сделать. Этот модуль должен дать вам твердый пример.
любитель бариста
источник
Спасибо. Эти ссылки полезны. Мне не очень нравится изучать PHP, но я думаю, что делать именно то, что я хочу, в этом случае, я должен. Я, вероятно, просто сохраню это в файле tpl ради времени, так как у меня нет времени изучать Drupal PHP в данный момент. Хороший совет от всех, хотя.
Бен
3

Спасибо googletorpза ответ.

Просто добавьте, если что-то еще не очень ясно, связанные с включением плагинов пользовательского интерфейса .

Обратите внимание, что когда вы будете упоминать: drupal_add_library('system', 'ui');
это НЕ включит все плагины пользовательского интерфейса автоматически.

Вы можете найти список доступных плагинов jquery ui в drupal 7 здесь: /misc/ui/

Чтобы включить пикурикулярный плагин, например jquery.ui.slider.min.js, вам нужно добавить следующую строку:

drupal_add_library('system', 'ui.slider');

Надеюсь, это полезно.

Sumoanand
источник
2

У меня была эта проблема недавно. Кто-то дал мне свой пользовательский модуль, чтобы заставить JQuery UI загружаться на каждой странице. Вы можете воссоздать это просто. Сначала установите jquery_update и убедитесь, что он работает. Затем создайте и включите этот модуль:

Создайте папку в path / to / modules с именем 'jquery_force'.

Внутри добавьте два файла:

jquery_force.info :

name = JQuery UI Force
description = Forces JQuery UI to always load
dependencies[] = jquery_update
package = User Interface
core = 7.x
files[] = jquery_force.module

jquery_force.module :

<?php
/**
 * @file jquery_force.module
 * TODO: Enter file description here.
 */

/**
 * Implements hook_init().
 */
function jquery_force_init() {
    drupal_add_library('system', 'ui');
}
MTRO
источник
2

Добавление ловушки препроцесса в template.phpфайл не работает для меня.

Я просто положил drupal_add_library('system', 'ui'); в template.phpфайл сам по себе, работает.

user17418
источник