E enjte, 4 dhjetor, 2008
Nuk ka komente

jQuery: Një dritare konfirmimi

Ne mbetemi objekt i jQuery praktike përdor. Sot unë e nevojshme për të shkruar një dritare konfirmon një operacion në panelin e administrimit. Rast duket të jetë e thjeshtë dhe mund të zgjidhen nga subjekti, duke harruar për JavaScript simbolit Konfirmo) ose PHP, por kënaqësi qëndron në atë se si ta bëni këtë në mënyrë që të mos shkaktojë, dhe madje se ishte një rezultat të vërtetë të mirë?
Unë do të përpiqet të paraqesë një zgjidhje mostër për problemin, duke supozuar se element që ne duam është shoqëruar me konfirmimin nga ana e përdoruesit, është një lidhje.

I parë Shembull i HTML dokumentit

Ne fillim me një skedë në të cilën ne të kryer testet tona ulëta ndaj: 

  <DOCTYPE html PUBLIKE "- / / 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> dialog konfirmim </ title>
 </ Head>
 <body>
 Tags:
 Lorem ipsum pikëllim ulem Amet, consectetur elita adipiscing.  Quisque ultrices Orci quis nisl.  Aliquam në vuajtje.  Sed quam consequat ac Leo.  Curabitur Fringilla sodales sem.  Praesent eleifend mauris ac ante thënien aliquet.  Sapien Etiam null, consequat Eget, consequat vitae, molestie id, Lectus.  Në HAC habitasse platea dictumst.  Aliquam feugiat Odio ac Lectus.  Suspendisse egestas nisl varius.  Morbi null.  Pellentesque aliquet interdum Felis.  Vestibulum luctus libero euismod.  Suspendisse sodales interdum Enimem.  Pellentesque Orcia.  Nulla Massa nunc, eleifend aka, eleifend varius, Cong Eget, Leo.  Vestibulum ante ipsum primis në faucibus Orci et ultrices posuere luctus cubilia Curae; <br/>
 Aliquet Kras, quis ligula rutrum accumsan, lorem lorem velit dignissim, fermentum dignissim quam ligula në ligula.  Interdum nulla thënien purus.  Aenean Odio.  Vestibulum pretium.  Phasellus Enimem Enimem, sempre aliquet, Tempus ac, rutrum gravida, libero.  Etiam neque Odio, blandit NEC, suscipit aka, scelerisque Pellentesque, Leo.  Në Metus id.  Vivamus rutrum.  Nulla NEC velit.  NISI UT purus, porta në, tincidunt ulem Amet, scelerisque pulvinar, sem.  Sed Risus adipiscing.  Në nëse nuk.  Augustin et al.  Phasellus urnë ullamcorper quis Tempus dapibus Lacus.  Est sed Eget  Etiam TELLUS erat, adipiscing NEC, sed placerat, ultricies një, Orci.  Kras ac Lectus.  Curabitur NEC lorem NIBH Mattis.  <a href="http://poslinski.net" class="confirm"> mecenat </ a> aliquet iaculis turpis.
 </ P>
 <div id="confirm"> </ div>
 </ Body>
 </ Html>

Tekst shembull gjenerator Lorem ipsum , shkoi në brendësi të një p. Pak para mbylljes tag trupit, e vënë div # konfirmuar, brenda të cilit nuk do të jetë një kod prej dritares tonë për të konfirmuar.

I dytë Shtresa e prezantimit

Le të përqëndrohet në dritare tonë. Në rastin tim, kod html i cili do të jetë përgjegjës për dritare të tërë, do të duket si më poshtë: 

  <div id="confirm">
 <div>
 <div>
 <h1> Jeni te sigurte qe doni te fshini kete artikull? </ h1>
 Tags: <button onClick="location.href='TUTAJ DO goditi përmbajtjen e href të LINKU'"> PO </ button> <button> NUK </ button> </ p>
 </ Div> <- Fundi # konfirmoj div div ->
 </ Div> <- Fundi # konfirmoj div ->
 </ Div> <- End # Konfirmo ->

Kodi brenda konfirmonte #, është e gjeneruar nga JavaScript. Por kjo është konsideruar vlerë arsyeja pse ajo duket se ashtu si dhe pse është në fund të kodit të faqes?

Le të fillojmë me arsyet për të përfshirë edhe kodin në fund. Në përcaktimin pozicionin: absolute, për # konfirmuar, pa z-indeks parametër, në rend të objekteve prej pozitës: absolute, ajo do të përputhen me porosinë në të cilën janë të gjeneruara nga të shfletuesit. Hartuar fundit, nuk do të jetë më shumë se një pirg e shtresave me pozicionin: absolute, kështu që nëse për shembull, do të ketë dimensione të njëjta, maskë shtresa, e cila u shfaq në kodin më herët.

