Torsdag 4 december, 2008
Inga kommentarer

jQuery: Ett fönster för bekräftelse

Vi är fortfarande föremål för praktiska användningsområden jQuery. Idag har jag behövde skriva ett fönster som bekräftar en operation i förvaltningen panelen. Fallet verkar vara enkel och kan lösas genom ämnet, glömma JavaScript (Bekräfta) eller PHP, men det roliga ligger i hur man gör detta för att inte orsaka och även det var en riktigt anständig resultat?
Jag kommer att försöka presentera ett prov lösning på problemet, förutsatt att det element som vi vill ha åtföljs av bekräftelse från användaren, är en länk.

Först Exempel på HTML-fil

Vi börjar med en fil som vi utför våra vidriga tester: 

  <DOCTYPE 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" />
 <title> bekräftelseruta </ ​​title>
 </ Head>
 <body>
 <p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Quisque ultrices Orci nisl QUIS.  Aliquam vid dolor.  Sed QUAM consequat AC Leo.  Curabitur Fringilla sodales sem.  Praesent eleifend mauris ac förhand aliquet dictum.  Sapiens Etiam noll, consequat EGET, consequat vitae molestie id, Lectus.  I HAC habitasse platea dictumst.  Aliquam feugiat odio ac Lectus.  Suspendisse egestas nisl varius.  Morbi noll.  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 förhand ipsum hand är knuten i faucibus Orci et ultrices posuere luctus cubilia Curae; <br/>
 Aliquet Cras, QUIS ligula rutrum accumsan, lorem lorem velit dignissim, fermentum dignissim QUAM ligula vid 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.  I Metus id.  Vivamus rutrum.  Nulla NEC velit.  OM INTE UT Purus, porta på, tincidunt sit amet, scelerisque pulvinar, sem.  Sed adipiscing Risus.  I OM INTE.  Augustin et al.  Phasellus ullamcorper QUIS urna tempus dapibus Lacus.  Sed EGET est  Etiam Tellus erat, adipiscing NEC, placerat sed, ultricies a, Orci.  Cras ac Lectus.  Curabitur NEC Lorem NIBH Mattis.  <a href="http://poslinski.net" class="confirm"> Hedersdoktorn </ a> aliquet iaculis turpis.
 </ P>
 <div id="confirm"> </ div>
 </ Body>
 </ Html>

Exempel på text generator Lorem ipsum , gick in p. Strax före stängning body-taggen lade div # bekräfta, inom vilken det kommer att finnas en kod från vårt fönster för att bekräfta.

Andra Presentationen lagret

Låt oss fokusera på vårt fönster. I mitt fall, HTML-koden som kommer att ansvara för hela fönstret, ser ut som följer: 

  <div id="confirm">
 <div>
 <div>
 <h1> Är du säker på att du vill ta bort detta objekt? </ h1>
 <p> <button onClick="location.href='TUTAJ kommer att drabba innehållet i HREF för LINKU'"> Ja </ knappen> <button> inte </ knappen> </ p>
 </ Div> <- End bekräfta # div div ->
 </ Div> <- End # bekräftar div ->
 </ Div> <- End # Bekräfta ->

Koden inne i # Bekräfta, genereras av JavaScript. Men det är värt att fundera över varför det ser ut precis som det och varför är längst ner på sidan koden?

Låt oss börja med skälen för att koden på slutet. Vid bestämning av position: absolute, för # bekräfta utan att z-index parameter, sekvensen av föremål från position: absolut, kommer det att matcha den ordning i vilken de genereras av webbläsaren. Senast kompilerad, kommer det att finnas mer än en bunt lager med position: absolute, så om till exempel, kommer att ha samma dimensioner, maskera lagret, som publicerades i koden tidigare.

