Używam wbudowanego interfejsu jQuery w moim motywie

25

Każda strona mojego motywu będzie musiała korzystać z interfejsu użytkownika jquery. Wiem, że jest on dołączony do Drupala 7, ale tak naprawdę nie mogę odszyfrować zbyt technicznej dokumentacji Drupala. Wygląda na to, że jedynym sposobem na to jest użycie pliku template.php. Ale ponieważ nie rozumiem tego pliku, staram się unikać tego w ten sposób.

Czy istnieje inny sposób, czy powinienem po prostu wypróbować plik template.php?

Ben
źródło
Co próbujesz zrobić? Wszystkie funkcje interfejsu użytkownika jquery i to, co nie powinno być dla ciebie dostępne. Wykonać niestandardowy kod JS na każdej stronie? Wykonać to na określonej stronie? konkretne wydarzenie? Istnieje wiele sposobów na uruchomienie JS, a mianowicie drupal_add_js
LSU_JBob
Próbuję użyć .datepicker () na niektórych polach, które pojawiają się na każdej stronie w moim motywie. Może później też trochę więcej.
Ben
@Ben Pamiętaj, aby przyznać nagrodę, jeśli odpowiedź rozwiązała problem.
googletorp
@googletorp Przepraszamy, moja pierwsza nagroda. Nagroda przyznana.
Ben
Wydaje mi się, że wiele odpowiedzi pomija ostatni krok, że kiedy dodasz drupal_add_library („system”, „ui.button”) lub cokolwiek innego, musisz dodać wiersz lub dwa javascript do swojego motywu, który faktycznie wywołuje powiedziane podłącz.
Ryan Price

Odpowiedzi:

36

Dodanie JS do strony nie jest wcale takie trudne, nawet jeśli musisz użyć php.

W przypadku normalnych plików JS możesz zrobić coś takiego

drupal_add_js($path_to_js)

Drupal zarejestrował jednak interfejs jQuery w bibliotekach, co ułatwia dodawanie plików JS i CSS dla niektórych wtyczek interfejsu jQuery. Można to zrobić za pomocą

drupal_add_library($module, $library);

Wszystkie wtyczki jQuery UI istnieją w module systemowym, więc możesz to zrobić

drupal_add_library('system', 'ui');

lub

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

Niektóre z tych wtyczek mają zależności, ponieważ używają innych wtyczek. Drupal radzi sobie z tym bardzo sprytnie i zawiera potrzebne komponenty.

Możesz zobaczyć pełną listę wtyczek jQuery tutaj . Jest to sformatowane jako tablica PHP, ale ogólnie konwencja nazewnictwa to ui.PLUGIN-NAME.

Jeśli chcesz dodać JS na każdej stronie, możesz po prostu dodać haczyk strony przygotowania strony i dodać je tam. To wyglądałoby mniej więcej tak w pliku 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
źródło
Próbowałem dodać dokładnie to, co masz tutaj (ale używając mojej nazwy motywu zamiast NAME_OF_THEME) do template.php i to nie działało. Jakieś pomysły? Oto, co mam: function nocturnal_preprocess_page(&$variables) { drupal_add_library('system', 'ui'); drupal_add_library('system', 'ui.datepicker'); }
Ben
@ben Musisz wyczyścić pamięć podręczną za każdym razem, gdy dodajesz nową funkcję hook lub preprocess. Spróbuj wyczyścić pamięć podręczną. Potrzebujesz także sposobu na sprawdzenie, czy to działa, ponieważ dodajesz tylko pliki JS, które same nic nie zrobią.
googletorp
Wyczyściłem pamięć podręczną i powinno działać na niektórych polach daty, które wcześniej używały ręcznie odwoływanego interfejsu użytkownika jquery. Wciąż debuguję, ale jak dotąd nie mogę znaleźć nic złego.
Ben
@Ben Pierwszym krokiem jest sprawdzenie źródła i sprawdzenie, czy pliki zostały uwzględnione (wyłącz agregację JS, jeśli jest włączona)
googletorp
3
@googletorp: Czy mógłbyś rozwinąć nieco różnicę między nimi drupal_add_library('system', 'ui');a drupal_add_library('system', 'ui.accordion');? Czy pierwszy pobiera wszystko, czy tylko rdzeń? Czy potrzebuję linii dla każdej używanej wtyczki?
Jarl
4

próbowałeś modułu date_popup ? działa dobrze z interfejsem API formularza

