Neljapäev, detsember 4, 2008
No comments

jQuery: kinnituse aken

Oleme jätkuvalt teemaks praktiline kasutamine jQuery. Täna ma vaja kirjutada akna kinnitades operatsiooni administratsiooni paneeli. Asi tundub olevat lihtne ja saab lahendada teema, unustamata JavaScript (Confirm) või PHP, kuid fun peitub kuidas seda teha, et mitte põhjustada, ja isegi see oli tõesti korralik tulemus?
Püüan esitada valimi lahendus, eeldades, et element, mida me tahame kaasneb kinnitus kasutaja on link.

Esimene Proovi HTML Failide

Alustame faili, mida me täita oma alatu testid: 

  <! DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title> kinnitus dialoog </ title>
 </ Head>
 <body>
 <p>
 Lorem ipsum dolor Sit Amet, consectetur adipiscing eliit.  Quisque ultrices ORCi nisl Quis.  Aliquam on kurbus.  Sed quam consequat ac leo.  Curabitur Fringilla sodales sem.  Praesent eleifend mauris ac ante aliquet dictum.  Sapien Etiam null, consequat Eget, consequat vitae, molestie id, Lectus.  Aastal HAC habitasse platea dictumst.  Aliquam feugiat odio ac Lectus.  Suspendisse egestas nisl Varius.  Alampeatükk null.  Pellentesque aliquet interdum felis.  Vestibulum libero luctus euismod.  Suspendisse sodales interdum Enimem.  Pellentesque Orcia.  Nulla Massa nunc, eleifend aka, eleifend Varius, Cong Eget, Leo.  Vestibulum ante ipsum primis sisse faucibus ORCi et ultrices posuere luctus cubilia Curae; <br/>
 Aliquet reitinguagentuurid, Quis ligula rutrum accumsan, lorem lorem velit dignissim, fermentum dignissim quam ligula at ligula.  Nulla dictum interdum Purusi.  Aenean odio.  Vestibulum pretium.  Phasellus Enimem Enimem, Semper aliquet, Tempus ac, rutrum gravida, libero.  Etiam neque odio, blandit NEC, suscipit aka, Pellentesque scelerisque, Leo.  Aastal metus id.  Vivamus rutrum.  Nulla liigitamata velit.  Nisi ut Purusi, porta juures, tincidunt Sit Amet, scelerisque ega mõlema kopsu, sem.  Sed adipiscing RISUS.  Aastal NISI.  Augustin et al.  Phasellus ullamcorper Quis urn Tempus dapibus Lacus.  Sed Eget est.  Etiam Tellus erat, adipiscing NEC, placerat sed, ultricies, ORCi.  Reitinguagentuuride ac Lectus.  Curabitur liigitamata lorem NIBH Mattis.  <a href="http://poslinski.net" class="confirm"> MAECENAS </ a> aliquet iaculis turpis.
 </ P>
 <div id="confirm"> </ div>
 </ Body>
 </ Html>

Teksti näidis generaator Lorem ipsum , läks sees p. Vahetult enne sulgemist body, pane div # kinnitada, mille jooksul tekib koodi meie aken kinnitada.

Teine Esitlus kiht

Olgem keskenduda meie aknasse. Minu puhul, html kood, mis vastutab kogu akna, näeb järgmiselt: 

  <div id="confirm">
 <div>
 <div>
 <h1> Oled sa kindel, et soovite kustutada selle kirje? </ h1>
 <p> <button onClick="location.href='TUTAJ tabab sisu HREF of LINKU'"> YES </ button> <button> ei </ button> </ p>
 </ Div> <! - End # kinnitada div div ->
 </ Div> <! - End # kinnitada div ->
 </ Div> <! - End # Kinnita ->

Koodi sees # kinnitavad, on loodud JavaScript. Aga tasub kaaluda miks tundub lihtsalt niisama ja miks on lehekülje koodi?

Alustame põhjused, sealhulgas koodi lõpus. Määramisel asukoht: absoluutne, sest # kinnitada, ilma z-index parameetri jada objektid asukoht: absoluutne, see sobib järjekorras, milles nad on loodud brauseris. Last koostatud, seal on rohkem kui virna kihti asukoht: absoluutne, nii et kui näiteks on samade mõõtmetega, mask kiht, mis ilmus koodi varem.

