IL-ĦAMIS Diċembru 4, 2008
L-ebda kummenti

jQuery: A window konferma

Aħna jibqgħu is-suġġett ta jQuery użi prattiku. Illum I meħtieġa biex jiktbu tieqa tikkonferma operazzjoni fil-pannell amministrazzjoni. Il-każ jidher li jkun sempliċi u jistgħu jiġu solvuti mis-suġġett, jinsa dwar JavaScript (Ikkonferma) jew PHP, imma l-gost tinsab fil-mod kif tagħmel dan hekk li ma jikkawżax, u anki li kien riżultat tassew deċenti?
Se nipprova biex tippreżenta soluzzjoni tal-kampjun għall-problema, jekk wieħed jassumi li l-element li rridu hija akkumpanjata minn konferma mill-utent, rabta.

Ewwel Kampjun HTML fajl

Nibdew bil-fajl li fuqhom għandna iwettqu testijiet Vile tagħna: 

  <Tags 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" />
 Rata konferma dialog </ titolu>
 </ Kap>
 <body>
 Tags:
 Lorem ipsum dolor ipoġġu amet, consectetur elite adipiscing.  Quisque ultrices Orci quis nisl.  Aliquam fil dolor.  Zat quam consequat ac leo.  Curabitur Fringilla sodales sem.  Praesent eleifend mauris ac ante aliquet obiter.  Sapien Etiam null, consequat Eget, consequat vitae, molestie id, Lectus.  Fil 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 aka, eleifend varius, Cong Eget, leo.  Vestibulum ante ipsum primis fil faucibus Orci et ultrices posuere luctus cubilia Curae; <br/>
 Aliquet CRAs, quis ligula rutrum accumsan, Lorem Lorem velit dignissim, fermentum dignissim quam ligula fil ligula.  Interdum PURUS nulla obiter.  Aenean Odio.  Vestibulum pretium.  Phasellus Enimem Enimem, sempre aliquet, Tempus ac, rutrum gravida, libero.  Etiam neque Odio, blandit NEC, suscipit aka, scelerisque Pellentesque, leo.  Fil Metus id.  Vivamus rutrum.  Nulla nec velit.  NISI ut PURUS, porta fuq, tincidunt ipoġġu amet, scelerisque pulvinari, sem.  Zat RISUS adipiscing.  Fil NISI.  Augustin et al.  Phasellus ullamcorper URN quis Tempus dapibus Lacus.  Eget est zat  Etiam Tellus erat, adipiscing NEC, zat placerat, ultricies 1 Orci,.  CRAs ac Lectus.  Curabitur nec Lorem NIBH Mattis.  <a href="http://poslinski.net" class="confirm"> Maecenas </ a> aliquet iaculis turpis.
 </ P>
 <div id="confirm"> </ div>
 </ Ġisem>
 </ Html>

Test tal-kampjun ġeneratur Lorem ipsum , marru ġewwa p. Ftit qabel il-lametta tal-ġisem għeluq, tpoġġi l-div # tikkonferma, li fih se jkun hemm kodiċi minn tieqa tagħna biex tikkonferma.

It-tieni Is-saff preżentazzjoni

Ejjew niffukaw fuq tieqa tagħna. Fil-każ tiegħi, il-kodiċi html li se jkun responsabbli għall-tieqa kollu, se tħares kif ġej: 

  <div id="confirm">
 <div>
 <div>
 <h1> Int żgur li trid tħassar dan il-punt? </ h1>
 Tags: <button onClick="location.href='TUTAJ SE laqat il-kontenut tal-HREF ta LINKU'"> IVA </ buttuna> <button> MHUX </ buttuna> </ p>
 </ Div> <-! Tmiem # tikkonferma div div ->
 </ Div> <-! Tmiem # tikkonferma div ->
 </ Div> <-! Tmiem # Ikkonferma ->

