, skabe et ajax nedtælling timer wordpress stik af,,,,, andel,,,,,,,, 5,,,,,,, det cyber - mandag envato tuts + kurser vil blive reduceret til $3.- og' t miss.,, at opbygge et wordpress stik af, er ikke så svært, især når du ved hvad du laver.det kan være svært, men når de arbejder med flere manuskripter, styles, og nye funktioner, der kræver undertiden lidt fantasi.,, i denne forelæsning, vi kommer til at se på en måde at skabe en enkel nedtælling timer stik af.vi vil se på den integreres i den wordpress anlæg som en dims og en shortcode i indholdet af indstillinger fra en meta - kasse i wordpress admin redaktør. et glimt af det endelige resultat af denne forelæsning ser sådan ud: den dims og indhold shortcode:,, dims og meta - box admin grænseflade: en kort eksempel skærmbillede af, hvordan den dims administration og meta - kasse i edit side /post - interface vil se ud i slutningen af tutor:,,, trin 1, stik af sagsakter, rør, hvert wordpress stik af grød er forenelige, indtil dato kode i dens rør, således at det kan fungere og blive anerkendt af wordpress.dette gør det muligt for den at blive installeret, aktiveret og fjernes.de oplysninger, der er til rådighed i dokumenthovedet oplysninger er af afgørende betydning for stik af, men også indeholder oplysninger om det afsnit, version, beskrivelse, mærkater, forfatter - info, kørekort osv. for det første stik af, er en sag, der befinder sig i en fortegnelse.vi skal navn vores stik af, så stik af, og sæt den i vores, wp indhold /plugins, mappe under den fortegnelse, timer_plugin,.så i, at den fil, timer_plugin.php, vil være vores vigtigste stik af fil, hvor vi indsætter header kildekode. <?php /* stik af navn: timer stik af beskrivelse: en timer, stik af tutor. forfatter: ciprian turcu version: 1, 0 * /er vi bare bruge den grundlæggende variabler, der er nødvendige for at få de stik af op og køre.en af de variabler, er det stik af navn, det er meget vigtigt med henblik på at identificere de stik af i stik af anlæg side.i forbindelse med denne forelæsning, vi er bare navn, så stik af.næste, beskrivelse, det er en kort snor af tekst, der beskriver de stik af.det vil også være synlige i de stik af anlæg side lige ved siden af stik af sammen med den næste variabler, forfatter og version,.,, "alle header stik af variabler er strenge tekst skrevet efter overskriften: forud for den variable navne.", trin 2, at aktioner, wordpress aktioner er kroge til specifikke funktioner, at du måske havde lyst til at bruge i din funktion.i denne forelæsning, vi skal bruge et antal kroge, for at få det ønskede resultat. for det første aktioner skal tilsættes ved hjælp af den, add_action, funktion for hver aktion, og vi er nødt til at tilføje dem i slutningen af folkesundhedsprogrammet fil som det næste eksempel:, add_action ('widgets_init "," tp_widgets_init '); add_action ('admin_print_scripts "," tp_admin_register_scripts'); add_action ('admin_print_styles "," tp_admin_register_styles'); add_action ('wp_print_scripts "," tp_register_scripts'); add_action ('wp_print_styles "," tp_register_styles "), i ovennævnte eksempel, wp_print_scripts, og wp_print_styles, hooks tilføje aktioner funktioner, der anvendes til at registrere og omfatte styles og manuskripter, der er brug for i wordpress front.mere præcist på webstedet tema for funktionen af de nærmere widget timer og indholdet shortcode.det, admin_print_scripts, og admin_print_styles, krog bruges til at registrere wordpress admin - panelet manuskript og css stil filer, der anvendes på et senere tidspunkt i ministeriet. add_action ('admin_init "," tp_admin_init '); add_action ('save_post "," tp_save_postdata); endelig den, admin_init, hook peger på den funktion, der er før signalet genereres og løb.et slag, som vi vil dække ved udgangen af læren er save_post,.denne bog er forpligtet til at arbejde med post eller side indgav oplysninger i wordpress admin.,, "for mere detaljerede oplysninger om, hvordan man bruger den, add_action, funktion, add_action, i wordpress codex.", trin 3 registrering og herunder manuskripter og stil, til denne lektion vi vil kræve en række manuskript og stil filer, der er nødvendige for gode funktion, og se på både administrationen og temaet gennemførelse af timeren stik af.her er, hvordan vi skal gøre det her:, herunder styles for wordpress administrative funktioner: en timer, stik af, kræver nogle elementer i det administrative udvalg, at vi bliver nødt til at stil let som standard er ikke ligefrem meget imødekommende.for at gøre det, vi har kaldt på trin 3 - kroge, der hjælper os med det, vi nu skal se på de funktioner, som løber, når de skal kaldes, og hvordan de arbejder helt. for det første, tp_admin_register_styles, funktion for registrerede og omfattede admin - panelet styles., funktion tp_admin_register_styles() {}, at downloade styles, fordi vi er ved at opbygge en nedtælling timer stik af, vi har brug for en specifik dato og tid til nedtælling til nutiden.for at gøre dette, blandt andre integrationer, vi bruger, wp_register_style, funktion for at registrere de seneste skik jquery - stil, så vi kan bruge sine design korrekt i sin funktion, når der udformes schneider og kalenderdato picker senere.css fil er genereret ved at downloade de seneste jquery ui fra http://jqueryui.com/download udvælgelse af kerne, dims, mus, slider, datepicker fra listen over muligheder, jquery - 1.1.2 i den udgave, punkt, og eu - erhvervsgrenen lethed i tema dropdown del. at styles, vil der være en css - fil, der hedder, jquery-ui-1.8.20.custom.css og billeder mappe indenfor, css /jquery ui, folder i skik, der genereres og downloadede arkiv, at du vil få fra tidligere instrukser.vi kommer til at erstatte den, jquery-ui-1.8.20.custom.css, file navn, jquery-ui.css, for et venligere navn og kopiere den sammen med de billeder, folder med alle sine arkiver i vores stik af mappe. derefter kan vi begynde at tilføje registrering og integration funktioner i den, tp_admin_register_styles, funktion nævnt. //register wp_register_style ('jquery-ui-theme ", plugins_url ('jquery-ui. css, __file__)); wp_register_style ('tp-admin-style, plugins_url ('admin-style. css, __file__), det foregående eksempel anvendelser, wp_register_style, til at registrere, jquery-ui.css, sag ved navn, jquery - tema, der senere anvendes i, wp_register_style, funktion i næste eksempel.samme fremgangsmåde anvendes til at omfatte de vigtigste administrative, style.css, fil med det navn, tp admin stil, der anvendes i følgende eksempler med, wp_enqueue_style, funktion at medtage det i wordpress rør ordentligt., herunder styles, //enqueue wp_enqueue_style ('jquery-ui-theme '); wp_enqueue_style ('tp-admin-style "), det, tp admin stil, anvendes til at registrere og omfatter, style.css, fil, som vil blive anvendt til modetendenser widget og meta - rubrik design, der kommer af misligholdelse i jquery - gennemførelse og wordpress misligholdelse stil., herunder styles for tema - funktion: ved anvendelse af samme fremgangsmåde som inden for registrering af og herunder stil filer vi kommer til at omfatte wordpress tema stil filer nødvendigtområde for udformningen af den dims timer og shortcode., funktion tp_register_styles() (//register wp_register_style ('tp-style, plugins_url ('style. css, __file__)); //enqueue wp_enqueue_style ('tp-style)}, i dette tilfælde har vi også en simpel, style.css, fil fra vores stik af registret, at vi vil omfatte senere., herunder manuskripter til wordpress administrative funktioner:, fordi vi ønsker at opbygge en dims og en meta - æske med jquery ui kalender og dato tid picker funktionalitet, er vi nødt til at have jquery, jquery - og alle de plugins nødvendigt at indføre og anvende de slider og datepicker, som vi vil gennemføre senere.for at gøre dette er vi nødt til at gøre brug af den tidligere skriftlige indsats for, admin_print_scripts, hook.den næste opgave vil gennemføre de funktioner, vi har brug for., funktion tp_admin_register_scripts() (//register wp_register_script ('tp-admin-script, plugins_url ('admin-script. js, __file__)); //enqueue wp_enqueue_script ('jquery-ui-core '); wp_enqueue_script ('jquery-ui-datepicker'); wp_enqueue_script ('jquery-ui-slider '); wp_enqueue_script ('tp-admin-script)}, som vi arbejder i wordpress admin - panelet, er vi nødt til jquery og jquery - allerede er registreret, og som er opført i den overskrift, samt de områder og plugins, vi har brug for, nemlig, jquery - mus, og jquery - dims.vi er nu også er den, jquery - kerne, der ikke er omfattet af misligholdelse og datepicker og slider plugins, vi har brug for, og det, admin-script.js, fil, der indeholder alle skik regler for vores dato tid jquery - funktioner, herunder manuskripter til tema funktioner: skal vi være i stand til at have i forenden af webstedet, en timer, at formindskelser til 0, et eller andet sted i samråd med en dims og i indhold som en shortcode.som en let måde at gøre dette på, jeg valgte jquery og tydelige javascript arbejde timeren.som følge heraf vil vi bl.a., script.js, fil i funktion, at registre manuskripter til forenden klo anmeldes., funktion tp_register_scripts() (//register wp_register_script ('tp-script, plugins_url ('script. js, __file__), jquery); //enqueue wp_enqueue_script ('tp-script)} vi skal også angive jquery som en afhængighed, som front har ikke medtaget ved misligholdelse.,, trin 4, at den dims, stik af skulle bruge en dims som en af de to metoder til at integrere en timer i det tema, og mere specifikt den aftale i denne sag.at være i stand til at tilføje de timer til den aftale, vi skal gennemføre widget funktionalitet for vores stik af i wordpress., opbygge den klasse, til at gennemføre widget funktionalitet i stik af, vi skal omfatte en dims klasse, der hedder, tp_widget,.det er naturligvis ikke obligatorisk, men det er obligatorisk for denne klasse at udvide, wp_widget, klasse for at arve funktionalitet.derfor skaber vi den klasse, som det næste eksempel: klasse tp_widget udvider wp_widget (//følgende kode kommer}, nu kommer den kode, vi lægger i klassen, så arbejder vi med den dims, sådan som det er bestemt i wordpress, med alle de nødvendige funktioner, som er nødvendige for at have en funktionelle dims, der blev oprettet i wordpress. først skal vi skrive det, __construct, funktion for den første nødvendige kode integration.det, __construct, funktion, er det sted, hvor den dims faktisk processer.vi skal give den dims et navn og en beskrivelse i denne funktion af arv og ved hjælp af de forældre, __construct, metode som i følgende eksempel: offentlig funktion __construct() (//widget faktiske processer forældre: __construct ('tp_widget "," timer dims "system ('description = > __ ('så stik af dims", "text_domain')); den første parameter er en dims id, andet er en dims navn, tredje et system med beskrivelse.følgende funktion bliver, form og funktion.vi skal bygge - og bruge denne funktion til at fastsætte og arbejde med administrationen af panel widget indhold form.den næste kode vil løbe ind i widget indikation af en art i admin panel widgets side: offentlig funktion form() (hvis (!$_post) ($tp_arr = unserialize (get_option ('tp_id_ ".$- > antal)} andre (hvis ($_post ['tp-hidd ". = = 'ægte') ($tp_arr ['tp-title '] = $_post ['tp-title'] $tp_arr ['tp-date '] = $_post ['tp-date'] $tp_arr ['tp-hour '] = $_post ['tp-hour-val'] $tp_arr ['tp-minute '] = $_post ['tp-minute-val'] update_option ('tp_id_".$- > tal sandt ($tp_arr)) //- output, de muligheder, som administrationen i denne del har vi widget oplysninger som titel, dato og tidspunkt.disse oplysninger er hentet fra en serialized array - snor, som lagres i databasen ved navn, tp_id_x,, hvor x er en unik identifikator for den dims, der anvendes til at identificere de data, der bliver udvundet i forhold til den dims, der anvendes. i denne del widget - værdier er også lagres i det system, en efter en, serialized og lagres i databasen, som en mulighed inden for senere anvendelse. den næste del er administrationen widget form elementer, der anvendes i forenden. < etiket > titel: < /etiketten > < br /> < input type = "tekst" navn = "tp titel" klasse = "toiletpapir" værdi = "<?php echo $tp_arr ['tp-title ']?> "/> < br /> < br /> < en klasse =" tp tid udgive "href =" javascript: ugyldig (0); "> [edit] < /a > < br /> < br /> < etiket > udvælge en dato: < /etiketten > < br /> < input type =" tekst "navn =" tp dato "klasse =" tp dato readonly = "rigtigt" "værdi =" <?php echo $tp_arr ['tp-date ']?> "/> < p > < div klasse =" tp - tid "> < etiket > timer < /etiketten > < input navn =" tp time val "klasse =" tp time val "værdi =" <?php echo $tp_arr ['tp-hour ']?> "readonly =" ægte "/> < div klasse =" tp time "> < /div > < /p > < p > < etiket > minutter < /etiketten > < input navn =" tp øjeblik val "klasse =" tp øjeblik val "readonly =" ægte "værdi =" <?php echo $tp_arr ['tp-minute ']?> "> < div klasse =" tp - øjeblik "> < /div > < /div > < /p > < input type =" skjulte "navn =" tp hidd "værdi =" ægte "/>, er der to aspekter, for at se efter i dette afsnit: først, tags klasser, tp dato, tp time, tp minut, som senere er arbejdet med i javascript, og for det andet input - områder.for det første er der nogle php kode indsættes i input områder, der findes i kodeksen, kode, som anvendes til opbevaring af data, enten for former for at være indgivet, eller for javascript gennemføres i jquery og arbejdet med. i slutningen af html kode ovenfor, form, funktion er lukket. den dims, ajourføring af oplysninger, når den dims, save, trykke på knappen i admin - panelet, form oplysninger fremlægges og behandles af følgende funktioner: offentlig funktion update() (//- processer widget muligheder for at blive reddet, hvis ($_post ['tp-hidd ". = = 'ægte') ($tp_arr ['tp-title"] = $_post ['tp-title '] $tp_arr ['tp-date'] = $_post ['tp-date '] $tp_arr ['tp-hour'] = $_post ['tp-hour-val '] $tp_arr ['tp-minute'] = $_post ['tp-mimøtrikker val '] $tp_arr ['tp-date'] = $_post ['tp-date '] update_option ('tp_id_ ".$- > tal sandt ($tp_arr)}}, ajourføre, funktion, er den funktion, der anvendes til at ajourføre oplysningerne i den dims i wordpress widgets. skrive widget - produktion i den aftale, den næste del er den kode, der genererer og output widget - i samråd med et widget.det er indholdet af det, der allerede er afholdt widget kode, som har til formål af en kompatibel papir. her er et eksempel på halvdelen af den funktion, nemlig på den kode, der er brugt til at få de oplysninger, der er nødvendige for den dims, dims. offentlige funktion ($args $instans) ($tp_arr = unserialize (get_option ('tp_id_ ".$- > antal)); $temp_date = eksplodere ("/" $tp_arr ['tp-date ']); $tp_arr ['tp-date'] = $temp_date [2] "./".$temp_date [0]. "/".$temp_date [1], ekstrakt ($args); $afsnit = apply_filters ('widget_title, $tp_arr ['tp-title ']); echo $before_widget; hvis (!tom ($afsnit) echo $before_title.$titel.$after_title;, så vi udvinder den dims, der tidligere er gemt i admin - panelet.den næste del er html og folkesundhedsprogrammet kode, der repræsenterer timeren og /eller de anvendte værdier senere af jquery til beregning af tid og fungere som en timer. < div klasse = "timer vigtigste" > < input type = "skjulte" klasse = "tp dims" værdi = "<?php echo $tp_arr ['tp-date ']?> "/> < input type =" skjulte "klasse =" tp dims "værdi =" <?php echo $tp_arr ['tp-hour "].": ".$tp_arr ['tp-minute ']?>:0" /> \t<ul class="tp-head"> \t<ol>YY</ol> \t<ol>DD</ol> \t<ol>HH</ol> \t<ol>MM</ol> \t<ol>SS</ol> \t</ul> \t<ul> \t<li>-</li> \t<li>-</li> \t<li>-</li> \t<li>-</li> \t<li>-</li> \t</ul> \t</div>,The UL tag is used to create later on a row and column style so that the timer has an ordered look and is given a class in order to easily control the LI tags with jQuery later on.,Also, you may notice the input elements with PHP data in them. disse elementer kan også anvendes af jquery opbevarer de værdier, de reddede dato og tidspunkt, funktion udløber efter html kode med en dynamisk variabel, der lukker dims med wordpress forenelige værdier. <?php echo $after_widget; //output indholdet af den dims}, integration af klasse, og sidst, men ikke mindst, hvis du husker, at en af de aktioner, skrevet i trin 1 brugte, widgets_init, mærke og peger på, tp_widgets_init, funktion.vi er nødt til at skrive sine funktioner med henblik på at forbinde klasse ordentligt til wordpress., funktion tp_widgets_init() {register_widget ("tp_widget");}, "for en mere omfattende se af den standard, wordpress widget funktionalitet, tjek wordpress widget api", løntrin 5 at meta - boks, meta - boks er en kasse, der er beliggende i en af de paneler, der er beliggende i den administrative aftale redaktør af side eller post.fordi vi bruger næsten den samme: css og javascript kode vil vi bruge næsten samme folkesundhedsprogrammet og http: //- kode som den dims.nogle ændringer af nogle forældre element klasser, der er nødvendige for jquery funktionalitet.men først, meta - boks skal oprettes og gennemføres i wordpress fra stik af indstillinger.en anden af de foranstaltninger, skrevet på trin 1, at vi ikke afslutte gennemførelsen af den administrative lokalitet klo mærker.krogen er før headers finder sted, og skal bruges af os at gennemføre meta - box funktionalitet med, add_meta_box, fungere som eksempel:, funktion tp_admin_init() {add_meta_box ('tp_metaid, __ ('timer stik af post - indstillinger, tp_textdomain "), tp_inner_custom_box", "post", "side '); add_meta_box ('tp_metaid, __ ('timer stik af side indstillinger, tp_textdomain"), tp_inner_custom_box "," side "," side ");}, hvad denne kode sker, er, at det skaber en speciel boks på den side af hver enkelt post og side edit side i administrationen panel med indholdet, og funktion af den funktion, tp_inner_custom_box,.for en mere omfattende overblik over, hvordan add_meta_box, bør anvendes, add_meta_box i wordpress codex,., funktionalitet og front - kode, meta - boks har en lignende front med den dims og enden kodeks er ikke så forskellige, bare lidt anderledes database mulighed område navne for at redde.ligesom den dims admin form, det er lavet af folkesundhedsprogrammet og html funktionalitet.med udgangspunkt i det, tp_inner_custom_box, funktion, vi er ved at skabe, meta - box admin foran og bagved ende funktioner som den næste prøve:, funktion tp_inner_custom_box() (global $post; //anvende pædofil for verifikation wp_nonce_field (plugin_basename (__file__), cuschost_noncename. $tp_arr = unserialize (get_option ('tp_pp_id_ ".- post - > id), efter at de html kode prøve er en slående lighed.den eneste forskel er et ekstra bidrag på knappen, hvorefter, funktion er lukket med semikolon, og slutter, < en klasse = "tp tid udgive" href = "javascript: ugyldig (0);" > [edit] < /a > < br /> < br /> < etiket > udvælge en dato: < /etiketten > < br /> < input type = "tekst" navn = "tp dato" klasse = "tp dato" readonly = "ægte" værdi = "<?php echo $tp_arr ['tp-date ']?> "/> < p > < div klasse =" tp - tid "> < etiket > timer < /etiketten > < input navn =" tp time val "klasse =" tp time val "værdi =" <?php echo $tp_arr ['tp-hour ']?> "readonly =" ægte "/> < div klasse =" tp time "> < /div > < /p > < p > < etiket > minutter < /etiketten > < input navn =" tp øjeblik val "klasse =" tp øjeblik val "readonly =" ægte "værdi =" <?php echo $tp_arr ['tp-minute ']?> "> < div klasse =" tp - øjeblik "> < /div > < /div > < /p > < input type =" skjulte "navn =" tp hidd "værdi =" ægte "/> < input type =" knap "klasse =" tp indsæt shortcode knap primære "id =" offentliggøre "værdi =" indsæt kort kode "/>, sparer de data, den tidligere form sender data, da stillingen eller side er ajourført, og vi har brug for at få oplysninger og opbevares til senere.for at gøre det, vi bruger en anden krog, vi allerede har gennemført, især de, save_post, klo mærker, der tyder på, at denne funktion, tp_save_postdata,.det bør fungere, bliver de data fra post - variabler og oplagrer det i databasen i henhold til en post - id entydige identifikator dannet navn, og det ser sådan ud:, funktion tp_save_postdata() (global $post; hvis ($_post ['tp-hidd ". = = 'ægte') ($tp_arr ['tp-date '] = $_post ['tp-date"] $tp_arr ['tp-hour'] = $_post ['tp-hour-val '] $tp_arr ['tp-minute'] = $_post ['tp-minute-val '] update_option (' tp_pp_id_ ".- post - > id, sandt ($tp_arr)}}, trin 6 gennemførelse af shortcode, til at gennemføre shortcode, vi er nødt til at tilføje en ny aktion til, add_action, funktion liste.den næste prøve, skal dække det:, add_shortcode ('tp-shortcode "," tp_shortcode), det siger sig selv, at vi skal skabe, tp_shortcode, funktion, der tager sig af de nye shortcode., funktion tp_shortcode ($atts $indhold = ") (samlet $post. $tp_arr = unserialize (get_option ('tp_pp_id_".- post - > id) $temp_date = eksplodere ("/" $tp_arr ['tp-date ']); $tp_arr ['tp-date'] = $temp_date [2] "./".$temp_date [0]. "/".$temp_date[1]; \t\treturn '<div class="timer-content"><input type="hidden" class="tp-widget-date" value="'.$tp_arr["tp-date"].'" /> \t\t\t<input type="hidden" class="tp-widget-time" value="'.$tp_arr["tp-hour"].':'.$tp_arr["tp-minute"].':0" /> \t\t\t<ul class="tp-head"> \t\t\t\t<ol>YY</ol> \t\t\t\t<ol>DD</ol> \t\t\t\t<ol>HH</ol> \t\t\t\t<ol>MM</ol> \t\t\t\t<ol>SS</ol> \t\t\t</ul> \t\t\t<ul> \t\t\t\t<li>-</li> \t\t\t\t<li>-</li> \t\t\t\t<li>-</li> \t\t\t\t<li>-</li> \t\t\t\t<li>-</li> \t\t\t</ul> \t\t</div>'; \t},Familiar code? det er en front for sidebar widget kode, der tidligere er blevet anvendt i, dims, funktion i, tp_widget, klasse, "for mere detaljerede oplysninger om, hvordan man bruger den, add_shortcode, funktion, add_shortcode, i wordpress codex.", trin 7 redigere stil filer, stil uret. det er en meget let og hurtigt skridt, da den omfatter kun to små sager, der tager sig af udformningen af timeren dims, shortcode og administrative afdeling., administration, afsnit: i denne afdeling - - fil, indsættes i første trin, vi er i færd med at redigere nu, er, admin-style.css, og det skal se sådan ud:,. tp time. tp minut (polstring: 0px!vigtigt, z-index: 0; bredde: 100px; margen: 10px 0px 10px 0px. højde: 10px;}. tp time, val. tp øjeblik val (font vægt: dristige og skriftstørrelse: 16px; bredde: 20px;}. tp tid (margin top: 10px; margen nederst: 10px; skriftstørrelsen: 12px;} widget. redigerbar,. redigerbar {baggrund farve:&#fed22f;} widget. eu - erhvervsgrenen en horisontal. indenfor. eu - erhvervsgrenen en horisontal {baggrund:&#fed22f;}, det stylesheet fil håndterer bredde, højde, farver og placering af administrationen widget kiks og kalender jquery pop - up - når - valget af timer og minutter fra forenden. uret front stil:,, style.css, filen er css dossier, som omfatter konstruktionen af ul, li, ol i timer i forenden.See the next sample:, .timer-content { width:300px; } .timer-main ul, .timer-content ul { float:left; display:inline; overflow:hidden; width:180px; margin:0px; padding:0px; margin-top: 0px; font-weight: bold; } .timer-main ul.tp-head, #content .timer-content ul.tp-head { margin:0px; padding:0px; margin-top:20px; font-size:12px; } .timer-main ul ol, .timer-content ul ol { float:left; display:inline; overflow:hidden; width:20px; margin:0px; padding:0px; margin-right:2px; text-align: center; border:1px solid #dcdcdc; padding:4px; background:#f0f0f0; } .timer-main ul li, .timer-content ul li { float:left; display:inline; overflow:hidden; width:20px; margin:0px; padding:0px; margin-right:2px; text-align: center; padding:4px; border: 1px solid hvid;}, visse elementer er lanceret, ændret og placeret med margener, så vil de se som planlagt.et resultat af denne stil er designet i det næste billede:,, trin 8 admin dims og metabox javascript kode, admin widget kræver meget specifikke jquery funktionalitet blandet helt med i klasser for hundetegn.All of the following code should be put inside the ,admin-script.js ,file., jQuery(document).ready(function($){ \t$('.tp-insert-shortcode').click(function(){ \t\tsend_to_editor('[tp-shortcode]'); \t}); \t$('.tp-time-edit').live('click',function(){ \t\t$('.tp-date').datepicker({ \t\t\tformat:'m/d/Y', \t\t\thourGrid: 4, \t\t\tminuteGrid: 10, \t\t\tposition: 'right', \t\t\tonBeforeShow: function(){ \t\t\t\t$(this).DatePickerSetDate($(this).val(), true); \t\t\t} \t\t}); \t\t$('.tp-date').addClass('editable'); \t\t$( ".tp-hour").slider({ \t\t\tvalue:0, \t\t\tmin: 0, \t\t\tmax: 23, \t\t\tstep: 1, \t\t\tslide: function( event, ui ) { \t\t\t\t$(".tp-hour-val" ).val(ui.value); \t\t\t} \t\t}); \t\t$( ".tp-minute" ).slider({ \t\t\tvalue:0, \t\t\tmin: 0, \t\t\tmax: 59, \t\t\tstep: 1, \t\t\tslide:funktion (begivenhed, iii) ($(". tp øjeblik val"). val (art. værdi))))))); i dette eksempel, efter en jquery initialization og et dokument belastning begivenhed den kode, der arbejder med den dims og shortcode er klar til brug. nu, fordi den dims er ajax ladt dynamisk indhold i det hele dens indhold er usynlig for jquery, medmindre der anvendes med en direkte aktion.til dette formål, en forbindelse med klasse navn, tp tid udgive, og tag mulighed javascript funktionalitet, ugyldige (0), blev oprettet, og da sammen, er levende - - og gør alle html mærker i tilfælde funktion opfordrer til rådighed. i denne funktion, vi bruger de funktioner, der er nødvendige for at skabe datepicker til dato tekstboks ved hjælp af, tp dato, css klasse. sidst, men ikke mindst, faktisk i begyndelsen af kode ligger shortcode javascript funktionalitet, mere specifikt de jquery indsættelse af, tp indsæt shortcode, css klasse værdien i input område inden for shortcode funktion har skrevet i trin 6.når knappen med klasse, tp indsæt shortcode, er presset, og det bør tilføje, [tp schortcode] snor værdi for wysiwyg redaktør. "meget vigtigt!- jquery kræver klasser i et egenskaber, der anvendes til schneider og datepicker plugins.det virker ikke med id ", trin 9 timer javascript kode, dette er den vigtigste og mest svært at forestille sig en smule ved første øjekast stykke kode i hele resten af, da det er den del, der omhandler en masse matematik. denne del er udelukkende refererer til, script.js, fil, der indeholder javascript kildekode, der beskæftiger sig med de faktiske timer på både den dims del og på den shortcode del i forenden. jquery (dokument). klar (funktion ($) {funktion start_by_parent (tp_parentclass) (var - tp_timer ="; tp_date = $(tp_parentclass + 'input. tp widget dato). val(); tp_time = $(tp_parentclass +' input. tp dims "). val(); tp_timer = setinterval (" tp_set ("+ tp_parentclass +", "+ tp_date +", "+ tp_time +"); ", 1000)} start_by_parent (. timer vigtigste '); start_by_parent (. timer indhold)}), skal modervirksomheden klasse håndtering af dims er timeren vigtigste, som for shortcode, timeren indhold, css klasse anvendes som forælder et element, der er anvendt til at påvirke, li, tag elementer, der indeholder timeren værdier for dd (dage), hh (timer), mm (minutter) og ss (sekunder).ovennævnte gennemførelse er en dynamisk tilgang til dem begge i jquery efter værdier er sendt til, calc_data, funktion til at håndtere alle de matematik.,, tp_set, funktion er at anvende, calc_data, metode til at beregne de værdier, før det kommer i de rigtige html - elementer.Here is the implemented ,tp_set, method that needs to go inside the same file,script.js,., function tp_set(tp_parentClass,tp_date, tp_time){ \tcalc_data(tp_date, tp_time); \tjQuery(tp_parentClass+' ul').find('li:nth-child(1)').html(tp_years); \tjQuery(tp_parentClass+' ul').find('li:nth-child(2)').html(tp_days); \tjQuery(tp_parentClass+' ul').find('li:nth-child(3)').html(tp_hours); \tjQuery(tp_parentClass+' ul').find('li:nth-child(4)').html(tp_minutes); \tjQuery(tp_parentClass+' ul').find('li:nth-child(5)').html(tp_seconds); \tvar tp_timer = setInterval('tp_set(\\''+tp_parentClass+'\\',\\''+tp_date+'\\',\\''+tp_time+'\\');', 1000 ); clearTimeout(tp_timer); },Finally, one of the most important parts of this script file, the ,calc_data, metode, der beregner det antal sekunder mellem de nuværende og de bruger udvalgt dato og returnerer de relevante værdier, således at timeren viser den tid, der er tilbage, før denne dato., funktion calc_data (tp_date, tp_time) (tempdate = tp_date. split ("/"); temptime = tp_time. split (":") var sekunder = 1000, var minutter = sekunder * 60 var timer = minutter * 60 var dage = timer * 24 var år = dage * 365, var db_time = ny dato (tempdate [0], tempdate [1] - 1, tempdate [2], temptime [0], temptime [1], 00) var now_time = nye date(); db_time = db_time. gettime(); now_time = now_time. gettime(), var tp_result = db_time-now_time; hvis (tp_result < 0) (tp_years = tp_days = tp_hours = tp_minutes = tp_seconds = 0) andet (tp_years = math.floor(tp_result/years); \t\ttp_days = Math.floor(tp_result/days)-(tp_years*365); \t\ttp_hours = Math.floor(tp_result/hours)-(tp_days*24)-(tp_years*365*24); \t\ttp_minutes = Math.floor(tp_result/minutes)-(tp_hours*60)-(tp_days*24*60)-(tp_years*365*24*60); \t\ttp_seconds = Math.floor(tp_result/seconds)-(tp_minutes*60)-(tp_hours*60*60)-(tp_days*60*24*60)-(tp_years*365*24*60*60); \t\tsinglebox=false; \t\tif(tp_years > 99){ \t\t\ttp_years=99; \t\t} \t\tif(tp_days > 99){ \t\t\tsinglebox=true; \t\t} \t\tif(tp_years < 0)tp_years=0; \t\tif(tp_days < 0)tp_days=0; \t\tif(tp_hours < 0)tp_hours=0; \t\tif(tp_minutes > 60)tp_minutes=60; \t\tif(tp_minutes < 0)tp_minutes=0; \t\tif(tp_seconds < 0)tp_seconds=0; \t} },A very important aspect that needs - udstyr, der nævnes, er, at disse funktioner anvende globale variabler, der ikke blev nævnt endnu.det anbefales at tilføje følgende kode med globale variabler på toppen af, script.js, fil, før nogen anden kode:, tp_days = 0, tp_hours = 0, tp_minutes = 0, tp_seconds = 0, resultat, der bygger en nedtælling timer i jquery er ikke ligefrem en meget hurtig og let projekt, som der der er mange aspekter, der skal tages i betragtning, når de starter.ting som det, javascript klasser, plugins og styles, vil blive anvendt, hvilken design, det vil have på foran og bagved, hvor det lagrer data, og hvordan det trækker det tilbage.også foreneligheden af alle disse med andre plugins eller manuskripter, præcis hvordan det beregnes, og hvad det output. lad os vide, hvad tror du, og hvis du har nogen yderligere anbefalinger i bemærkningerne nedenfor., ajourføre: denne post er blevet ajourført for at ændre de spørgsmål, der nævnes i bemærkningerne.,,, ajourføre: kilde filer nu downloades på toppen af denne forelæsning.,,