LSU_JBob
źródło
Nie chcę modułu, ponieważ forma, która go potrzebuje, jest bardzo złożona i wymaga niestandardowego kodowania. Jest mocno zakodowany w szablonie motywu. Próbuję znaleźć najlepszy sposób wykorzystania interfejsu użytkownika jquery, który jest dostarczany z Drupalem. Jedynym sposobem, w jaki mogę go uruchomić, jest umieszczenie go w folderze mojego motywu i link do niego. Ale ponieważ korzystam z wielu witryn w ramach jednej instalacji Drupal i wszystkie te witryny będą wymagały interfejsu użytkownika jQuery, chciałem po prostu użyć wbudowanego interfejsu użytkownika jQuery, aby zapobiec powielaniu pracy.
Ben
powinieneś być w stanie wywołać dowolne elementy interfejsu użytkownika jquery z dowolnej witryny i dodać je, jest w rdzeniu Drupala. Czy formularz jest zbudowany przy użyciu interfejsu API formularza?
LSU_JBob
2
Dlaczego formularz jest wbudowany w pliki szablonów? to nie jest bardzo drupaliczne ... jeśli nie używasz interfejsu API formularza, tracisz niektóre z korzyści, takich jak wbudowane zabezpieczenia przed atakami SQL injection. Poleciłbym MOCNIE, aby wyciągnąć formularze z plików szablonów i napisać niestandardowy moduł, w którym tworzysz formularze przy użyciu interfejsu API formularza. Staraj się nie być kowbojem. W każdym razie możesz odwoływać się do javascript z dowolnego miejsca za pomocą drupal_add_js, czegoś takiego jak ten drupal_add_js ('/ misc / ui / jquery.ui.core.min.js', 'file'); ORAZ drupal_add_js ('/ misc / ui / jquery.ui.datepicker.js', 'file');
LSU_JBob,
3
Utwórz formularz w module niestandardowym za pomocą interfejsu API formularza, a następnie w plikach tpl wywołaj render render (drupal_get_form ('form_id')); Obiecuję, że formularz API, może z jakimś niestandardowym javascript, może obsłużyć każde złożone wymaganie. Wydaje mi się, że utrudniasz sobie życie, próbując wcisnąć całą tę funkcjonalność do pliku tpl. Jest to technicznie warstwa motywu, więc nie jest najlepszą praktyką umieszczanie w nich dużych fragmentów funkcjonalnego kodu zaplecza.
LSU_JBob,
3
Myślę, że mówi: UTWÓRZ moduł. Rzeczy funkcjonalne, takie jak formularze, należą do modułów. Formularz API pozwala tworzyć dowolne formy, jakie można sobie wyobrazić we własnym module niestandardowym. W większości przypadków motyw powinien być niezależny od funkcjonalności. Zapewni to większą elastyczność na drodze.
Jonathan Rowny,
4
  1. Przeredaguj swój zakodowany formularz w pliku .tpl na implementację Form API. Jak powiedział @LSU_JBob, nie ma powodu, dla którego powinieneś tworzyć formularz bez korzystania z FAPI. Zalecam przeczytanie Przewodnika Szybki start dla interfejsu API formularza i utworzenie zakładki na stronie referencyjnej interfejsu API formularza .
  2. Po zbudowaniu formularza i przesłaniu do niego wartości, przetworzeniu go itp. Pobierz i przeczytaj kod w module Data contrib. Data służy do dostarczenia rodzaju wyskakującego okienka daty, które chcesz utworzyć, ale dla CCK w D6 i Core Fields w D7. Chociaż nie chcesz pracować z polami, moduł Data używa interfejsu użytkownika JQuery do osiągnięcia tego, co próbujesz zrobić. Ten moduł powinien dać ci solidny przykład.
amator barista
źródło
Dzięki. Te linki są pomocne. Nie bardzo lubię wchodzić w PHP, ale myślę, że muszę robić dokładnie to, co chcę w tym przypadku. Prawdopodobnie po prostu zatrzymam go w pliku tpl ze względu na czas, ponieważ w tej chwili nie mam czasu na naukę Drupal PHP. Dobra rada od wszystkich.
Ben
3

Dziękuję googletorpza odpowiedź.

Wystarczy dodać, jeśli nadal nie są bardzo jasne związane z włączaniem wtyczek interfejsu użytkownika .

Pamiętaj, że kiedy wspomnisz: drupal_add_library('system', 'ui');
NIE spowoduje to automatycznego włączenia wszystkich wtyczek interfejsu użytkownika.

Listę dostępnych wtyczek interfejsu użytkownika jquery można znaleźć w Drupal 7 tutaj: /misc/ui/

Aby włączyć wtyczkę perticular, na przykład: jquery.ui.slider.min.jsmusisz dodać ten wiersz:

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

Mam nadzieję, że to się przyda.

Sumoanand
źródło
2

Ostatnio miałem ten problem. Ktoś dał mi swój moduł niestandardowy, aby zmusić interfejs użytkownika JQuery do ładowania na każdej stronie. Możesz to po prostu odtworzyć. Najpierw zainstaluj jquery_update i upewnij się, że działa. Następnie utwórz i włącz ten moduł:

Utwórz folder w ścieżce / do / modułów o nazwie „jquery_force”.

W środku dodaj dwa pliki:

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');
}
Mt.
źródło
2

Dodanie haka wstępnego przetwarzania do template.phppliku nie działało dla mnie.

Po prostu wrzucam drupal_add_library('system', 'ui');do template.phppliku, działa.

użytkownik17418
źródło