WordPressi modaalsete dialoogide lisamine (staatiliste andmete kasutamine)

Eelmises postituses käisin läbi protsessi, mis on vajalik WordPressi modaaldialoogide kuvamiseks haldusala kontekstis.

See kasutab:

• sisseehitatud WordPressi API,
• pakutav Thickbox raamatukogu,
• ja mõni näidiskood selle kuvamiseks.

Selles õpetuses käsitlen modaalse dialoogi sisestamist andmetega. Pärast seda jagan, kuidas Ajaxi abil andmeid dünaamiliselt täita.

WordPressi modaalsed dialoogid: staatilised andmed

Selle postituse puhul eeldan, et olete lugenud seeria esimest postitust ja teil on arusaam sellest, mida kood teeb (kuigi see on veelgi parem, kui teil on kohalikus arenduskeskkonnas mõni toimiv kood).

Sellest hoolimata räägime metakasti teabega täitmisest. See tähendab, et me vaatame:

1. teabe sisestamine metakasti kehasse,
2. täidab pealkirja sisuga.

Kui see on tehtud, jätkame asünkroonse teabe hankimisega serverist ja seejärel sisestame seni olemasoleva koodi.

1 Andmete määratlemine

Sisu lisamine metakasti on väga lihtne. Meenuta eelmisest postitusest; meil on HTML-element, millel on kuva: none; väärtus selle stiili atribuudi jaoks.

Siin on algne sisu :

<?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 -->

Sisu lisamine modaalsesse dialoogi on lihtne. Lihtsalt leidke element acme-modal-dialog ja seejärel sisestage see mis tahes teabega, mida soovite kasutajale kuvada.

Näiteks vaadake seda koodi näidet :

<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 -->

Kui kasutaja klõpsab eelmises postituses ankrul (see, mis loeb Display The Dialog ), kuvatakse modaal koos ülaltoodud sisuga.

Üldiselt peaks see sisus kirjeldatud koodi põhjal välja nägema nagu ülaltoodud.

2 Pealkirja määramine

Järgmisena pange tähele, et modaaldialoogis on võimalus sellest loobuda, kui kasutaja on selle lugemise lõpetanud. Lisaks selle võimaluse pakkumisele pange tähele, et dialoogialal on palju tühja ruumi.

Teate, mida ma mõtlen: see on ala, mida tavaliselt kasutatakse tiitliribana. Tänu Thickbox API-le ja selle integreerimisele WordPressiga saame selle hõlpsalt oma pealkirjaks lisada. See võib olla dünaamiline (nagu peaks teave tulema Ajaxi kaudu) või staatiline.

Ja kuna me töötame selles postituses staatilise teabega, siis seadistame selle. Selleks peame modaali kuvamise eest vastutavale ankrule lisama atribuudi title .

Kui olete kuva käivitamise eest vastutava ankru leidnud (pidage meeles, et see sisaldab teksti Kuva dialoog ), lisage sellele atribuut pealkiri, et kood näeks välja järgmine :

<a href="TB_inline?width=600&height=550&inlineId=acme-modal-dialog" title="Hello World" class="thickbox">Display The Dialog</a>

Nüüd, kui klõpsate kuva käivitamiseks ankrul, ei näita see mitte ainult ülaltoodud pildil olevat dialoogi, vaid sisaldab ka pealkirja:

Kasulik, eks? Aga mis siis, kui see oleks dünaamilisem?

Nüüd Ajaxi poole

Ja dünaamiline olemus on see, mida ma järgmisena käsitlen. Täpsemalt, ma tahan minna läbi protsessi, mis meil on, st staatilised andmed, ja asendada need asünkroonselt hangitud teabega.

See tähendab, et kasutaja klõpsab dialoogi kuvamise ankrul ja seejärel:

• serverile tehakse päring,
• andmed leitakse,
• ja seejärel sisestatakse teave dialoogi pealkirja ja sisualadesse.

See on natuke parem kui staatilise teabe kasutamine ja muudab rakenduse dünaamilisemaks.