{"id":229190,"date":"2022-11-15T17:32:00","date_gmt":"2022-11-15T14:32:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229190"},"modified":"2022-11-15T17:43:18","modified_gmt":"2022-11-15T14:43:18","slug":"laegga-till-wordpress-modal-dialoger-med-statisk-data","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/laegga-till-wordpress-modal-dialoger-med-statisk-data\/","title":{"rendered":"L\u00e4gga till WordPress Modal Dialoger (med statisk data)"},"content":{"rendered":"\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/sv\/laegga-till-wordpress-modal-dialoger-med-inbyggda-bibliotek\/\" title=\"I det tidigare inl\u00e4gget\">I det tidigare inl\u00e4gget<\/a> gick jag igenom processen som kr\u00e4vs f\u00f6r att f\u00e5 WordPress modala dialoger att visas inom ramen f\u00f6r administrationsomr\u00e5det.<\/p>\n<p>Detta anv\u00e4nder:<\/p>\n<ul>\n<li>det inbyggda WordPress API,<\/li>\n<li>det medf\u00f6ljande Thickbox-biblioteket,<\/li>\n<li>och lite exempelkod f\u00f6r att f\u00e5 den att visas.<\/li>\n<\/ul>\n<p>I den h\u00e4r handledningen kommer jag att g\u00e5 igenom att fylla den modala dialogrutan med data. Efter det kommer jag att dela hur man fyller i data dynamiskt med Ajax.<\/p>\n<h2>WordPress Modal Dialogs: Statisk data<\/h2>\n<p>F\u00f6r det h\u00e4r inl\u00e4gget antar jag att du har l\u00e4st det f\u00f6rsta inl\u00e4gget i serien, och att du har en f\u00f6rst\u00e5else f\u00f6r vad koden g\u00f6r (\u00e4ven om det \u00e4r \u00e4nnu b\u00e4ttre om du har lite fungerande kod p\u00e5 din lokala utvecklingsmilj\u00f6).<\/p>\n<p>Oavsett, l\u00e5t oss prata om att fylla metaboxen med information. Det vill s\u00e4ga, vi ska titta p\u00e5:<\/p>\n<ol>\n<li>s\u00e4tta information i kroppen av metaboxen,<\/li>\n<li>fylla titeln med inneh\u00e5ll.<\/li>\n<\/ol>\n<p>N\u00e4r vi har gjort det g\u00e5r vi vidare till att h\u00e4mta information fr\u00e5n servern i en asynkron natur och sedan fylla i koden vi har hittills.<\/p>\n<h3>1 Definiera data<\/h3>\n<p>Att l\u00e4gga till inneh\u00e5ll i metaboxen \u00e4r v\u00e4ldigt enkelt. Minns fr\u00e5n f\u00f6rra inl\u00e4gget; vi har ett HTML-element som har en <strong>display: ingen;<\/strong> v\u00e4rde f\u00f6r dess <strong>stilattribut<\/strong>.<\/p>\n<p>H\u00e4r \u00e4r <a href=\"https:\/\/gist.github.com\/tommcfarlin\/1db21634b8b7a88a963b3875553d2539#file-03-adding-the-modal-dialog-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">den ursprungliga k\u00e4rnan<\/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>Det \u00e4r enkelt att l\u00e4gga till inneh\u00e5ll i den modala dialogrutan. Leta bara upp elementet <strong>acme-modal-dialog<\/strong> och fyll sedan i det med vilken information du vill visa f\u00f6r anv\u00e4ndaren.<\/p>\n<p>Se till exempel <a href=\"https:\/\/gist.github.com\/tommcfarlin\/1db21634b8b7a88a963b3875553d2539#file-04-modal-dialog-content-html\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">detta kodexempel<\/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>N\u00e4r anv\u00e4ndaren klickar p\u00e5 ankaret i det f\u00f6reg\u00e5ende inl\u00e4gget (det som l\u00e4ser <strong>Visa The Dialog<\/strong> ), s\u00e5 kommer modalen att visas med inneh\u00e5llet som du ser ovan.<\/p>\n<p>Generellt sett b\u00f6r det se ut som det du ser ovan baserat p\u00e5 koden som beskrivs i huvuddraget.<\/p>\n<h3>2 St\u00e4lla in en titel<\/h3>\n<p>L\u00e4gg sedan m\u00e4rke till att den modala dialogrutan inneh\u00e5ller ett alternativ att avvisa den n\u00e4r anv\u00e4ndaren \u00e4r klar med att l\u00e4sa den. F\u00f6rutom att erbjuda den f\u00f6rm\u00e5gan, l\u00e4gg m\u00e4rke till att omr\u00e5det i dialogrutan har mycket vitt utrymme.<\/p>\n<p>Du vet vad jag menar: Det \u00e4r ett omr\u00e5de som vanligtvis f\u00f6rpassas till att anv\u00e4ndas som titelrad. Tack vare Thickbox API och dess integration med WordPress kan vi enkelt l\u00e4gga till det i v\u00e5r titel. Den kan vara dynamisk (som om informationen skulle komma via Ajax) eller s\u00e5 kan den vara statisk.<\/p>\n<p>Och eftersom vi arbetar med statisk information i det h\u00e4r inl\u00e4gget, l\u00e5t oss st\u00e4lla in det. F\u00f6r att g\u00f6ra detta m\u00e5ste vi l\u00e4gga till ett <strong>titelattribut<\/strong> till ankaret som ansvarar f\u00f6r att visa modalen.<\/p>\n<p>N\u00e4r du har hittat ankaret som \u00e4r ansvarigt f\u00f6r att trigga displayen (kom ih\u00e5g att den inneh\u00e5ller texten <strong>Display The Dialog<\/strong> ), l\u00e4gg till ett title-attribut till den s\u00e5 att koden ser <a href=\"http:\/\/05-adding-a-dialog-title.html\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">ut s\u00e5 h\u00e4r<\/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\u00e4r du nu klickar p\u00e5 ankaret f\u00f6r att utl\u00f6sa displayen kommer den inte bara att visa dialogrutan som i bilden ovan, utan den kommer ocks\u00e5 att inneh\u00e5lla en titel:<\/p>\n<\/p>\n<p>Anv\u00e4ndbart, eller hur? Men t\u00e4nk om det skulle vara mer dynamiskt?<\/p>\n<h2>Nu till Ajax<\/h2>\n<p>Och den dynamiska naturen \u00e4r vad jag vill t\u00e4cka h\u00e4rn\u00e4st. Specifikt funderar jag p\u00e5 att g\u00e5 igenom processen att ta det vi har h\u00e4r, vilket \u00e4r statisk data och ers\u00e4tta den med information som h\u00e4mtas asynkront.<\/p>\n<p>Det vill s\u00e4ga att anv\u00e4ndaren klickar p\u00e5 <strong>Visa dialogrutan<\/strong> och sedan:<\/p>\n<ul>\n<li>en beg\u00e4ran g\u00f6rs till servern,<\/li>\n<li>data h\u00e4mtas,<\/li>\n<li>och sedan \u00f6verf\u00f6rs informationen till titeln och inneh\u00e5llsomr\u00e5dena i dialogrutan.<\/li>\n<\/ul>\n<p>Det \u00e4r lite b\u00e4ttre \u00e4n att anv\u00e4nda statisk information och ger en mer dynamisk applikation.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Inspelningsk\u00e4lla:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>N\u00e4r du arbetar med WordPress modala dialoger \u00e4r det bra att se till att de inneh\u00e5ller b\u00e5de en titel och inneh\u00e5ll. S\u00e5 h\u00e4r g\u00f6r du med statisk data.<\/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":[848,901,868],"tags":[1173],"class_list":["post-229190","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-handledningar","category-koda","category-wordpress-9","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/229190","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/comments?post=229190"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/229190\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media\/165632"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media?parent=229190"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/categories?post=229190"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/tags?post=229190"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}