Torstai, 04 joulukuu 2008
Ei kommentteja

jQuery: vahvistus ikkuna

Olemme edelleen aihe hyötykäytön jQuery. Tänään minun piti kirjoittaa ikkuna vahvistaa operaation hallintapaneeliin. Tapaus näyttää olevan yksinkertaisia ​​ja ratkeavat aihe, unohdetaan JavaScript (Vahvista) tai PHP, mutta hauskaa on siinä, miten tämä tehdään, jotta se ei aiheuta, ja sekin oli tosi asiallinen tulos?
Yritän esittää näytteen ratkaisu ongelmaan, olettaen, että elementti, joka halutaan on liitetty vahvistuksen käyttäjä, on yhteys.

Ensimmäinen Näyte HTML-tiedosto

Aloitamme tiedoston joka Teemme halpamainen testit: 

  <! DOCTYPE html JULKINEN "- / / 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> vahvistusikkunassa </ title>
 </ Head>
 <body>
 <p>
 Lorem ipsum dolor sit amet, consectetur adipiscing eliittiä.  Quisque ultrices ORCI nisl quis.  Aliquam klo dolor.  Sed quam consequat ac leo.  Curabitur Fringilla sodales sem.  Praesent eleifend mauris ac ante aliquet sanonta.  Sapien Etiam null, consequat eget, consequat vitae, molestie id, Lectus.  Vuonna HAC habitasse Platea dictumst.  Aliquam feugiat Odio ac Lectus.  Suspendisse egestas nisl Varius.  Morbi null.  Pellentesque aliquet interdum felis.  Vestibulum Libero luctus euismod.  Suspendisse sodales interdum Enimem.  Pellentesque Orcia.  Nulla massa nunc, eleifend alias, eleifend Varius, Cong eget, leo.  Vestibulum ante ipsum primis vuonna faucibus ORCI et ultrices posuere luctus cubilia Curae; <br/>
 Aliquet Cras, quis ligula rutrum accumsan, Lorem Lorem velit dignissim, fermentum dignissim quam ligula klo ligula.  Nulla dictum interdum Purus.  Aenean Odio.  Vestibulum pretium.  Phasellus Enimem Enimem, Semper aliquet, Tempus ac, rutrum gravida, Libero.  Etiam neque Odio, blandit NEC, suscipit alias, Pellentesque scelerisque, leo.  In Metus id.  Vivamus rutrum.  Nulla muualle velit.  Nisi ut Purus, Porta at, tincidunt sit amet, scelerisque pulvinar, sem.  Sed adipiscing Risus.  In NISI.  Augustin et ai.  Phasellus ullamcorper quis uurna tempus dapibus Lacus.  Sed eget est  Etiam Tellus Erat, adipiscing NEC, placerat sed, ultricies, ORCI.  Cras ac Lectus.  Curabitur muualle Lorem NIBH Mattis.  <a href="http://poslinski.net" class="confirm"> Maecenas </ a> aliquet iaculis turpis.
 </ P>
 <div id="confirm"> </ div>
 </ Body>
 </ Html>

Näyte teksti generaattori Lorem ipsum , meni sisälle s.. Vähän ennen sulkemista body, laita div # vahvistavat, jossa tulee olemaan koodia meidän ikkunasta vahvistaaksesi.

Toinen Esityskerroksen

Keskitytään meidän ikkunassa. Minun tapauksessani, html-koodin, joka vastaa koko ikkunan, se näyttää seuraavalta: 

  <div id="confirm">
 <div>
 <div>
 <h1> Oletko varma että haluat poistaa tämän kohteen? </ h1>
 <p> <button onClick="location.href='TUTAJ osuu sisältö HREF ja LINKU'"> KYLLÄ </ painiketta> <button> EI </ painiketta> </ p>
 </ Div> <! - End # vahvista div div ->
 </ Div> <! - End # vahvista div ->
 </ Div> <! - End # Vahvista ->

Koodin sisällä # vahvistavat, syntyy JavaScript. Mutta kannattaa harkita, miksi se näyttää aivan niin ja miksi alareunassa sivun koodi?

Aloitetaan syistä myös koodin lopussa. Määritettäessä position: absolute, ja # vahvistavat, ilman z-index parametri, sarja esineiden position: absolute, se vastaa järjestyksessä, jossa ne syntyvät selaimen. Viimeksi käännetty, on enemmän kuin pinon kerroksia position: absolute, joten jos esimerkiksi on samat mitat, peittää kerros, joka ilmestyi koodia aikaisemmin.

