Використовуючи вбудований інтерфейс jQuery у своїй темі


25

Кожна сторінка моєї теми повинна використовувати інтерфейс jquery. Я знаю, що він входить до складу Drupal 7, але я не можу реально розшифрувати надто технічну документацію Drupal. Схоже, єдиний спосіб зробити це з файлом template.php. Але оскільки я не розумію цього файлу, я намагаюся уникати цього.

Чи є інший спосіб, або мені просто спробувати файл template.php?


Що ви намагаєтесь зробити? Всі функції інтерфейсу jquery і те, що не повинно бути доступним для вас. Виконати спеціальний JS-код на кожній сторінці? Виконати його на певній сторінці? конкретна подія? Є багато способів заставити JS до виконання, а саме drupal_add_js
LSU_JBob

Я намагаюся використовувати .datepicker () у деяких полях, які відображаються на кожній сторінці моєї теми. Можливо, ще якісь речі пізніше.
Бен

@Ben Не забудьте присвоїти суму, якщо відповідь вирішила вашу проблему.
googletorp

@googletorp Вибачте, моя перша щедрість. Нагороджений баунті
Бен

Мені здається, що багато відповідей залишають останній крок, що коли ви включаєте drupal_add_library ('система', 'ui.button') чи будь-що інше, вам потрібно додати тему до рядка або двох javascript, що фактично викликає сказане підключати.
Райан Прайс

Відповіді:


36

Додавання JS до сторінки насправді не так складно, навіть якщо вам потрібно використовувати php.

Для звичайних файлів JS ви можете зробити щось подібне

drupal_add_js($path_to_js)

Однак Drupal зареєстрував інтерфейс jQuery у бібліотеках, що спрощує додавання файлів JS та CSS для певних плагінів інтерфейсу jQuery. Це можна зробити за допомогою

drupal_add_library($module, $library);

Всі плагіни інтерфейсу jQuery існують у системному модулі, так що ви можете це зробити

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');
}

Я спробував додати саме те, що у вас є тут (але використовуючи мою назву теми замість 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');? Це перший, який отримує все, або просто ядро? Чи потрібна лінія для кожного плагіна, який я використовую?
Jarl

4

ви випробували модуль date_popup ? добре працює з формою API


Я не хочу модуля, оскільки форма, яка йому потрібна, дуже складна і вимагає спеціального кодування. Це важко закодовано в шаблон для теми. Я намагаюся знайти найкращий спосіб використовувати інтерфейс jquery, який постачається з Drupal. Єдиний спосіб, коли я можу змусити його працювати, - це помістити його в папку моєї теми і посилання на неї там. Але оскільки я працюю на декількох сайтах на одній установці Drupal, і всі ці сайти потребуватимуть інтерфейсу jQuery, я хотів просто використовувати вбудований інтерфейс jQuery, щоб запобігти дублюванню роботи.
Бен

ви повинні мати можливість зателефонувати на будь-який матеріал jquery ui з будь-якого веб-сайту та додати його, він знаходиться в другій ядрі. Чи форма побудована за допомогою API API?
LSU_JBob

2
Чому форма вбудована у файли шаблонів? це не дуже друпально ... якщо ви не використовуєте API форми, ви втрачаєте деякі переваги, як-от вбудована безпека від атак на ін'єкції SQL. Я настійно рекомендую вийняти форми з файлів шаблонів і написати спеціальний модуль, де ви формуєте форми за допомогою API форм. Намагайтеся не бути ковбоєм. У будь-якому випадку ви можете посилатися на JavaScript з будь-якого місця, використовуючи drupal_add_js, щось на зразок цього drupal_add_js ('/ misc / ui / jquery.ui.core.min.js', 'файл'); AND drupal_add_js ('/ misc / ui / jquery.ui.datepicker.js', 'файл');
LSU_JBob

3
Створіть форму у власному модулі за допомогою API форми, потім у файлах tpl render виклику (drupal_get_form ('form_id')); Я обіцяю, що форма api, можливо, за допомогою певного користувальницького JavaScript, може впоратися з будь-якою складною вимогою. Я відчуваю, що ти лише ускладнюєш себе, намагаючись втиснути всю цю функціональність у файл tpl. Це технічно тематичний шар, тому не найкраща практика збирати у них великі куски функціонального коду.
LSU_JBob

3
Я думаю, що він говорить СТВОРИТИ модуль. Функціональні речі, як форми, належать до модулів. API форми дозволяє створювати будь-яку форму, яку ви можете уявити у власному користувальницькому модулі. Тема повинна бути незалежною від функціональності в більшості випадків. Це дасть вам більше гнучкості в дорозі.
Джонатан Роуні

4
  1. Перефактуруйте жорстко закодовану форму у файлі .tpl у реалізацію API API. Як сказав @LSU_JBob, немає жодної причини, чому вам слід створювати форму без використання FAPI. Я рекомендую вам прочитати форму API Керівництво по швидкому старту , і закладки в еталонну форму API сторінку.
  2. Після того, як ви ваша форма побудована , і ви можете уявити значення для нього, обробляти його і т.д., скачати і прочитати код в дата модулі вно. Дата використовується для надання типу спливаючої дати, яку ви хочете створити, але для CCK у D6 та основних полів у D7. Хоча ви не хочете працювати з полями, модуль Date використовує інтерфейс JQuery для виконання того, що ви намагаєтеся зробити. Цей модуль повинен дати вам вагомий приклад.

Спасибі. Ці посилання корисні. Мені не дуже подобається потрапляти в PHP, але я думаю, що я повинен робити саме те, що хочу зробити в цьому випадку. Я, мабуть, просто збережу його у файлі tpl на час, оскільки у мене немає часу вивчити Drupal PHP на даний момент. Хоча гарні поради від усіх.
Бен

3

Дякуємо, що googletorpвідповіли на це.

Просто додам, якщо все ще не дуже зрозуміло, що стосується включення плагінів інтерфейсу .

Зверніть увагу, що коли ви згадаєте: drupal_add_library('system', 'ui');
Це НЕ вмикає всі плагіни ui автоматично.

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

Щоб увімкнути пертикулярний плагін, forexample:, jquery.ui.slider.min.jsвам потрібно додати цей рядок:

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

Сподіваюся, це корисно.


2

У мене ця проблема була нещодавно. Хтось дав мені свій спеціальний модуль, щоб змусити інтерфейс JQuery завантажуватися на кожну сторінку. Ви можете відтворити його просто. Спочатку встановіть jquery_update і переконайтеся, що він працює. Потім створіть та увімкніть цей модуль:

Створіть папку в шляху / до / модулів під назвою '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');
}

2

Додавання гачка попередньої обробки у template.phpфайл не працювало для мене.

Я просто вкладаю drupal_add_library('system', 'ui');у template.phpфайл сам, працює.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.