Throbber gif hosting Drupal

Zgłoszony przez Drupion Wsparcie w dniu 25 września 2012 12:44

okno modalne są doskonałe cechy konstrukcyjne, ponieważ pozwala łatwo wyświetlić więcej informacji na stronie bez powodowania niedogodności dla publiczności, czyniąc je załadować zupełnie inną stronę. Używam czasowniki modalne, gdzie chcę, aby wyświetlić więcej informacji, która nie jest na tyle obszerny, aby zasłużyć oddzielny pełne obciążenie strony.

Rysunek 1: Są to linki tytułów, generowane przez myślą, że po kliknięciu wywołać okno modalne z dodatkową zawartością.

Po naciśnięciu na połączeniu, jak pokazano na figurze 1, pojawia się okno modalne dodatkowe informacje: figura 2.

Istnieją dwa główne sposoby, aby łatwo tworzyć czasowniki modalne w Drupal. Pierwszy i stosowaną metodą jest użycie ColorBox lub moduły Lightbox2. Oba moduły mają pewne wbudowane funkcje i mogą być konfigurowane na poziomie Site Builder.

Aby uzyskać większą kontrolę nad kategoryzacji i treści modal, i zdobyć wiedzę o tym, jak działa modalnych okien, wziąłem się zanurzyć w chaos Tools, lub metoda CTools modalnego tworzenia Earl Miles' (aka Merlin of Chaos). Oto jak to zrobiłem.

Ten poradnik wymaga półprodukt do zaawansowanego poziomu zrozumienia Drupal 7. trzeba będzie zbudować moduł to zrobić.

1. Będziemy nazwać nasz moduł „Happy”, więc utworzyć katalog wewnątrz Drupal zainstalować nazwie, stron / all / modules / zadowolony.

Wewnątrz katalogu „happy”, utworzyć dwa puste pliki „happy.module” i 'happy.info. Również pobrać i włączyć moduł CTools oraz modułu Widoki. jak CTools zależność dla modal i widokiem jest zależność dla tego przykładu.

Ponadto, należy dodać następujące dla modalnych dostosowania wewnątrz katalogu modułu:

• A "js" folder "happy.js" w ramach, na przykład 'stron / all / modules / happy / js / happy.js').
• Określenie „CSS” Katalog z „happy.css” w, np 'Sites / all / modules / css / happy.css').
• Katalogu obrazy dla niestandardowych AJAXs throbber GIF-(w razie potrzeby), np 'Sites / all / modules / zadowolony / images / [image-name] .jpg'
• Katalog tematem naszej Widoki niestandardowe szablonu w „sites / all / modules / zadowolony / tematu”, a wewnątrz tego katalogu szablonu poglądy zostaną umieszczone dalej wzdłuż w tym samouczku.

2. Konfiguracja modułu z „happy.info” pliku.

Otwarte, wklej poniżej do pliku i zapisać:

name = szczęśliwy
Description = Przykładowy moduł do tworzenia modalnych okien za pomocą ramy CTools.
Rdzeń = 7.xi
Pakiet = Interfejs użytkownika
php = 5.2.4
Zależności [] = ctools
Zależności [] = widoki

Dygresja: Dla celów tego przykładu, jesteśmy przy użyciu widoków do generowa listę łączy do węzłów, które po kliknięciu otwierają zawartość węzła wewnątrz modalnego okna. Dlatego też, w tym przykładzie, widoki to uzależnienie.

3. Otwórz „happy.module” i umieścić Standardowy moduł Drupal rusztowania na górze, a następnie zapisać.

4. Pierwszym krokiem jest określenie ścieżki menu modalna link otworzy, gdy pojawi się okno modalne.

Oto kilka zaawansowanych punkty: Moduł CTools identyfikuje „% ctools_js” jako zastępczy w ścieżce żądania. CTools zastąpi ten zastępczy argument z „js” lub „nojs”, w zależności od możliwości Javascript przeglądarce użytkownika za. W „strona zwrotna” to funkcja, która będziemy definiować obok. To jest, gdy większość podnoszenie ciężkich odbywa. Wreszcie, nie ma żadnych ograniczeń dostępu w tym przykładzie. Oznacza to, że anonimowi użytkownicy mogą uzyskać dostęp do zawartości modalu od strony zwrotnego „” ma wartość true.

5. Zdefiniuj funkcję oddzwaniania „strona”:

Choć wydaje się to skomplikowane, funkcja powyżej jest prosta. Jeżeli przeglądarka użytkownika nie obsługuje Javascript, określone dla nas przez CTools, to da im treści bez JavaScriptu. W przeciwnym razie możemy wystrzelić z modal CTools i dać im tryb widoku Teaser węzła.

6. Następnie musimy wprowadzić ustawienia dla modalnego okna do rodzica stronie obciążenia.