Miksi vahvista sisälle, otimme kaksi kertaa div? Selventämään asiaa on vain lukea osion CSS-koodia, laitat pään sisällä osa: 

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

 / * VAHVISTA * /
 # Vahvista {display: none; position: absolute; height: 100%; width: 100%; tausta: # 000; top: 0; left: 0;}
 # Vahvista {height: lauseke (((&& window.Enumerable window.Enumerable.max) [document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight]. Max (): document.documentElement.scrollHeight) + "px"), leveys: lauseke (((&& window.Enumerable window.Enumerable.max) [document.body.scrollWidth, document.documentElement.scrollWidth, document.body.offsetWidth-asiakirjassa. documentElement.clientHeight]. max (): document.documentElement.scrollWidth) + "px");}
 # Varmista [id] {position: fixed;}
 # Vahvista div {padding: 10px; margin-top: 200px;}
 # Vahvista div div {background: # 900c0c; width: 500px; margin: 0 auto; reunusta: 1px solid # CCC; overflow: hidden;}
 # Vahvista div div H1 {font-size: 18px; color: # FFF;}
 # Vahvista div div p {padding: 20px;}
 ->
 </ Div>

# Määrittää tässä vahvistavat tausta joka "peittää" koko sivun. Toinen rivi (yksi outo korkeus ja leveys) on tarpeen, jos Internet Explorer. # Vahvista [id] on ymmärrettävissä vain modernit selaimet, ja tämä oli suunnitelma taustalla meidän ikkunan sai kokoon 100% 100% ja kulkee koko ajan kanssa sivusto (IE lasketaan kussakin tapauksessa pohjalta nykyinen leveys ja korkeus ikkunan).

Ensimmäinen p on tarpeen keskus toinen ja tehdä etäisyys ylhäältä ikkunan marginaali-ylhäältä. Toisessa div jo meidän ikkuna vahvistaa, että voidaan keskittää, koska se on sisällä lohkoelementistä width: 100% (vakio arvo elementin display: block - mikä on div)

Kolmas Aika jQuery

Se on meidän reagoida napsauttaa linkkiä, joka näkyy lopussa lohkon P, joka laittaa lorem ipsum'a: 

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

Meidän tapauksessamme kaikki siteet luokan vahvistavat, reagoivat script. Voisit hakea Ymmärrämme kaikkia linkkejä, jonkun arvon tietokannasta.

