Ketvirtadienis, Gruodis 4th, 2008
Nėra komentarų

JQuery: patvirtinimo langas

Mes vis dar praktinio panaudojimo JQuery. Šiandien man reikia parašyti langą, patvirtinantį operaciją administravimo skydelio. Atvejis yra paprastas ir gali būti išspręsta klausimu, pamiršdami apie JavaScript (patvirtinti) ar PHP, bet įdomus yra tai, kaip tai padaryti tai, kad nebūtų sukelti, ir net tai buvo tikrai padorus rezultatas?
Pasistengsiu pateikti mėginio tirpalo į problemą, darant prielaidą, kad elementas, kad mes norime kartu patvirtinti vartotojo nuoroda.

Pirmas Pavyzdys HTML byla

Mes pradedame su byla, kurią mes atlikti mūsų niekingą tyrimus: 

  <DOCTYPE html VISUOMENĖS! "- / / 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> patvirtinimo dialogo </ pavadinimas>
 </ Head>
 <body>
 <p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elitas.  Quisque ultrices Orci nisl quis.  Aliquam ne liūdesys.  Sed quam consequat kintamosios Leo.  Curabitur. Fringilla sodales sem.  Praesent eleifend Mauris ac ante aliquet įsisąmoninta.  Sapien Etiam null, consequat eget, consequat aprašymas, molestie id, lectus.  "HAC habitasse platea dictumst.  Aliquam feugiat odio AC lectus.  Suspendisse egestas nisl varius.  Morbi niekinis.  Pellentesque aliquet interdum felis.  Vestibulum libero LUCTUS euismod.  Suspendisse sodales interdum Enimem.  Pellentesque Orcia.  Nulla Massa nunc, eleifend dar žinomas kaip, eleifend varius, Cong eget, Liūtas.  Vestibulum-ante ipsum primis į faucibus Orci et ultrices posuere LUCTUS cubilia Curae; <br/>
 Aliquet Cras, ligula quis rutrum accumsan Ledu. Ledu velit dignissim, fermentum dignissim quam ligula ne ligula.  Nulla dictum interdum purus.  Aenean odio.  Vestibulum pretium.  Phasellus Enimem Enimem, ir Semper aliquet, Tempus AC, rutrum gravida, Libero.  Etiam neque odio, blandit NEC, suscipit dar žinomas kaip, Pellentesque scelerisque, Liūtas.  Metus id.  Vivamus rutrum.  Nulla niekur kitur nepriskirta, velit.  NISI Utena purus, Vartai ne tincidunt sit amet, scelerisque pulvinar, sem.  Sed adipiscing Risus.  NISI.  Augustinas et al.  Phasellus ullamcorper quis balsuokite. Tempus dapibus lacus.  SED eget est  Etiam Tellus erat, adipiscing NEC, placerat sed, ultricies su Orci.  Cras AC lectus.  Curabitur niekur kitur nepriskirta, Ledu NIBH Mattis.  <a href="http://poslinski.net" class="confirm"> ir mecenatas </ a> aliquet iaculis turpis.
 </ P>
 <div id="confirm"> </ div>
 </ Body>
 </ Html>

Bandomasis tekstas generatorius Lorem ipsum , nuvyko viduje p. Netrukus prieš uždarymo gairę body, supakuotas div # patvirtinti, per kurį bus kodas iš mūsų lange patvirtinti.

Antra Pateikimo sluoksniu

Leiskite mums sutelkti dėmesį į mūsų langą. Mano atveju, html kodas, kuris bus atsakingas už visą lange atrodys taip: 

  <div id="confirm">
 <div>
 <div>
 <h1> Ar jūs tikrai norite ištrinti šią prekę? </ h1>
 <p> <button onClick="location.href='TUTAJ smogs LINKU'"> TAIP </ button> <button> NE </ button> </ p> HREF turinį
 </ Div> <! Pabaiga # patvirtinti div div>
 </ Div> <! Pabaiga # patvirtinti div>
 </ Div> <! Pabaiga # Patvirtinkite ->

Viduje # Patvirtinkite kodas, generuojamas JavaScript. Bet ji yra verta pasvarstyti, kodėl ji atrodo kaip, kad ir kodėl puslapio kodą apačioje?

Pradėkime priežasčių, įskaitant kodą pabaigoje. Nustatant poziciją: absoliuti, # patvirtinti, be z-index parametro, iš pozicijos objektų sekos: absoliutus, jis bus suderinti tvarką, pagal kurią jie generuoja naršyklėje. Paskutinė kompiliavimas, bus daugiau nei kamino sluoksnių padėtis: absoliuti, todėl, jei pavyzdžiui, turės tas pačias dimensijas, paslėpti sluoksnį, kuris pasirodė kodo anksčiau.

