Fimmtudagur, 4. Desember, 2008
Engar athugasemdir

jQuery: Staðfesting glugga

Við áfram háð hagnýtum notar jQuery. Í dag ég þurfti að skrifa glugga staðfestir aðgerð í stjórn pallborð. Málið virðist vera einfalt og hægt er að leysa af efni, gleyma um JavaScript (aftur) eða PHP, en gaman liggur í því hvernig á að gera þetta svo sem ekki að valda, og jafnvel það var mjög viðeigandi vegna?
Ég mun reyna að kynna sýnishorn lausn á vandanum, miðað við að þáttur sem við viljum er fylgja staðfesting af notanda, er tengill.

Fyrsta Dæmi HTML File

Við byrjum með skrá sem við framkvæma viðurstyggilega prófanir okkar: 

  <DOCTYPE HTML ALMENNT! "- / / W3C / / DTD XHTML 1.0 / / 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 staðfesting valmynd </ title>
 </ Head>
 <body>
 <p>
 Lorem Ipsum dolor sitja amet, consectetur adipiscing Elite.  Quisque ultrices Orci nisl quis.  Aliquam á dolor.  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.  Í 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 í faucibus Orci et ultrices posuere luctus cubilia Curae; <br/>
 Aliquet Cras, quis ligula rutrum accumsan, lorem lorem velit dignissim, fermentum dignissim quam ligula á 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 aka, Pellentesque scelerisque, Leo.  Í Metus id.  Vivamus rutrum.  Nulla ótalin velit.  Nisi UT purus, Porta á, tincidunt sitja amet, scelerisque pulvinar, SEM.  Sed adipiscing Risus.  Í nisi.  Augustin et al.  Phasellus ullamcorper quis urn tempus dapibus Lacus.  Sed eget est  Etiam Tellus erat, adipiscing NEC, placerat sed, ultricies a, Orci.  Cras AC Lectus.  Curabitur ótalin lorem NIBH Mattis.  <a href="http://poslinski.net" class="confirm"> Maecenas </ a> aliquet iaculis turpis.
 </ P>
 <div id="confirm"> </ div>
 </ Body>
 </ Html>

Sýnishorn rafall Lorem Ipsum , fór inn á bls. Skömmu áður en líkami lokunarstaki, setja div # staðfesta, innan sem verður númer frá glugganum okkar til að staðfesta.

Í öðru lagi Kynningin lag

Við skulum leggja áherslu á glugga okkar. Í mínu tilfelli, html kóða sem vilja vera ábyrgur fyrir öllu glugga, mun líta út eins og hér segir: 

  <div id="confirm">
 <div>
 <div>
 <h1> Ertu viss um að þú viljir eyða þessu atriði? </ h1>
 <p> <button onClick="location.href='TUTAJ vilja högg the innihald af the href af LINKU'"> YES </ hnappinn> <button> EKKI </ hnappinn> </ p>
 </ Div> <-! Endir staðfesta # div div ->
 </ Div> <-! Endir # staðfesta div ->
 </ Div> <-! End # Staðfesta ->

The merkjamál inni í # staðfesta, er mynda með JavaScript. En það er þess virði að íhuga hvers vegna það lítur bara svona og af hverju er neðst á síðunni kóða?

Við skulum byrja með ástæður fyrir þar á meðal kóða í lokin. Við ákvörðun á stöðu: alger, fyrir # staðfesta, án þess að Z-vísitölu breytu, sem röð af hlutum frá stöðu: alger, mun það passa í hvaða röð þeir eru búnir með vafranum. Síðast saman, það verða fleiri en stafla af lögum með stöðu: alger, þannig að ef til dæmis, mun hafa sömu mál, hylja lag, sem birtust í kóða fyrr.