Pse nuk konfirmon brenda, kemi vendosur dy herë një DIV? Për të sqaruar këtë pikë është, vetëm lexoni seksionin në css kodin tuaj që ju të zhvillohet brenda pjesën e kokës: 

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

 / * Konfirmo * /
 # Konfirmo {display: none; pozicionin: absolute; height: 100%; width: 100%; background: # 000; top: 0; majtë: 0;}
 # Konfirmo {height: shprehje (((&& window.Enumerable.max window.Enumerable) [document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight] Max ().: document.documentElement.scrollHeight) + "px '); width: shprehje (((&& window.Enumerable.max window.Enumerable) [document.body.scrollWidth, document.documentElement.scrollWidth, document.body.offsetWidth, dokument. . documentElement.clientHeight] max (): document.documentElement.scrollWidth) + "px");}
 # Konfirmo [ID] {pozicion: fiks;}
 # Konfirmo Pritja mbushje me: 10px; margin-top: 200px;} div
 # Div Konfirmo div {background: # 900c0c; width: 500px; margin: 0 auto; kufirit: 1px solid # KKK; del nga shtrati: fsheur;}
 # Konfirmo div div H1 Pritja font-Madhësia: 18px; color: # FFF;}
 # Konfirmo div div p Pritja Atributet 20px;}
 ->
 </ Style>

# Përcakton këtu konfirmuar sfond që do të "mbulojë" faqe të tërë. Linja e dytë, (një me një lartësi të çuditshme dhe gjerësi), është e nevojshme në rastin e Internet Explorer. # Konfirmo [ID] është e kuptueshme vetëm për shfletuesit modern, dhe ky ishte plani për sfondin e dritares sonë ishte madhësia e 100 për qind në 100% dhe do të vazhdojë gjatë gjithë kohës me vend (për IE është llogaritur në çdo rast të bazuar në gjerësi dhe lartësi të tanishëm të dritares).

Div parë është e nevojshme për qendër 2 dhe për të marrë një distancë nga dritarja e lartë në krye të diferencë. Div dytë tashmë ofron dritare tonë për të konfirmuar që mund të përqëndruara, pasi ajo është brenda një element bllok me gjerësi: 100% (vlera standard për një element me display: block - e cila është një div)

I tretë Koha për jQuery

Ai mbetet për ne për të reaguar ndaj klikimeve në lidhjen që shfaqet në fund të bllokut P, e cila vë lorem ipsum'a: 

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

Në rastin tonë, të gjitha lidhjet me të klasit të konfirmonte, do të reagojë ndaj shkrimit. Ju mund të aplikoni njohjen tonë për të gjitha lidhjet, për heqjen e një vlerë prej bazës së të dhënave.