Il-kodiċi ġewwa l jikkonfermaw #, huwa ġġenerat mill-JavaScript. Iżda huwa min jikkunsidrah għaliex jidher biss bħal dik u għaliex huwa fil-qiegħ tal-kodiċi paġna?

Nibdew bl-raġunijiet għall-inklużjoni tal-kodiċi fl-aħħar. Fid-determinazzjoni tal-pożizzjoni: assolut, għal # tikkonferma, mingħajr z-indiċi parametru, is-sekwenza ta 'oġġetti minn pożizzjoni: assoluta, se jaqblu mal-ordni li fiha huma ġġenerati mill-browser. Aħħar miġbura, se jkun hemm aktar minn munzell ta 'saffi ma' pożizzjoni: assoluta, hekk jekk per eżempju, se jkollhom l-istess dimensjonijiet, jaħbu l-saff, li deher fil-kodiċi preċedenti.

Għaliex ma tikkonferma l-ġewwa, aħna mqiegħda żewġ darbiet div? Biex tiġi ċċarata dan il-punt huwa, aqra biss it-taqsima fil-kodiċi css tiegħek li inti tpoġġi ġewwa l taqsima ras: 

  <style type="text/css">
 <! -
 * {Marġni: 0px, ikkuttunar: 0px;}
 korp {marġni: 10px;}
 p {wisa ': 600px; marġni: 0 auto; linja tal-għoli: 25px;}

 / * TIKKONFERMA * /
 # Ikkonferma {display: xejn; pożizzjoni: assoluta; għoli: 100%; wisa ': 100%; isfond: # 000; top: 0; xellug: 0;}
 # Ikkonferma {għoli: l-espressjoni (((&& window.Enumerable.max window.Enumerable) [document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight] Max ().: document.documentElement.scrollHeight) + "px"); wisa ': l-espressjoni (((&& window.Enumerable.max window.Enumerable) [document.body.scrollWidth, document.documentElement.scrollWidth, document.body.offsetWidth, dokument. . documentElement.clientHeight] max (): document.documentElement.scrollWidth) + "px");}
 # Ikkonferma [id] {pożizzjoni: fissa;}
 # Ikkonferma div {ikkuttunar: 10px; marġini ta 'fuq: 200px;}
 # Ikkonferma div div {isfond: # 900c0c; wisa ': 500px; marġni: 0 auto; fruntiera: 1px solida # KDK; overflow: moħbija;}
 # Ikkonferma div div h1 {font-daqs: 18px; kulur: # FFF;}
 # Ikkonferma div div p {ikkuttunar: 20px;}
 ->
 </ Style>

# Jiddefinixxi hawn tikkonferma l-isfond li se "tkopri" il-paġna kollu. It-tieni linja, (l-1 b'għoli stramba u wisa '), huwa meħtieġ fil-każ ta' Internet Explorer. # Ikkonferma [id] tkun tista 'tinftiehem biss browsers moderni, u dan kien il-pjan lill-isfond ta' tieqa tagħna kien id-daqs ta '100% sa 100% u jibda matul il-ħin mal-sit (per IE tiġi kkalkulata f'kull każ bbażata fuq il-wisa 'attwali' u għoli tat-tieqa).

L div 1 huwa meħtieġ li ċ-ċentru l-2 u li tieħu distanza mill-top window fuq il-marġini ta 'fuq. Il div 2 diġà tipprovdi tieqa tagħna biex jikkonferma li jistgħu jiġu ċċentrata, kif huwa ġewwa element blokk b'wisa: 100% (valur standard għal element ma display: block - li huwa div)

It-tielet Ħin għall jQuery

Tibqa għalina biex jirreaġixxu għall klikks fuq il-link li tidher fl-aħħar tal-blokka P, li tpoġġi Lorem ipsum'a: 

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

Fil-każ tagħna, l-ħoloq kollha ma 'klassi jikkonfermaw, ser jirreaġixxu għall-iskrittura. Inti tista 'tapplika rikonoxximent tagħna biex l-ħoloq kollha, għat-tneħħija ta' valur mid-database.

Hija teħtieġ kodiċi JavaScript li titqiegħed fuq il-qiegħ tal-paġna: 

  src = "jquery.js" <script type="text/javascript"> </ script>
 <script type="text/javascript">
 $ (Dokument). Ready (funzjoni () {
 $ (". Ikkonferma"). Ikklikkja (funzjoni () {
 $ ("# Ikkonferma")
 . Css ({opaċità: 0.95})
 . FadeIn ()
 . Html ("<div> <div> <h1> riindirizz </ h1> <p <buttuna onClick = \" location.href = \'' + $ (dan). Attr ("href") + "\ "\"> Iva </ buttuna> <button> MHUX </ buttuna> </ p> </ div> </ div> ");
 ritorn foloz;
 });
 . $ ("# Ikkonferma") Click (funzjoni () {$ (dan) FadeOut ();.});
 });
 </ Script>

L jQuery 1 linja tat-tagħbija.

Imbagħad, il-fergħa ewlenija tal-kodiċi $ tagħna (dokument). Ready, jattiva kodiċi tiegħek, wara ftit tagħbijiet paġna.

Aħna jirrispondu għall tikklikkja fuq l-element bl-klassi jikkonfermaw, li jikkawżaw f'dan il-każ serje ta 'metodi dwar l-element bl id = jikkonfermaw. Biex tibda, żid it-trasparenza (iżda xorta element huwa ssettjat li juri: xejn), imbagħad bl-użu fadeIn metodu, jQuery ħarir jiċċaqlaq minn wiri: xejn biex opaċità: 0.95 (fil-każ tagħna). Fl-aħħarnett, ġewwa l-element ta '# tikkonferma, tagħbija l-kodiċi html ta' żewġ divami tagħna, li huwa mqiegħed ġewwa l-buttuna header h1 u żewġ buttuni. Kif inti probabilment, nnotajt wieħed minnhom, flimkien ma 'dawn huma dikjarati avveniment onClick, li se jirreaġixxu għal konferma utent pożittiv, przekierowywując lilu għall-post li wera rabta għafast.

Għaliex ritorn foloz fl-aħħar ta 'dan blokk ta' kodiċi? Biex il-browser, aħna ma idawwru awtomatikament, billi tikklikkja fuq il-link, il-funzjoni tagħna għandu jirritorna falza, inkella ser jagħtu direzzjoni ġdida u twieqi se jkunu qed jikkonfermaw il-ħjut.

Jekk tikklikkja imkien ieħor milli fil-buttuna ta '"IVA", l-użu FadeOut avveniment (), il-blokk se jisparixxu mingħajr konnessjoni ma' konferma tagħna, li jirrealizza $ ("# jikkonferma"). Ikklikkja (...).

Il-kodiċi kollha bil-miktub għandha tfittex xi ħaġa bħal din: 

  <Tags 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" />
 Rata konferma dialog </ titolu>
 <style type="text/css">
 <! -
 * {Marġni: 0px, ikkuttunar: 0px;}
 korp {marġni: 10px;}
 p {wisa ': 600px; marġni: 0 auto; linja tal-għoli: 25px;}

 / * TIKKONFERMA * /
 # Ikkonferma {display: xejn; pożizzjoni: assoluta; għoli: 100%; wisa ': 100%; isfond: # 000; top: 0; xellug: 0;}
 # Ikkonferma {għoli: l-espressjoni (((&& window.Enumerable.max window.Enumerable) [document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight] Max ().: document.documentElement.scrollHeight) + "px"); wisa ': l-espressjoni (((&& window.Enumerable.max window.Enumerable) [document.body.scrollWidth, document.documentElement.scrollWidth, document.body.offsetWidth, dokument. . documentElement.clientHeight] max (): document.documentElement.scrollWidth) + "px");}
 # Ikkonferma [id] {pożizzjoni: fissa;}
 # Ikkonferma div {ikkuttunar: 10px; marġini ta 'fuq: 200px;}
 # Ikkonferma div div {isfond: # 900c0c; wisa ': 500px; marġni: 0 auto; fruntiera: 1px solida # KDK; overflow: moħbija;}
 # Ikkonferma div div h1 {font-daqs: 18px; kulur: # FFF;}
 # Ikkonferma div div p {ikkuttunar: 20px;}
 ->
 </ Style>
 </ Kap>
 <body>
 Tags:
 Lorem ipsum dolor ipoġġu amet, consectetur elite adipiscing.  Quisque ultrices Orci quis nisl.  Aliquam fil dolor.  Zat quam consequat ac leo.  Curabitur Fringilla sodales sem.  Praesent eleifend mauris ac ante aliquet obiter.  Sapien Etiam null, consequat Eget, consequat vitae, molestie id, Lectus.  Fil 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 aka, eleifend varius, Cong Eget, leo.  Vestibulum ante ipsum primis fil faucibus Orci et ultrices posuere luctus cubilia Curae; <br/>
 Aliquet CRAs, quis ligula rutrum accumsan, Lorem Lorem velit dignissim, fermentum dignissim quam ligula fil ligula.  Interdum PURUS nulla obiter.  Aenean Odio.  Vestibulum pretium.  Phasellus Enimem Enimem, sempre aliquet, Tempus ac, rutrum gravida, libero.  Etiam neque Odio, blandit NEC, suscipit aka, scelerisque Pellentesque, leo.  Fil Metus id.  Vivamus rutrum.  Nulla nec velit.  NISI ut PURUS, porta fuq, tincidunt ipoġġu amet, scelerisque pulvinari, sem.  Zat RISUS adipiscing.  Fil NISI.  Augustin et al.  Phasellus ullamcorper URN quis Tempus dapibus Lacus.  Eget est zat  Etiam Tellus erat, adipiscing NEC, zat placerat, ultricies 1 Orci,.  CRAs ac Lectus.  Curabitur nec 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 (funzjoni () {
 $ (". Ikkonferma"). Ikklikkja (funzjoni () {
 $ ("# Ikkonferma")
 . Css ({opaċità: 0.95})
 . FadeIn ()
 . Html ("<div> <div> <h1> riindirizz </ h1> <p <buttuna onClick = \" location.href = \'' + $ (dan). Attr ("href") + "\ "\"> Iva </ buttuna> <button> MHUX </ buttuna> </ p> </ div> </ div> ");
 ritorn foloz;
 });
 . $ ("# Ikkonferma") Click (funzjoni () {$ (dan) FadeOut ();.});
 });
 </ Script>
 </ Ġisem>
 </ Html>

Sommarju

Ħidma eżempju, tista 'tara hawn .

Din is-soluzzjoni kampjun ma teħtieġx l-possibilitajiet kollha. Aħna jista 'jestendi l-kodiċi b'mod li jolqot il-forma konferma, inti mbagħad tibgħat il-kontroll forma, li wkoll jistgħu jsiru minn ġewwa jQuery. Tista' wkoll, abbażi tal-kodiċi hawn fuq biex jinħoloq plugin għal jQuery. Ħossok liberu li jiddiskutu fil-kummenti għal dan post.

Jiġu soċjevoli, Share!

Entrati relatati

Kategoriji: jQuery
Tags: , , , ,
«
»
Inti tista 'ssegwi kwalunkwe tweġibiet għal dan id-dħul permezz ta' l-għalf 2.0 feed . Tista 'wkoll tikteb kummenti tiegħek , jew biex jorbtu għal din post fuq paġna tiegħek.
    • Obraz CAPTCHY
    Riffriskar Image
    *

    Spam Protezzjoni minn WP-SpamFree