Varför bekräftar insidan placerade vi två gånger div? För att klargöra denna punkt är, bara läsa avsnittet i din css kod som du placerar i huvudet avsnitt: 

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

 / * CONFIRM * /
 # Bekräfta {display: none; position: absolute, höjd: 100%, bredd: 100%; Bakgrund: # 000; top: 0; left: 0;}
 # Bekräfta {height: expression (((&& window.Enumerable window.Enumerable.max) [document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight] Max ().: document.documentElement.scrollHeight) + "px"), bredd: uttrycket (((&& window.Enumerable window.Enumerable.max) [document.body.scrollWidth, document.documentElement.scrollWidth, document.body.offsetWidth, dokument. . documentElement.clientHeight] max (): document.documentElement.scrollWidth) + "px");}
 # Bekräfta [ID] {position: fast;}
 # Bekräfta div {padding: 10px; margin-top: 200px;}
 # Bekräfta div div {background: # 900c0c, bredd: 500px; margin: 0 auto; kant: 1px solid # CCC, overflow: hidden;}
 # Bekräfta h1 div div {font-size: 18px; color: # FFF;}
 # Bekräfta div div p {padding: 20px;}
 ->
 </ Style>

# Definierar här bekräftar bakgrunden som kommer att "omfatta" hela sidan. Den andra raden (den med en märklig höjd och bredd), är det nödvändigt i fallet med Internet Explorer. # Bekräfta [ID] är begripligt endast moderna webbläsare, och detta var planen att bakgrunden av vårt fönster var storleken på 100% till 100% och kör hela tiden med platsen (för IE beräknas i varje fall baserat på den aktuella bredden och höjden av fönstret).

Den första div behövs för att centrera den 2: a och ta avstånd från det övre fönstret på marginalen-top. Den andra div utgör redan vårt fönster för att bekräfta att kan centreras, eftersom det är inne ett block element med bredd: 100% (standard värde för ett element med display: block - vilket är en div)

Tredje Tid för jQuery

Det återstår för oss att reagera klickar på länken som visas i slutet av blocket P, som satte lorem ipsum'a: 

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

I vårt fall, alla förbindelser med klassen bekräftar, kommer att reagera på skriptet. Du kan tillämpa vår bekräftelse till alla länkar, för att ta bort ett värde från databasen.