Kodėl patvirtinti vidų, mes įdėjome du kartus div? Norėdami patikslinti šį klausimą, tiesiog perskaitykite skyrių savo CSS kodas, kad įdėti viduje skyriuje "head: 

  <style type="text/css">
 <! -
 * {Marža: 0px, prikimšti: 0px;}
 body {margin: 10px;}
 p {Plotis: 600px; marža: 0 automatinis, line-height: 25px;}

 / * Patvirtinkite * /
 # Patvirtinkite {display: none; pozicija: absoliuti; aukštis: 100%, plotis: 100%; background: # 000; viršuje: 0; kairės: 0;}
 # Patvirtinkite {aukštis: išraiška (((&& window.Enumerable window.Enumerable.max [document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight] Max (): document.documentElement.scrollHeight) + 'px'); plotis: išraiška (((&& window.Enumerable window.Enumerable.max [document.body.scrollWidth, document.documentElement.scrollWidth, document.body.offsetWidth, dokumentas. documentElement.clientHeight] max (): document.documentElement.scrollWidth) + "px");}
 # Patvirtinkite [ID] {position: fixed;}
 # Patvirtinkite div {padding: 10px; margin-top: 200px;}
 # Patvirtinti div div {background: # 900c0c; Plotis: 500px; skirtumas: 0 automatinis; border: 1px solid # BMK; perpildymas: paslėptas;}
 # Patvirtinkite div div h1 {font-size: 18px; spalva: # FFF;}
 # Patvirtinkite div div p {padding: 20px}
 ->
 </ Style>

# Apibrėžia čia patvirtinkite foną, kad "padengti" visą puslapį. 2. eilutė, (vienas yra keistu aukščio ir pločio), būtina "Internet Explorer". # Patvirtinkite [ID] yra suprantama tik šiuolaikinių naršyklių ir tai buvo planas mūsų langą fone buvo 100% iki 100% dydžio ir veikia visą laiką. svetainėje (IE apskaičiuojama kiekvienu konkrečiu atveju, remiantis dabartinio lango plotį ir aukštį).

Div yra būtina, centras 2 ir atstumas nuo viršutinio lango margin-top. Antrasis div jau mūsų lange patvirtinti, kad gali būti centre, nes ji yra viduje bloko elemento su plotis: 100% (standartinė vertė su ekranu elementas: blokas - div.)

Trečias Laikas, JQuery

Belieka mums reaguoti į paspaudimus ant nuorodos, kuri pasirodo bloko P, kuriose pateikiami Lorem ipsum'a pabaigoje: 

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

Mūsų atveju, visos nuorodos su klasės Patvirtinkite, leis reaguoti į scenarijų. Galima taikyti mūsų patvirtinimą, visus saitus, pašalinti iš duomenų bazės vertę.