Hvers vegna að staðfesta að innan, sett við tvö sinnum div? Til að skýra þetta atriði er bara að lesa kafla í CSS kóðanum þínum sem þú setur inn í höfuð kafla: 

  <style type="text/css">
 <! -
 * {Margin: 0px, bólstrun: 0px;}
 líkaminn {margin: 10px;}
 p {breidd: 600px; margin: 0 farartæki; línu-hæð: 25px;}

 / * Staðfesta * /
 # Staðfesta {sýna: enginn; Staða: alger; hæð: 100%; breidd: 100%; bakgrunnur: # 000; efst: 0; vinstri: 0;}
 # Staðfesta {hæð: tjáning (((&& window.Enumerable window.Enumerable.max) [document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight] Max (). document.documentElement.scrollHeight) + 'px'); breidd: tjáning (((&& window.Enumerable window.Enumerable.max) [document.body.scrollWidth, document.documentElement.scrollWidth, document.body.offsetWidth, skjal. . documentElement.clientHeight] max (): document.documentElement.scrollWidth) + 'px');}
 # Staðfesta [ID] {stöðu: fast;}
 # Staðfesta div {padding: 10px; margin-toppur: 200px;}
 # Staðfesta div div {background: # 900c0c; breidd: 500px; margin: 0 farartæki; landamæri: 1px solid # CCC; flæða: falinn;}
 # Staðfesta div div h1 {font-size: 18px; lit: # FFF;}
 # Staðfesta div div p {padding út: 20px;}
 ->
 </ Style>

# Skilgreinir hér staðfesta bakgrunn sem mun "ná" allt síðu. Annað línu, (einn með undarlegum hæð og breidd), er nauðsynlegt að ræða Internet Explorer. # Staðfesta [ID] er skiljanlega aðeins að nútíma vöfrum, og þetta var planið að bakgrunni glugga okkar var á stærð við 100% til 100% og rennur um tíma með síðuna (fyrir IE er reiknuð í hverju tilviki miðað við núverandi breidd og hæð gluggans).

Fyrsta div er nauðsynlegt að miðju 2. og að taka fjarlægð frá efstu glugga á margin-top. Annað div veitir þegar gluggann okkar til að staðfesta að hægt er að miðju, eins og það er inni í blokk frumefni með breidd: 100% (staðall gildi fyrir frumefni með skjánum: blokk - sem er div)

Í þriðja lagi Tími fyrir jQuery

Það er enn fyrir okkur að bregðast við smelli á tengilinn sem birtist í lok blokk P, sem sett lorem ipsum'a: 

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

Í okkar tilviki, allir tenglar með bekknum staðfesta, mun bregðast við handrit. Þú getur sótt viðurkenningu okkar við alla tengla, til að fjarlægja verðmæti úr gagnagrunninum.

Það krefst JavaScript kóða sem er lögð á the botn af the blaðsíða: 

  src = "jquery.js" <script type="text/javascript"> </ script>
 <script type="text/javascript">
 $ (Document). Tilbúinn (virka () {
 $ (". Staðfesta"). Smelltu (virka () {
 $ ("# Staðfesta")
 . CSS ({ógagnsæi: 0,95})
 . FadeIn ()
 . Html ('<div> <div> <h1> Beina </ h1> <p <hnappinn onClick = \ "location.href = \'' + $ (þetta). Attr (" href ") +' \ "\"> Já </ hnappinn> <button> EKKI </ hnappinn> </ p> </ div> </ div> ');
 aftur ósatt;
 });
 . $ ("# Staðfesta") Smelltu (virka () {$ (this) FadeOut ();.});
 });
 </ Script>

Fyrsta lína hlaða jQuery.

Þá, kveikja á helstu útibú kr kóða okkar (skjal). Tilbúinn, númerið þitt, eftir síðu sækir.

Við bregðast við því að smella á frumefni með bekknum staðfesta, sem veldur í þessu tilfelli röð aðferða á frumefni með id = staðfesta. Til að byrja, bæta gagnsæi (en samt þáttur er stillt á að birta: ekkert), þá nota aðferð fadeIn, jQuery flytur óaðfinnanlega frá skjánum: enginn ógagnsæi út: 0,95 (í okkar tilviki). Að lokum, innan þáttur # staðfesta, hlaða html kóða tveimur divami okkar, sem er settur inni í haus h1 hnappinn og tveggja hnappa. Eins og þú sennilega hefur tekið einn af þeim, auk þeir eru lýst onClick atburður, sem verður að bregðast við á jákvæðan notanda staðfestingu, przekierowywując hann til þess staðar sem sýndi smellt tengil.

Hvers vegna aftur ósatt í lok þessa kóðanum? Til vafranum, við beina ekki sjálfkrafa með því að smella á tengilinn, virka okkar verður aftur rangt, annars mun beina og gluggar verða að staðfesta að þræði.