Miks kinnitada sees, panime 2 korda div? Selle punkti selgitamiseks on lihtsalt lugege oma css koodi paned peas osas: 

  <style type="text/css">
 <! -
 * {Margin: 0px, padding: 0px;}
 keha {margin: 10px;}
 p {laius: 600px; margin: 0 auto; line-height: 25px;}

 / * Kinnita * /
 # Kinnita {kuva: none; position: absolute; kõrgus: 100%, laius: 100%; background: # 000; top: 0; vasakult: 0;}
 # Kinnita {kõrgus: avaldis (((&& window.Enumerable window.Enumerable.max) [document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight]. Max (): document.documentElement.scrollHeight) + "px"), laius: avaldis (((&& window.Enumerable window.Enumerable.max) [document.body.scrollWidth, document.documentElement.scrollWidth, document.body.offsetWidth, dokumendi. documentElement.clientHeight]. max (): document.documentElement.scrollWidth) + "px");}
 # Kinnita [id] {position: fikseeritud;}
 # Kinnita div {padding: 10px; margin-top: 200px;}
 # Kinnita div div {background: # 900c0c; laius: 500px; margin: 0 auto; border: 1px solid # CCC; overflow: hidden;}
 # Kinnita div div h1 {font-size: 18px; color: # fff;}
 # Kinnita div div p {padding: 20px;}
 ->
 </ Style>

# Määrab siin kinnitada taustal, mis "katab" terve lehekülje. 2. rida (üks kummaline kõrgus ja laius) on vaja juhul, kui Internet Explorer. # Kinnita [id] on arusaadav vaid kaasaegsete brauseritega, ja see oli plaani taustal meie akna suurust 100% kuni 100% ja jookseb kogu aeg Ala (IE arvutatakse igal juhul põhineb praeguse laiuse ja kõrguse akna).

1. div on vaja keskus 2. ja võtta kaugus ülevalt akna margin-top. 2. div juba ette meie aken kinnitada, et saab keskele, sest see on sees block elemendi laius: 100% (standard väärtuse elemendi kuva: block - mis on div)

Kolmas Aeg jQuery

Jääb meile reageerida klõpsab lingil, mis ilmub aasta lõpus block P, mis pani lorem ipsum'a: 

  <a href="http://poslinski.net" class="confirm"> MAECENAS </ a>

Meie puhul on kõik sidemed klassi kinnitavad, reageerivad skripti. Sa võid kasutada meie kinnituse kõik lingid, kõrvaldades väärtus andmebaasist.