Se vaatii Javascriptin koodin, joka on sijoitettu alaosaan sivun: 

  src = "jquery.js" <script type="text/javascript"> </ script>
 <script type="text/javascript">
 $ (Document). Ready (function () {
 $ (". Confirm"). Valitse (function () {
 $ ("# Vahvista")
 . Css ({opacity: 0,95})
 . FadeIn ()
 . Html ("<div> <div> <h1> Uudelleenohjaus </ h1> <p <painiketta onClick = \" location.href = \'' + $ (tämä). Attr ("href") + "\ "\"> Kyllä </ painiketta> <button> EI </ painiketta> </ p> </ div> </ div> ');
 palauttaa false;
 });
 $ ("# Vahvista"). Valitse (function () {$ (tämä). Loppuhäivytyksen ();});
 });
 </ Script>

Ensimmäinen rivi kuorma jQuery.

Sitten tärkein osa meidän code $ (document). Ready, aktivoi koodi, kun sivu latautuu.

Me vastata klikkaamalla elementti luokan vahvistavat, aiheuttaa tässä tapauksessa useita menetelmiä elementin id = Vahvista. Aluksi lisätä avoimuutta (mutta silti elementin arvo asetetaan display: none), sitten käyttämällä menetelmää fadeIn, jQuery saumattomasti siirtyy display: none ja peittävyyden: 0,95 (tässä tapauksessa). Lopuksi sisällä osa # vahvistavat, lataa html koodin molempien divami, joka on sijoitettu h1 otsikko painiketta ja kaksi painiketta. Kuten varmaan ovat huomanneet yksi heistä, ja ne ilmoitetaan onClick tapahtuma, joka reagoi positiivisen käyttäjän vahvistusta, przekierowywując hänet paikkaan, joka oli napsautti linkkiä.

Miksi palata väärä lopussa tämän koodiosion? Voit selainta, emme ohjata automaattisesti, napsauttamalla linkkiä, meidän tehtävämme on palauttaa false, muuten se ohjaa ja ikkunoiden tulee vahvistaa kierteet.

Jos valitset muualla kuin nappia "Kyllä", käytä tapahtuma Loppuhäivytyksen (), lohko katoaa saumattomasti vahvistus, joka tajuaa $ ("# vahvista"). Klikkaa (...).

Koko kirjoitettu koodi pitäisi näyttää tältä: 

  <! DOCTYPE html JULKINEN "- / / 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> vahvistusikkunassa </ title>
 <style type="text/css">
 <! -
 * {Margin: 0px, padding: 0px;}
 body {margin: 10px;}
 p {width: 600px; margin: 0 auto; line-height: 25px;}

 / * VAHVISTA * /
 # Vahvista {display: none; position: absolute; height: 100%; width: 100%; tausta: # 000; top: 0; left: 0;}
 # Vahvista {height: lauseke (((&& window.Enumerable window.Enumerable.max) [document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight]. Max (): document.documentElement.scrollHeight) + "px"), leveys: lauseke (((&& window.Enumerable window.Enumerable.max) [document.body.scrollWidth, document.documentElement.scrollWidth, document.body.offsetWidth-asiakirjassa. documentElement.clientHeight]. max (): document.documentElement.scrollWidth) + "px");}
 # Varmista [id] {position: fixed;}
 # Vahvista div {padding: 10px; margin-top: 200px;}
 # Vahvista div div {background: # 900c0c; width: 500px; margin: 0 auto; reunusta: 1px solid # CCC; overflow: hidden;}
 # Vahvista div div H1 {font-size: 18px; color: # FFF;}
 # Vahvista div div p {padding: 20px;}
 ->
 </ Div>
 </ Head>
 <body>
 <p>
 Lorem ipsum dolor sit amet, consectetur adipiscing eliittiä.  Quisque ultrices ORCI nisl quis.  Aliquam klo dolor.  Sed quam consequat ac leo.  Curabitur Fringilla sodales sem.  Praesent eleifend mauris ac ante aliquet sanonta.  Sapien Etiam null, consequat eget, consequat vitae, molestie id, Lectus.  Vuonna HAC habitasse Platea dictumst.  Aliquam feugiat Odio ac Lectus.  Suspendisse egestas nisl Varius.  Morbi null.  Pellentesque aliquet interdum felis.  Vestibulum Libero luctus euismod.  Suspendisse sodales interdum Enimem.  Pellentesque Orcia.  Nulla massa nunc, eleifend alias, eleifend Varius, Cong eget, leo.  Vestibulum ante ipsum primis vuonna faucibus ORCI et ultrices posuere luctus cubilia Curae; <br/>
 Aliquet Cras, quis ligula rutrum accumsan, Lorem Lorem velit dignissim, fermentum dignissim quam ligula klo ligula.  Nulla dictum interdum Purus.  Aenean Odio.  Vestibulum pretium.  Phasellus Enimem Enimem, Semper aliquet, Tempus ac, rutrum gravida, Libero.  Etiam neque Odio, blandit NEC, suscipit alias, Pellentesque scelerisque, leo.  In Metus id.  Vivamus rutrum.  Nulla muualle velit.  Nisi ut Purus, Porta at, tincidunt sit amet, scelerisque pulvinar, sem.  Sed adipiscing Risus.  In NISI.  Augustin et ai.  Phasellus ullamcorper quis uurna tempus dapibus Lacus.  Sed eget est  Etiam Tellus Erat, adipiscing NEC, placerat sed, ultricies, ORCI.  Cras ac Lectus.  Curabitur muualle 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">
 $ (Document). Ready (function () {
 $ (". Confirm"). Valitse (function () {
 $ ("# Vahvista")
 . Css ({opacity: 0,95})
 . FadeIn ()
 . Html ("<div> <div> <h1> Uudelleenohjaus </ h1> <p <painiketta onClick = \" location.href = \'' + $ (tämä). Attr ("href") + "\ "\"> Kyllä </ painiketta> <button> EI </ painiketta> </ p> </ div> </ div> ');
 palauttaa false;
 });
 $ ("# Vahvista"). Valitse (function () {$ (tämä). Loppuhäivytyksen ();});
 });
 </ Script>
 </ Body>
 </ Html>

Yhteenveto

Työskentely esimerkiksi näet täältä .

Tämä näyte ratkaisu ei vaadi kaikkia mahdollisuuksia. Voimme laajentaa koodia siten, että ne vaikuttavat vahvistuksen lomakkeen, voit lähettää lomakkeen valvontaa, joka voidaan myös soitettava jQuery. Voit myös pohjalta edellä koodin luoda plugin varten jQuery. Voit vapaasti keskustella kommentteja tähän tehtävään.

Ole Seurallinen, Jaa!

Liittyvät merkinnät

Luokat: jQuery
Tunnisteet: , , , ,
«
»
Voit seurata tämän artikkelin vastauksia kautta syötteen RSS 2.0 . Voit myös kirjoittaa omia kommentteja tai linkittää tähän tekstiin sivulla.
    • Obraz CAPTCHY
    Päivitä kuva
    *

    Spam Protection WP-SpamFree