W poprzednim poście przeszedłem przez proces wymagany do wyświetlenia modalnych okien dialogowych WordPress w kontekście obszaru administracyjnego.
Wykorzystuje:
- wbudowane API WordPress,
- dostarczona biblioteka Thickbox,
- i przykładowy kod do wyświetlenia.
W tym samouczku przejdę przez wypełnianie modalnego okna dialogowego danymi. Następnie podzielę się tym, jak dynamicznie wypełniać dane za pomocą Ajax.
Modalne okna dialogowe WordPress: dane statyczne
W przypadku tego postu zakładam, że przeczytałeś pierwszy post z serii i rozumiesz, co robi kod (chociaż jest jeszcze lepiej, jeśli masz działający kod w swoim lokalnym środowisku programistycznym).
Niezależnie od tego porozmawiajmy o wypełnieniu metabox informacjami. Oznacza to, że przyjrzymy się:
- umieszczanie informacji w treści meta boxa,
- wypełnianie tytułu treścią.
Gdy to zrobimy, przejdziemy do pobierania informacji z serwera w sposób asynchroniczny, a następnie wypełniania kodu, który mamy do tej pory.
1 Definiowanie danych
Dodawanie treści do metaboxa jest naprawdę łatwe. Przypomnijmy z poprzedniego postu; mamy element HTML, który ma wyświetlacz: none; wartość atrybutu stylu .
Oto oryginalna treść :
<?php
/**
* A basic plugin page that will eventually be used to demonstrate how to use the
* Thickbox library included with WordPress.
*
* @package Acme
*/
add_thickbox();
?>
<div id="acme-thickbox-demo" class="wrap">
<h1>Acme Thickbox Demo</h1>
<p>Provides an exmaple of how to use the thickbox library within a WordPress plugin page.</p>
<div id="acme-thickbox-content">
<a href="TB_inline?width=600&height=550&inlineId=acme-modal-dialog" class="thickbox">Display The Dialog</a>
<div id="acme-modal-dialog" style="display:none;"></div><!-- #acme-modal-dialog -->
</div><!-- #acme-thickbox-content -->
</div><!-- #acme-thickbox-demo -->Dodawanie treści do modalnego okna dialogowego jest łatwe. Po prostu znajdź element acme-modal-dialog, a następnie wypełnij go dowolnymi informacjami, które chcesz wyświetlić użytkownikowi.
Na przykład zobacz ten przykład kodu :
<div id="acme-modal-dialog" style="display:none;">
<h2>Hello World</h2>
<p>Lucas ipsum dolor sit amet ventress dak jusik chewbacca tenel beru bail anomid hapes mas.</p>
<p>Fel kalee kyle desann. Ozzel p'w'eck jax castell saleucami. Thisspias veila mantell mccool garindan jax.</p>
<p>Barriss kurtzen sing bertroff cody frozarns. Han koon miraluka vau.</p>
<p>
<ul>
<li>Bajic asajj boba raymus dug piell moddell jax darth.</li>
<li>Sio anakin naberrie shistavanen fisto utapau chewbacca aayla.</li>
</ul>
</p>
<p>
Corran axmis kor-uj hutt marek kenobi ansuroer echani. Mirax mara fisto bith tyranus kashyyyk farlander max b'omarr.
Ben dodonna askajian teevan palpatine lobot beru.
</p>
</div><!-- #acme-modal-dialog -->Kiedy użytkownik kliknie kotwicę w poprzednim poście (ten, który brzmi Wyświetl okno dialogowe ), zostanie wyświetlony modalny z treścią, którą widzisz powyżej.
Ogólnie rzecz biorąc, powinien wyglądać jak to, co widzisz powyżej, na podstawie kodu opisanego w sednie.
2 Ustawianie tytułu
Następnie zauważ, że modalne okno dialogowe zawiera opcję odrzucenia go, gdy użytkownik skończy czytać. Oprócz oferowania tej umiejętności, zauważ, że obszar okna dialogowego ma dużo białej przestrzeni.
Wiesz, co mam na myśli: jest to obszar, który zwykle jest spychany do użycia jako pasek tytułu. Dzięki API Thickbox i jego integracji z WordPressem możemy łatwo dodać do niego nasz tytuł. Może być dynamiczny (jak gdyby informacje miały nadejść przez Ajax) lub może być statyczny.
A ponieważ w tym konkretnym poście pracujemy z informacjami statycznymi, skonfigurujmy to. Aby to zrobić, musimy dodać atrybut title do kotwicy odpowiedzialnej za wyświetlanie modalności.
Po zlokalizowaniu kotwicy odpowiedzialnej za wywołanie wyświetlania (pamiętaj, że zawiera ona tekst Display The Dialog ), dodaj do niej atrybut title, aby kod wyglądał tak :
<a href="TB_inline?width=600&height=550&inlineId=acme-modal-dialog" title="Hello World" class="thickbox">Display The Dialog</a>Teraz, gdy klikniesz kotwicę, aby uruchomić wyświetlanie, nie tylko wyświetli okno dialogowe, jak w powyższym ujęciu, ale będzie zawierało również tytuł:
Przydatne, prawda? Ale co by było, gdyby było bardziej dynamiczne?
Teraz na Ajax
A dynamiczna natura jest tym, co zamierzam omówić w następnej kolejności. W szczególności zamierzam przejść przez proces pobierania tego, co mamy tutaj, czyli danych statycznych, i zastępowania ich informacjami pobieranymi asynchronicznie.
Oznacza to, że użytkownik klika kotwicę Wyświetl okno dialogowe, a następnie:
- wysłano zapytanie do serwera,
- dane są pobierane,
- a następnie informacje są przesyłane do obszaru tytułu i zawartości okna dialogowego.
Jest to trochę lepsze niż używanie informacji statycznych i sprawia, że aplikacja jest bardziej dynamiczna.