Det kräver JavaScript-kod som är placerad på botten av sidan: 

  src = "jquery.js" <script type="text/javascript"> </ script>
 <script type="text/javascript">
 $ (Document). Ready (function () {
 $ (". Bekräfta"). Klicka på (function () {
 $ ("# Bekräfta")
 . CSS ({opacitet: 0,95})
 . FadeIn ()
 . Html ("<div> <h1> Redirect </ h1> <p <knappen onClick = \" location.href = \'' + $ (this). Attr ("href") + '\ '\ "> Ja </ knappen> <button> inte </ knappen> </ p> </ div> </ div>');
 return false;
 });
 . $ ("# Bekräfta") Klicka på (function () {$ (this) FadeOut ();.});
 });
 </ Script>

Den första raden belastningen jQuery.

Sedan den viktigaste grenen av vår kod $ (document). Ready, aktivera din kod efter en sida laddas.

Vi svarar att klicka på elementet med klassen bekräftar, vilket i detta fall en rad metoder på elementet med id = Bekräfta. Till att börja med lägga till en öppenhet (men fortfarande en del är inställd på att display: none), sedan använda metoden fadeIn flyttar jQuery sömlöst från display: none för att opacitet: 0,95 (i vårt fall). Slutligen, inom den del av # bekräftar ladda HTML-kod våra två divami, som är placerad inuti h1 huvudet knappen och två knappar. Som ni säkert har märkt en av dem, plus att de deklareras onClick händelse som kommer att reagera på en positiv användarupplevelse bekräftelse przekierowywując honom till den plats som visade klickade länken.

Varför returnera false i slutet av detta block av kod? Till webbläsaren vi inte omdirigera automatiskt genom att klicka på länken, måste vår funktion returnera false, annars kommer att omdirigera och fönster kommer att bekräfta gängorna.

Om du klickar någon annanstans än i knappen "JA", använd vid FadeOut (), kommer blocket att försvinna sömlöst med vår bekräftelse, som realiserar $ ("# bekräfta"). Klicka på (...).

Hela skriftliga koden bör se ut ungefär så här: 

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

 / * CONFIRM * /
 # Bekräfta {display: none; position: absolute, höjd: 100%, bredd: 100%; Bakgrund: # 000; top: 0; left: 0;}
 # Bekräfta {height: expression (((&& window.Enumerable window.Enumerable.max) [document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight] Max ().: document.documentElement.scrollHeight) + "px"), bredd: uttrycket (((&& window.Enumerable window.Enumerable.max) [document.body.scrollWidth, document.documentElement.scrollWidth, document.body.offsetWidth, dokument. . documentElement.clientHeight] max (): document.documentElement.scrollWidth) + "px");}
 # Bekräfta [ID] {position: fast;}
 # Bekräfta div {padding: 10px; margin-top: 200px;}
 # Bekräfta div div {background: # 900c0c, bredd: 500px; margin: 0 auto; kant: 1px solid # CCC, overflow: hidden;}
 # Bekräfta h1 div div {font-size: 18px; color: # FFF;}
 # Bekräfta div div p {padding: 20px;}
 ->
 </ Style>
 </ Head>
 <body>
 <p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Quisque ultrices Orci nisl QUIS.  Aliquam vid dolor.  Sed QUAM consequat AC Leo.  Curabitur Fringilla sodales sem.  Praesent eleifend mauris ac förhand aliquet dictum.  Sapiens Etiam noll, consequat EGET, consequat vitae molestie id, Lectus.  I HAC habitasse platea dictumst.  Aliquam feugiat odio ac Lectus.  Suspendisse egestas nisl varius.  Morbi noll.  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 förhand ipsum hand är knuten i faucibus Orci et ultrices posuere luctus cubilia Curae; <br/>
 Aliquet Cras, QUIS ligula rutrum accumsan, lorem lorem velit dignissim, fermentum dignissim QUAM ligula vid 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.  I Metus id.  Vivamus rutrum.  Nulla NEC velit.  OM INTE UT Purus, porta på, tincidunt sit amet, scelerisque pulvinar, sem.  Sed adipiscing Risus.  I OM INTE.  Augustin et al.  Phasellus ullamcorper QUIS urna tempus dapibus Lacus.  Sed EGET est  Etiam Tellus erat, adipiscing NEC, placerat sed, ultricies a, Orci.  Cras ac Lectus.  Curabitur NEC Lorem NIBH Mattis.  <a href="http://poslinski.net" class="confirm"> Hedersdoktorn </ a> aliquet iaculis turpis.
 </ P>
 <div id="confirm"> </ div>
 src = "jquery.js" <script type="text/javascript"> </ script>
 <script type="text/javascript">
 $ (Document). Ready (function () {
 $ (". Bekräfta"). Klicka på (function () {
 $ ("# Bekräfta")
 . CSS ({opacitet: 0,95})
 . FadeIn ()
 . Html ("<div> <h1> Redirect </ h1> <p <knappen onClick = \" location.href = \'' + $ (this). Attr ("href") + '\ '\ "> Ja </ knappen> <button> inte </ knappen> </ p> </ div> </ div>');
 return false;
 });
 . $ ("# Bekräfta") Klicka på (function () {$ (this) FadeOut ();.});
 });
 </ Script>
 </ Body>
 </ Html>

Sammanfattning

Fungerande exempel kan du se här .

Denna provlösning kräver inte alla möjligheter. Vi kan förlänga koden så att det påverkar bekräftelsen form, skulle du skicka sedan formuläret kontroll som också kan göras inifrån jQuery. Du kan också, på grundval av ovanstående kod för att skapa en plugin för jQuery. Känn dig fri att diskutera i kommentarerna till detta inlägg.

Vara social, dela!

Relaterade poster

Kategorier: jquery
Taggar: , , , ,
«
»
Du kan följa svar på detta inlägg via fodret RSS 2,0 . Du kan också skriva dina egna kommentarer , eller att länka till detta inlägg på din sida.
    • Obraz CAPTCHY
    Uppdatera bild
    *

    Spam Skydd av WP-SpamFree