Ef þú smellir einhvers staðar annars staðar en í hnappinn "YES", nota atburði FadeOut (), að blokk mun hverfa óaðfinnanlega með staðfestingu okkar, sem áttar sig á $ ("# staðfesta"). Smelltu (...).

Allt skrifað kóða ætti að líta eitthvað eins og this: 

  <DOCTYPE HTML ALMENNT! "- / / W3C / / DTD XHTML 1.0 / / 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 staðfesting valmynd </ title>
 <style type="text/css">
 <! -
 * {Margin: 0px, bólstrun: 0px;}
 líkaminn {margin: 10px;}
 p {breidd: 600px; margin: 0 farartæki; línu-hæð: 25px;}

 / * Staðfesta * /
 # Staðfesta {sýna: enginn; Staða: alger; hæð: 100%; breidd: 100%; bakgrunnur: # 000; efst: 0; vinstri: 0;}
 # Staðfesta {hæð: tjáning (((&& window.Enumerable window.Enumerable.max) [document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight] Max (). document.documentElement.scrollHeight) + 'px'); breidd: tjáning (((&& window.Enumerable window.Enumerable.max) [document.body.scrollWidth, document.documentElement.scrollWidth, document.body.offsetWidth, skjal. . documentElement.clientHeight] max (): document.documentElement.scrollWidth) + 'px');}
 # Staðfesta [ID] {stöðu: fast;}
 # Staðfesta div {padding: 10px; margin-toppur: 200px;}
 # Staðfesta div div {background: # 900c0c; breidd: 500px; margin: 0 farartæki; landamæri: 1px solid # CCC; flæða: falinn;}
 # Staðfesta div div h1 {font-size: 18px; lit: # FFF;}
 # Staðfesta div div p {padding út: 20px;}
 ->
 </ Style>
 </ Head>
 <body>
 <p>
 Lorem Ipsum dolor sitja amet, consectetur adipiscing Elite.  Quisque ultrices Orci nisl quis.  Aliquam á dolor.  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.  Í 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 í faucibus Orci et ultrices posuere luctus cubilia Curae; <br/>
 Aliquet Cras, quis ligula rutrum accumsan, lorem lorem velit dignissim, fermentum dignissim quam ligula á 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 aka, Pellentesque scelerisque, Leo.  Í Metus id.  Vivamus rutrum.  Nulla ótalin velit.  Nisi UT purus, Porta á, tincidunt sitja amet, scelerisque pulvinar, SEM.  Sed adipiscing Risus.  Í nisi.  Augustin et al.  Phasellus ullamcorper quis urn tempus dapibus Lacus.  Sed eget est  Etiam Tellus erat, adipiscing NEC, placerat sed, ultricies a, Orci.  Cras AC Lectus.  Curabitur ótalin 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). Tilbúinn (virka () {
 $ (". Staðfesta"). Smelltu (virka () {
 $ ("# Staðfesta")
 . CSS ({ógagnsæi: 0,95})
 . FadeIn ()
 . Html ('<div> <div> <h1> Beina </ h1> <p <hnappinn onClick = \ "location.href = \'' + $ (þetta). Attr (" href ") +' \ "\"> Já </ hnappinn> <button> EKKI </ hnappinn> </ p> </ div> </ div> ');
 aftur ósatt;
 });
 . $ ("# Staðfesta") Smelltu (virka () {$ (this) FadeOut ();.});
 });
 </ Script>
 </ Body>
 </ Html>

Yfirlit

Vinna dæmis, getur þú séð hér .

Þetta sýni lausn þarf ekki alla möguleikana. Við getum ná kóðann þannig að hafa áhrif á staðfestingu form, myndir þú þá senda mynd stjórn, sem einnig er hægt að gera innan jQuery. Þú getur einnig, á grundvelli framangreindra kóða til að búa til plugin fyrir jQuery. Feel frjáls til að ræða í athugasemdum við þessa færslu.

Vertu félagslyndur, Deila!

Tengdar færslur

Flokkar: jQuery
Tags: , , , ,
«
»
Þú geta fylgja allir svar til this innganga í gegnum the fæða RSS 2.0 . Þú getur líka skrifað eigin athugasemdum , eða til að tengja við þessa færslu á síðu þinni.
    • Obraz CAPTCHY
    Uppfæra mynd
    *

    Spam Verndun með WP-SpamFree