Ajo kërkon JavaScript kodin që është vendosur në pjesën e poshtme të faqes: 

  src = "jquery.js" <script type="text/javascript"> </ script>
 <script type="text/javascript">
 $ (Dokument). Gati (function () {
 $ (". Konfirmo"). Kliko (function () {
 $ ("# Konfirmo")
 . Css ({errësirë: 0.95})
 . FadeIn ()
 . Html ('<div> <div> <h1> Redirect </ h1> <p <butonin onClick = \ "location.href = \'' + $ (këtë). Attr (" href ") +" \ "\"> Po </ button> <button> NUK </ button> </ p> </ div> </ div> ');
 rezultati false;
 });
 . $ ("# Konfirmo") Kliko (function () {$ (kjo) FadeOut ();.});
 });
 </ Script>

I pari load linjë jQuery.

Pastaj, dega kryesore prej $ tonë kodit (dokument). Gati, aktivizoni kodin tuaj, pas ngarkesave faqe.

Ne përgjigjemi për të klikuar në elementin me konfirmonte klasës, duke shkaktuar në këtë rast një seri e metodave mbi elementin me id = Konfirmo. Për të filluar, shtoni një transparencë (por ende një element është vendosur për të shfaqur: none), pastaj duke përdorur metodën FadeIn, jQuery seamlessly lëviz nga display: none në errësirë ​​me: 0.95 (ne rastin tone). Së fundi, brenda elementin e # konfirmoj, ngarkesës kodin html e divami dy tonë, e cila është vendosur brenda butonin header h1 dhe dy butonat. Si ju ndoshta e kanë vënë re një prej tyre, plus ata janë deklaruar onClick ngjarje, e cila do të reagojë ndaj një konfirmim pozitiv përdoruesit, przekierowywując atë në vendin që treguan lidhjen e klikuar.

Pse rezultati false në fund të këtij blloku të kodit? Për të shfletuesit, ne nuk redirect automatikisht, duke klikuar mbi link, funksioni ynë duhet të kthejë rreme, përndryshe ajo do të përcjellim dhe dritaret do të jetë konfirmuar temat.

Nëse ju klikoni kudo tjetër se në butonin e "PO", të përdorin FadeOut ngjarje (), blloku do të zhduket seamlessly me konfirmimin tonë, e cila realizon $ ("# konfirmoj"). Kliko (...).

Kodi tërë e shkruar duhet të shikoni diçka si kjo: 

  <DOCTYPE html PUBLIKE "- / / 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> dialog konfirmim </ title>
 <style type="text/css">
 <! -
 * {Margin: 0PX, mbushje: 0PX;}
 Trupi {margin: 10px;}
 p {width: 600px; margin: 0 auto; line-height: 25px;}

 / * Konfirmo * /
 # Konfirmo {display: none; pozicionin: absolute; height: 100%; width: 100%; background: # 000; top: 0; majtë: 0;}
 # Konfirmo {height: shprehje (((&& window.Enumerable.max window.Enumerable) [document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight] Max ().: document.documentElement.scrollHeight) + "px '); width: shprehje (((&& window.Enumerable.max window.Enumerable) [document.body.scrollWidth, document.documentElement.scrollWidth, document.body.offsetWidth, dokument. . documentElement.clientHeight] max (): document.documentElement.scrollWidth) + "px");}
 # Konfirmo [ID] {pozicion: fiks;}
 # Konfirmo Pritja mbushje me: 10px; margin-top: 200px;} div
 # Div Konfirmo div {background: # 900c0c; width: 500px; margin: 0 auto; kufirit: 1px solid # KKK; del nga shtrati: fsheur;}
 # Konfirmo div div H1 Pritja font-Madhësia: 18px; color: # FFF;}
 # Konfirmo div div p Pritja Atributet 20px;}
 ->
 </ Style>
 </ Head>
 <body>
 Tags:
 Lorem ipsum pikëllim ulem Amet, consectetur elita adipiscing.  Quisque ultrices Orci quis nisl.  Aliquam në vuajtje.  Sed quam consequat ac Leo.  Curabitur Fringilla sodales sem.  Praesent eleifend mauris ac ante thënien aliquet.  Sapien Etiam null, consequat Eget, consequat vitae, molestie id, Lectus.  Në HAC habitasse platea dictumst.  Aliquam feugiat Odio ac Lectus.  Suspendisse egestas nisl varius.  Morbi null.  Pellentesque aliquet interdum Felis.  Vestibulum luctus libero euismod.  Suspendisse sodales interdum Enimem.  Pellentesque Orcia.  Nulla Massa nunc, eleifend aka, eleifend varius, Cong Eget, Leo.  Vestibulum ante ipsum primis në faucibus Orci et ultrices posuere luctus cubilia Curae; <br/>
 Aliquet Kras, quis ligula rutrum accumsan, lorem lorem velit dignissim, fermentum dignissim quam ligula në ligula.  Interdum nulla thënien purus.  Aenean Odio.  Vestibulum pretium.  Phasellus Enimem Enimem, sempre aliquet, Tempus ac, rutrum gravida, libero.  Etiam neque Odio, blandit NEC, suscipit aka, scelerisque Pellentesque, Leo.  Në Metus id.  Vivamus rutrum.  Nulla NEC velit.  NISI UT purus, porta në, tincidunt ulem Amet, scelerisque pulvinar, sem.  Sed Risus adipiscing.  Në nëse nuk.  Augustin et al.  Phasellus urnë ullamcorper quis Tempus dapibus Lacus.  Est sed Eget  Etiam TELLUS erat, adipiscing NEC, sed placerat, ultricies një, Orci.  Kras ac Lectus.  Curabitur NEC lorem NIBH Mattis.  <a href="http://poslinski.net" class="confirm"> mecenat </ a> aliquet iaculis turpis.
 </ P>
 <div id="confirm"> </ div>
 src = "jquery.js" <script type="text/javascript"> </ script>
 <script type="text/javascript">
 $ (Dokument). Gati (function () {
 $ (". Konfirmo"). Kliko (function () {
 $ ("# Konfirmo")
 . Css ({errësirë: 0.95})
 . FadeIn ()
 . Html ('<div> <div> <h1> Redirect </ h1> <p <butonin onClick = \ "location.href = \'' + $ (këtë). Attr (" href ") +" \ "\"> Po </ button> <button> NUK </ button> </ p> </ div> </ div> ');
 rezultati false;
 });
 . $ ("# Konfirmo") Kliko (function () {$ (kjo) FadeOut ();.});
 });
 </ Script>
 </ Body>
 </ Html>

Përmbledhje

Duke punuar shembull, ju mund të shihni këtu .

Kjo zgjidhje model nuk do të kërkojë të gjitha mundësitë. Ne mund të zgjasë kodin në mënyrë që të ndikojë në formën e konfirmimit, ju pastaj do të dërgoj kontrollin formën, e cila gjithashtu mund të bëhen nga brenda jQuery. Ju gjithashtu mund të, në bazë të kodit të mësipërm për të krijuar një plugin për jQuery. Ndjehen të lirë për të diskutuar në komentet për këtë post.

Të jetë i shoqërueshëm, Share!

Related entries

Kategori: jQuery
Tags: , , , ,
«
»
Ju mund të ndiqni çdo përgjigjet për këtë term nëpërmjet RSS 2.0 feed . Ju gjithashtu mund të shkruani komentet tuaja , ose për të lidhur në këtë post në faqen tuaj.
    • Obraz CAPTCHY
    Refresh Image
    *

    Mbrojtja Spam nga wp-SpamFree