Jis reikalauja JavaScript kodą, kuris pateiktas puslapio apačioje: 

  src = "jquery.js" <script type="text/javascript"> </ script>
 <script type="text/javascript">
 $ (Dokumentas) Parengties (function () {
 $ ("Patvirtinti"). Spauskite (function () {
 $ ("#" Patvirtinti ")
 . Css ({opacity: 0.95})
 . Fadein ()
 . HTML ("<div> <div> <h1> Redirect </ h1> <p <mygtukas onclick = \" Location.href = \ "+ $ (tai). Attr (" href ") +" \ "\"> Taip </ button> <button> NE </ button> </ p> </ div> </ div> ');
 return false;
 });
 $ ("#" Patvirtinti ") Spustelėkite (function () {$ (tai) Fadeout ();});
 });
 </ Script>

Pirmoji eilutė apkrova JQuery.

Tada pagrindinis filialas mūsų kodas $ (document). Pasiruošti, aktyvuoti savo kodą, po puslapio apkrovų.

Mes atsakome paspaudę ant elemento su klasės Patvirtinkite, todėl šiuo atveju keletą metodų, su id = Patvirtinti elementas. Norėdami pradėti, pridėti skaidrumą (bet vis dar elementas yra nustatyta rodyti: nieko), tada naudojant metodą Fadein, JQuery sklandžiai juda nuo ekrano: nė viena neskaidrumo: 0.95 (mūsų atveju). Galiausiai, viduje # patvirtinti elementą, įkelti html code mūsų dviejų divami, kuri patalpinama viduje h1 antraštės mygtuke ir du mygtukai. Kaip jūs turbūt jau pastebėjote vieną iš jų, be to, jie pareiškė, onclick įvykis, kuris reaguoja į teigiamą vartotojo patvirtinimo, przekierowywując jį į tą vietą, kuri parodė klikniętych.

Kodėl grįžti klaidingas šio kodo bloko pabaigos? Į naršyklę, mes ne nukreipti automatiškai, paspaudę ant nuorodos, mūsų funkcija turi grąžinti klaidingas, nes kitaip jis bus nukreipti ir langai bus patvirtino temas.

Jei spustelėsite bet kur kitur nei "TAIP", jei panaudojus duomenis Fadeout () mygtukas, blokas išnyks vientisai su mūsų patvirtinimą, kuri supranta, $ ("# patvirtinti"). Spauskite (...).

Visa parašytas kodas turėtų atrodyti taip: 

  <DOCTYPE html VISUOMENĖS! "- / / 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> patvirtinimo dialogo </ pavadinimas>
 <style type="text/css">
 <! -
 * {Marža: 0px, prikimšti: 0px;}
 body {margin: 10px;}
 p {Plotis: 600px; marža: 0 automatinis, line-height: 25px;}

 / * Patvirtinkite * /
 # Patvirtinkite {display: none; pozicija: absoliuti; aukštis: 100%, plotis: 100%; background: # 000; viršuje: 0; kairės: 0;}
 # Patvirtinkite {aukštis: išraiška (((&& window.Enumerable window.Enumerable.max [document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight] Max (): document.documentElement.scrollHeight) + 'px'); plotis: išraiška (((&& window.Enumerable window.Enumerable.max [document.body.scrollWidth, document.documentElement.scrollWidth, document.body.offsetWidth, dokumentas. documentElement.clientHeight] max (): document.documentElement.scrollWidth) + "px");}
 # Patvirtinkite [ID] {position: fixed;}
 # Patvirtinkite div {padding: 10px; margin-top: 200px;}
 # Patvirtinti div div {background: # 900c0c; Plotis: 500px; skirtumas: 0 automatinis; border: 1px solid # BMK; perpildymas: paslėptas;}
 # Patvirtinkite div div h1 {font-size: 18px; spalva: # FFF;}
 # Patvirtinkite div div p {padding: 20px}
 ->
 </ Style>
 </ Head>
 <body>
 <p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elitas.  Quisque ultrices Orci nisl quis.  Aliquam ne liūdesys.  Sed quam consequat kintamosios Leo.  Curabitur. Fringilla sodales sem.  Praesent eleifend Mauris ac ante aliquet įsisąmoninta.  Sapien Etiam null, consequat eget, consequat aprašymas, molestie id, lectus.  "HAC habitasse platea dictumst.  Aliquam feugiat odio AC lectus.  Suspendisse egestas nisl varius.  Morbi niekinis.  Pellentesque aliquet interdum felis.  Vestibulum libero LUCTUS euismod.  Suspendisse sodales interdum Enimem.  Pellentesque Orcia.  Nulla Massa nunc, eleifend dar žinomas kaip, eleifend varius, Cong eget, Liūtas.  Vestibulum-ante ipsum primis į faucibus Orci et ultrices posuere LUCTUS cubilia Curae; <br/>
 Aliquet Cras, ligula quis rutrum accumsan Ledu. Ledu velit dignissim, fermentum dignissim quam ligula ne ligula.  Nulla dictum interdum purus.  Aenean odio.  Vestibulum pretium.  Phasellus Enimem Enimem, ir Semper aliquet, Tempus AC, rutrum gravida, Libero.  Etiam neque odio, blandit NEC, suscipit dar žinomas kaip, Pellentesque scelerisque, Liūtas.  Metus id.  Vivamus rutrum.  Nulla niekur kitur nepriskirta, velit.  NISI Utena purus, Vartai ne tincidunt sit amet, scelerisque pulvinar, sem.  Sed adipiscing Risus.  NISI.  Augustinas et al.  Phasellus ullamcorper quis balsuokite. Tempus dapibus lacus.  SED eget est  Etiam Tellus erat, adipiscing NEC, placerat sed, ultricies su Orci.  Cras AC lectus.  Curabitur niekur kitur nepriskirta, Ledu NIBH Mattis.  <a href="http://poslinski.net" class="confirm"> ir mecenatas </ a> aliquet iaculis turpis.
 </ P>
 <div id="confirm"> </ div>
 src = "jquery.js" <script type="text/javascript"> </ script>
 <script type="text/javascript">
 $ (Dokumentas) Parengties (function () {
 $ ("Patvirtinti"). Spauskite (function () {
 $ ("#" Patvirtinti ")
 . Css ({opacity: 0.95})
 . Fadein ()
 . HTML ("<div> <div> <h1> Redirect </ h1> <p <mygtukas onclick = \" Location.href = \ "+ $ (tai). Attr (" href ") +" \ "\"> Taip </ button> <button> NE </ button> </ p> </ div> </ div> ');
 return false;
 });
 $ ("#" Patvirtinti ") Spustelėkite (function () {$ (tai) Fadeout ();});
 });
 </ Script>
 </ Body>
 </ Html>

Santrauka

Darbo Pavyzdžiui, galite pamatyti čia .

Šis mėginys sprendimas nereikalauja visas galimybes. Mes galime išplėsti kodą taip, kaip paveikti patvirtinimo formą, galite išsiųsti formos kontrolė, kuri taip pat gali būti pagamintas iš per JQuery. Galite taip pat į pirmiau pateiktą kodą sukurti jQuery plugin. Jauskitės laisvai aptarti pastabas į šį pranešimą.

Būkite Plepūnas, Pasidalink!

Panašūs įrašai

Kategorijos: JQuery
Tags: , , , ,
«
»
Jūs galite sekti atsakymus į šį įrašą per RSS 2.0 pašarų . Taip pat galite rašyti savo pastabas , ar nuorodą į šį postą į savo puslapį.
    • Obraz CAPTCHY
    Atnaujinti vaizdą
    *

    Šlamštas apsauga pagal WP-SpamFree