Można to zrobić szereg funkcji haka gdzie Drupal renderuje zawartość na stronie. Przykład haczyki, w którym po kod pracy obejmuje hook_node_view (modyfikowania $ Node> zawartości obiektu jednoczęściowy) hook_block_view, hook_field_load i etc.

Dla celów tego przykładu, ja generowania widoku tytułów węzeł, który po kliknięciu wyświetlają zwiastun tego węzła wewnątrz modalnej. Do tego użyłem hak poglądy, hook_views_pre_render ():

To jest dużo pisać podczas tworzenia modalnej. Podsumowując, musimy załadować wszystkie pliki CTools JS. Następnie określamy rozmiar i funkcje modalne z wykorzystaniem tablicy konfiguracji CTools (w tym przykładzie $ happy_style). I wreszcie, możemy wprowadzić żądane ustawienia, plik JavaScript i plik CSS dla Skórki modalnych zawartość.

7. Określ linki, które będą powodować pojawienie się modalne okno.

Do tej pory zdefiniowane strony i treść, która będzie wyświetlana wewnątrz modalnym i zdefiniowaliśmy początkowe style modalnego. Teraz musimy zdefiniować wyzwalacz, który będzie otworzyć okno modalne. Wszystko, co jest naprawdę potrzebne są linki ze szczególnym CTools klas. Ponieważ używam Widoki, mam zamiar zdefiniować szablon widoki dla mojej liście zdolnych tytułów. W ten sposób można modyfikować linki wewnątrz aby być CTools wywołać świadomy.

Alternatywnie, można określić linki, które wyzwalają się modal na warstwie motyw za pomocą haków hook_preprocess lub wewnątrz szablonu poglądów wewnątrz katalogu tematycznego witryny.

Wolę mieć wszystkie funkcje modułu niestandardowego wewnątrz tego samego katalogu modułu. To czystsze. Dlatego zdecydowałem się utworzyć szablon ciami wewnątrz Happy katalogu modułu.

Oto najlepszy sposób. Najpierw zarejestrować szablon motywu i widoków:

Po ogłoszeniu tego, trzeba będzie stworzyć [module_dir] katalogu / tematyczny i umieścić widokach-View-Fields - happy.tpl.php 'plik wewnątrz. Dla początkowej zawartości, należy zawartość domyślne „widoki-view-fields.tpl.php” szablon modułu poglądów, który znajduje się wewnątrz katalogu tematycznego modułu poglądów za.

Bo zarejestrowały hook_theme i wewnątrz hook_theme oświadczył szablon Widoki, mogę używać hook_preprocess_view poglądów (), aby użerać z ewentualnego wyświetlania linków Tytuł I Utworzono:

W tym momencie, zmienna $ ctools_link będą dostępne do mnie w widokach-View-Fields - plik happy.tpl.php. Wewnątrz tego szablonu, wystarczy dodać linię:

9. Plik JavaScript.

Osiągnęliśmy wszystkie Tass PHP do tworzenia modalne CTools. Teraz zwracamy uwagę na Javascript.

Możesz zacząć od pliku domyślnego CTools modalnych js wewnątrz modułu ctools_ajax_example, ale uprościły ten plik dla ciebie, deklarując wszystko, czego potrzebujesz, aby zacząć.

Oto witryn / all / modules / happy / js / Treści happy.js File:

10. Teraz jesteś gotowy do stylu z modalnej.

Korzystanie 'sites / all / modules / happy / CSS / happy.css', styl modalna okna do własnych upodobań.

W tym momencie, po utworzeniu modalne CTools w Drupal 7. Aby uzyskać więcej informacji, należy unikać Google, dopóki nie pochłonął obszernych plików pomocy html wewnątrz modułu CTools w 'sites / all / modules / ctools / Pomoc / modal.html.

Szczęśliwy Modaling z Drupal 7!

Powiązane artykuły

Jeśli używasz więcej niż jedno miejsce Drupal, można uprościć zarządzanie i można uaktualnić swoje strony za pomocą funkcji multi-site. Multi-site pozwala na współdzielenie jednego Drupal ...

Tworzę archiwum internetową, która pozwoli użytkownikom na przesyłanie wielu różnych typów treści multimedialnych, w tym wideo, audio, zdjęć, dokumentów i tekstów. Chcę, aby ułatwić użytkownikom ...

HTTPS to protokół, który szyfruje żądań HTTP i ich reakcje. Gwarantuje to, że jeśli ktoś był w stanie zagrozić sieci między komputerem a serwerem którą wnioskujesz ...

Uwaga: wyjątkowy dzięki Doug Vann za dostarczanie motywację, by w końcu opublikować ten wpis na blogu! Na początku 2016 roku, kiedy to Search API i Solr związane moduły dla Drupala 8 było na początku alfa ...

Istnieje wiele powodów, dla których administrator systemów lub deweloper może wybrać do obsługi wielu witryn na tym samym serwerze w konfiguracji wielostanowiskowej. Na przykład, taka konfiguracja może ...