{"id":229413,"date":"2022-11-15T17:43:00","date_gmt":"2022-11-15T14:43:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229413"},"modified":"2022-11-15T17:43:18","modified_gmt":"2022-11-15T14:43:18","slug":"wordpressi-modaalsete-dialoogide-lisamine-staatiliste-andmete-kasutamine","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/et\/wordpressi-modaalsete-dialoogide-lisamine-staatiliste-andmete-kasutamine\/","title":{"rendered":"WordPressi modaalsete dialoogide lisamine (staatiliste andmete kasutamine)"},"content":{"rendered":"\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/et\/wordpressi-modaalsete-dialoogide-lisamine-sisseehitatud-raamatukogudega\/\" title=\"Eelmises postituses\">Eelmises postituses<\/a> k\u00e4isin l\u00e4bi protsessi, mis on vajalik WordPressi modaaldialoogide kuvamiseks haldusala kontekstis.<\/p>\n<p>See kasutab:<\/p>\n<ul>\n<li>sisseehitatud WordPressi API,<\/li>\n<li>pakutav Thickbox raamatukogu,<\/li>\n<li>ja m\u00f5ni n\u00e4idiskood selle kuvamiseks.<\/li>\n<\/ul>\n<p>Selles \u00f5petuses k\u00e4sitlen modaalse dialoogi sisestamist andmetega. P\u00e4rast seda jagan, kuidas Ajaxi abil andmeid d\u00fcnaamiliselt t\u00e4ita.<\/p>\n<h2>WordPressi modaalsed dialoogid: staatilised andmed<\/h2>\n<p>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\u00f5ni toimiv kood).<\/p>\n<p>Sellest hoolimata r\u00e4\u00e4gime metakasti teabega t\u00e4itmisest. See t\u00e4hendab, et me vaatame:<\/p>\n<ol>\n<li>teabe sisestamine metakasti kehasse,<\/li>\n<li>t\u00e4idab pealkirja sisuga.<\/li>\n<\/ol>\n<p>Kui see on tehtud, j\u00e4tkame as\u00fcnkroonse teabe hankimisega serverist ja seej\u00e4rel sisestame seni olemasoleva koodi.<\/p>\n<h3>1 Andmete m\u00e4\u00e4ratlemine<\/h3>\n<p>Sisu lisamine metakasti on v\u00e4ga lihtne. Meenuta eelmisest postitusest; meil on HTML-element, millel on <strong>kuva: none;<\/strong> v\u00e4\u00e4rtus selle <strong>stiili<\/strong> atribuudi jaoks.<\/p>\n<p>Siin on <a href=\"https:\/\/gist.github.com\/tommcfarlin\/1db21634b8b7a88a963b3875553d2539#file-03-adding-the-modal-dialog-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">algne sisu<\/a> :<\/p>\n<pre><code>&lt;?php\n\/**\n * A basic plugin page that will eventually be used to demonstrate how to use the\n * Thickbox library included with WordPress.\n *\n * @package Acme\n *\/\nadd_thickbox();\n?&gt;\n\n&lt;div id=\"acme-thickbox-demo\" class=\"wrap\"&gt;\n\n  &lt;h1&gt;Acme Thickbox Demo&lt;\/h1&gt;\n  &lt;p&gt;Provides an exmaple of how to use the thickbox library within a WordPress plugin page.&lt;\/p&gt;\n\n  &lt;div id=\"acme-thickbox-content\"&gt;\n    &lt;a href=\"TB_inline?width=600&amp;height=550&amp;inlineId=acme-modal-dialog\" class=\"thickbox\"&gt;Display The Dialog&lt;\/a&gt;\n    &lt;div id=\"acme-modal-dialog\" style=\"display:none;\"&gt;&lt;\/div&gt;&lt;!-- #acme-modal-dialog --&gt;\n  &lt;\/div&gt;&lt;!-- #acme-thickbox-content --&gt;\n\n&lt;\/div&gt;&lt;!-- #acme-thickbox-demo --&gt;<\/code><\/pre>\n<p>Sisu lisamine modaalsesse dialoogi on lihtne. Lihtsalt leidke element <strong>acme-modal-dialog<\/strong> ja seej\u00e4rel sisestage see mis tahes teabega, mida soovite kasutajale kuvada.<\/p>\n<p>N\u00e4iteks vaadake <a href=\"https:\/\/gist.github.com\/tommcfarlin\/1db21634b8b7a88a963b3875553d2539#file-04-modal-dialog-content-html\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">seda koodi n\u00e4idet<\/a> :<\/p>\n<pre><code>&lt;div id=\"acme-modal-dialog\" style=\"display:none;\"&gt;\n  &lt;h2&gt;Hello World&lt;\/h2&gt;\n  &lt;p&gt;Lucas ipsum dolor sit amet ventress dak jusik chewbacca tenel beru bail anomid hapes mas.&lt;\/p&gt;\n  &lt;p&gt;Fel kalee kyle desann. Ozzel p'w'eck jax castell saleucami. Thisspias veila mantell mccool garindan jax.&lt;\/p&gt;\n  &lt;p&gt;Barriss kurtzen sing bertroff cody frozarns. Han koon miraluka vau.&lt;\/p&gt;\n  &lt;p&gt;\n    &lt;ul&gt;\n      &lt;li&gt;Bajic asajj boba raymus dug piell moddell jax darth.&lt;\/li&gt;\n      &lt;li&gt;Sio anakin naberrie shistavanen fisto utapau chewbacca aayla.&lt;\/li&gt;\n    &lt;\/ul&gt;\n  &lt;\/p&gt;\n  &lt;p&gt;\n    Corran axmis kor-uj hutt marek kenobi ansuroer echani. Mirax mara fisto bith tyranus kashyyyk farlander max b'omarr.\n    Ben dodonna askajian teevan palpatine lobot beru.\n  &lt;\/p&gt;\n&lt;\/div&gt;&lt;!-- #acme-modal-dialog --&gt;<\/code><\/pre>\n<p>Kui kasutaja kl\u00f5psab eelmises postituses ankrul (see, mis loeb <strong>Display The Dialog<\/strong> ), kuvatakse modaal koos \u00fclaltoodud sisuga.<\/p>\n<p>\u00dcldiselt peaks see sisus kirjeldatud koodi p\u00f5hjal v\u00e4lja n\u00e4gema nagu \u00fclaltoodud.<\/p>\n<h3>2 Pealkirja m\u00e4\u00e4ramine<\/h3>\n<p>J\u00e4rgmisena pange t\u00e4hele, et modaaldialoogis on v\u00f5imalus sellest loobuda, kui kasutaja on selle lugemise l\u00f5petanud. Lisaks selle v\u00f5imaluse pakkumisele pange t\u00e4hele, et dialoogialal on palju t\u00fchja ruumi.<\/p>\n<p>Teate, mida ma m\u00f5tlen: see on ala, mida tavaliselt kasutatakse tiitliribana. T\u00e4nu Thickbox API-le ja selle integreerimisele WordPressiga saame selle h\u00f5lpsalt oma pealkirjaks lisada. See v\u00f5ib olla d\u00fcnaamiline (nagu peaks teave tulema Ajaxi kaudu) v\u00f5i staatiline.<\/p>\n<p>Ja kuna me t\u00f6\u00f6tame selles postituses staatilise teabega, siis seadistame selle. Selleks peame modaali kuvamise eest vastutavale ankrule lisama atribuudi <strong>title .<\/strong><\/p>\n<p>Kui olete kuva k\u00e4ivitamise eest vastutava ankru leidnud (pidage meeles, et see sisaldab teksti <strong>Kuva dialoog<\/strong> ), lisage sellele atribuut pealkiri, et kood n\u00e4eks v\u00e4lja <a href=\"http:\/\/05-adding-a-dialog-title.html\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">j\u00e4rgmine<\/a> :<\/p>\n<pre><code>&lt;a href=\"TB_inline?width=600&amp;height=550&amp;inlineId=acme-modal-dialog\" title=\"Hello World\" class=\"thickbox\"&gt;Display The Dialog&lt;\/a&gt;<\/code><\/pre>\n<p>N\u00fc\u00fcd, kui kl\u00f5psate kuva k\u00e4ivitamiseks ankrul, ei n\u00e4ita see mitte ainult \u00fclaltoodud pildil olevat dialoogi, vaid sisaldab ka pealkirja:<\/p>\n<\/p>\n<p>Kasulik, eks? Aga mis siis, kui see oleks d\u00fcnaamilisem?<\/p>\n<h2>N\u00fc\u00fcd Ajaxi poole<\/h2>\n<p>Ja d\u00fcnaamiline olemus on see, mida ma j\u00e4rgmisena k\u00e4sitlen. T\u00e4psemalt, ma tahan minna l\u00e4bi protsessi, mis meil on, st staatilised andmed, ja asendada need as\u00fcnkroonselt hangitud teabega.<\/p>\n<p>See t\u00e4hendab, et kasutaja kl\u00f5psab <strong>dialoogi kuvamise<\/strong> ankrul ja seej\u00e4rel:<\/p>\n<ul>\n<li>serverile tehakse p\u00e4ring,<\/li>\n<li>andmed leitakse,<\/li>\n<li>ja seej\u00e4rel sisestatakse teave dialoogi pealkirja ja sisualadesse.<\/li>\n<\/ul>\n<p>See on natuke parem kui staatilise teabe kasutamine ja muudab rakenduse d\u00fcnaamilisemaks.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>WordPressi modaaldialoogidega t\u00f6\u00f6tades on kasulik veenduda, et need sisaldavad nii pealkirja kui ka sisu. Siit saate teada, kuidas seda staatiliste andmetega teha.<\/p>\n","protected":false},"author":1,"featured_media":165632,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[894,842,863],"tags":[1165],"class_list":["post-229413","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-kood","category-opetused","category-wordpress-4","tag-affiai-et"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/229413","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/comments?post=229413"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/229413\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media\/165632"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media?parent=229413"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/categories?post=229413"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/tags?post=229413"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}