See nõuab JavaScript koodi, mis on asetatud põhja lehel: 

  src = "jquery.js" <script type="text/javascript"> </ script>
 <script type="text/javascript">
 $ (Dokument). Ready (function () {
 $ (". Kinnita"). Click (function () {
 $ ("# Kinnita")
 . Css ({läbipaistmatus: 0,95})
 . FadeIn ()
 . HTML ("<div> <h1> Suuna </ h1> <p <nuppu onClick = \" location.href = \'' + $ (this). Attr ("href") + "\ "\"> Yes </ button> <button> ei </ button> </ p> </ div> </ div> ');
 tagasi false;
 });
 $ ("# Kinnita"). Click (function () {$ (this). Hääbumise ();});
 });
 </ Script>

1. rida koormus jQuery.

Siis peamine haru meie koodi $ (dokument). Ready, aktiveerida oma koodi, pärast leht laeb.

Vastame klõpsates element klassiga kinnitavad, põhjustades sel juhul mitmeid meetodeid elemendi id = kinnitavad. Kõigepealt lisada läbipaistvust (kuid siiski element on seatud kuvama: mitte), siis kasutades meetodit fadeIn, jQuery sujuvalt liigub kuva: Puudub läbipaistmatus: 0.95 (meie puhul). Lõpuks sees element # kinnitada, laadige html koodi oma 2 divami, mis on paigutada h1 päise nupp ja kaks nuppu. Nagu te ilmselt märganud, üks neist, pluss nad on kuulutatud onClick sündmus, mis reageerivad positiivselt kasutaja kinnituse, przekierowywując talle koht, mis näitas klõpsasid lingil.

Miks tagasi vale lõpus selle ploki kood? Brauser, me ei suunata automaatselt, klõpsates lingil meie funktsioon peab tagastama false, vastasel juhul suunab ja aknad kinnitavad niidid.

Kui klõpsate kusagil mujal kui nuppu "YES", kasutada juhul Hääbumise (), plokk kaob sujuvalt meie kinnitus, mis mõistab $ ("# kinnitada"). Click (...).

Kogu kirjutatud kood peaks välja nägema midagi sellist: 

  <! DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title> kinnitus dialoog </ title>
 <style type="text/css">
 <! -
 * {Margin: 0px, padding: 0px;}
 keha {margin: 10px;}
 p {laius: 600px; margin: 0 auto; line-height: 25px;}

 / * Kinnita * /
 # Kinnita {kuva: none; position: absolute; kõrgus: 100%, laius: 100%; background: # 000; top: 0; vasakult: 0;}
 # Kinnita {kõrgus: avaldis (((&& window.Enumerable window.Enumerable.max) [document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight]. Max (): document.documentElement.scrollHeight) + "px"), laius: avaldis (((&& window.Enumerable window.Enumerable.max) [document.body.scrollWidth, document.documentElement.scrollWidth, document.body.offsetWidth, dokumendi. documentElement.clientHeight]. max (): document.documentElement.scrollWidth) + "px");}
 # Kinnita [id] {position: fikseeritud;}
 # Kinnita div {padding: 10px; margin-top: 200px;}
 # Kinnita div div {background: # 900c0c; laius: 500px; margin: 0 auto; border: 1px solid # CCC; overflow: hidden;}
 # Kinnita div div h1 {font-size: 18px; color: # fff;}
 # Kinnita div div p {padding: 20px;}
 ->
 </ Style>
 </ Head>
 <body>
 <p>
 Lorem ipsum dolor Sit Amet, consectetur adipiscing eliit.  Quisque ultrices ORCi nisl Quis.  Aliquam on kurbus.  Sed quam consequat ac leo.  Curabitur Fringilla sodales sem.  Praesent eleifend mauris ac ante aliquet dictum.  Sapien Etiam null, consequat Eget, consequat vitae, molestie id, Lectus.  Aastal HAC habitasse platea dictumst.  Aliquam feugiat odio ac Lectus.  Suspendisse egestas nisl Varius.  Alampeatükk null.  Pellentesque aliquet interdum felis.  Vestibulum libero luctus euismod.  Suspendisse sodales interdum Enimem.  Pellentesque Orcia.  Nulla Massa nunc, eleifend aka, eleifend Varius, Cong Eget, Leo.  Vestibulum ante ipsum primis sisse faucibus ORCi et ultrices posuere luctus cubilia Curae; <br/>
 Aliquet reitinguagentuurid, Quis ligula rutrum accumsan, lorem lorem velit dignissim, fermentum dignissim quam ligula at ligula.  Nulla dictum interdum Purusi.  Aenean odio.  Vestibulum pretium.  Phasellus Enimem Enimem, Semper aliquet, Tempus ac, rutrum gravida, libero.  Etiam neque odio, blandit NEC, suscipit aka, Pellentesque scelerisque, Leo.  Aastal metus id.  Vivamus rutrum.  Nulla liigitamata velit.  Nisi ut Purusi, porta juures, tincidunt Sit Amet, scelerisque ega mõlema kopsu, sem.  Sed adipiscing RISUS.  Aastal NISI.  Augustin et al.  Phasellus ullamcorper Quis urn Tempus dapibus Lacus.  Sed Eget est.  Etiam Tellus erat, adipiscing NEC, placerat sed, ultricies, ORCi.  Reitinguagentuuride ac Lectus.  Curabitur liigitamata lorem NIBH Mattis.  <a href="http://poslinski.net" class="confirm"> MAECENAS </ a> aliquet iaculis turpis.
 </ P>
 <div id="confirm"> </ div>
 src = "jquery.js" <script type="text/javascript"> </ script>
 <script type="text/javascript">
 $ (Dokument). Ready (function () {
 $ (". Kinnita"). Click (function () {
 $ ("# Kinnita")
 . Css ({läbipaistmatus: 0,95})
 . FadeIn ()
 . HTML ("<div> <h1> Suuna </ h1> <p <nuppu onClick = \" location.href = \'' + $ (this). Attr ("href") + "\ "\"> Yes </ button> <button> ei </ button> </ p> </ div> </ div> ');
 tagasi false;
 });
 $ ("# Kinnita"). Click (function () {$ (this). Hääbumise ();});
 });
 </ Script>
 </ Body>
 </ Html>

Kokkuvõte

Töö Näiteks võite näha siin .

See proovilahuse ei vaja kõiki võimalusi. Me ei laiene koodi nii, et mõjutada kinnituse kujul, siis oleks siis saatke vorm kontroll, mis samuti saab seestpoolt jQuery. Võite põhjal eespool nimetatud koodi luua plugin jQuery. Julgelt arutada kommentaarid sellele ametikohale.

Olema seltskondlik, jaga!

Seotud kanded

Kategooriad: jQuery
Tags: , , , ,
«
»
Võite järgib kõiki vastuseid sõnadest läbi feed RSS 2.0 . Võite kirjutada ka oma kommentaarid või link sellele postitusele oma lehel.
    • Obraz CAPTCHY
    Värskenda Pilt
    *

    Rämpsposti kaitse poolt WP-SpamFree