Thursday, December 4th, 2008
Tiada komen

jQuery: Tetingkap pengesahan

Kami kekal subjek penggunaan jQuery praktikal. Hari ini saya perlu menulis tetingkap mengesahkan operasi di dalam panel pentadbiran. Kes itu seolah-olah menjadi mudah dan boleh diselesaikan dengan subjek ini, lupa mengenai JavaScript (Confirm) atau PHP, tetapi keseronokan terletak pada bagaimana untuk lakukan ini supaya tidak menyebabkan, dan juga yang ini adalah hasil yang benar-benar layak?
Saya akan cuba untuk membentangkan penyelesaian sampel kepada masalah itu, menganggap bahawa elemen yang kita mahu disertai oleh pengesahan oleh pengguna, adalah link.

Pertama Sampel HTML File

Kami bermula dengan fail yang kita menjalankan ujian yang jahat kami: 

  <DOCTYPE html AWAM! "- / / 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">
 <kepala>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title> pengesahan dialog </ title>
 </ Ketua>
 <body>
 <p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Quisque ultrices Orci nisl quis.  Aliquam di dolor.  Yang sed quam consequat au leo.  Curabitur memulikan sodales sem.  Praesent eleifend mauris ac ante aliquet pepatah.  Sapien Etiam null, consequat eget, consequat vitae, molestie id, Lectus.  Di HAC habitasse platea dictumst.  Aliquam feugiat Lectus ac odio.  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 dalam faucibus Orci et ultrices posuere luctus cubilia Curae; <br/>
 Aliquet Cras, quis ligula rutrum accumsan, Lorem Lorem velit dignissim, fermentum dignissim quam ligula di ligula.  Nulla interdum purus pepatah.  Aenean odio.  Vestibulum pretium.  Phasellus Enimem Enimem, semper aliquet., Tempus ac, rutrum gravida, libero.  Odio neque etiam, blandit NEC, suscipit aka, scelerisque Pellentesque, leo.  Pada Metus id.  Vivamus rutrum.  Nulla ttm velit.  Nisi ut purus, porta pada, tincidunt sit amet, scelerisque pulvinar, sem.  Sed adipiscing Risus.  Di nisi.  Augustin et al.  Phasellus ullamcorper quis kendi tempus dapibus lacus.  Sed est eget  Etiam tellus erat, adipiscing NEC, placerat sed, ultricies 1 Orci,.  Cras ac Lectus.  Curabitur ttm Lorem NIBH Mattis.  | <a href="http://poslinski.net" class="confirm"> sponsor </ a> aliquet iaculis turpis.
 </ P>
 <div id="confirm"> </ div>
 </ Badan>
 </ Html>

Contoh Teks penjana Gunung Mayon , masuk ke dalam p 1. Sejurus sebelum tag penutup badan, letakkan div # mengesahkan, di mana akan ada kod dari tingkap kami untuk mengesahkan.

Kedua Lapisan persembahan

Marilah kita memberi tumpuan kepada tingkap kami. Dalam kes saya, kod html yang akan bertanggungjawab untuk keseluruhan tetingkap, akan kelihatan seperti berikut: 

  <div id="confirm">
 <div>
 <div>
 <h1> Adakah anda pasti anda mahu memadam item ini? </ h1>
 <p> <button onClick="location.href='TUTAJ AKAN memukul kandungan href LINKU'"> YA </ butang> <button> TIDAK </ butang> </ p>
 </ Div> <- Akhir # mengesahkan div div>
 </ Div> <! Akhir # mengesahkan div>
 </ Div> <- Akhir # Sahkan ->

Kod didalam mengesahkan #, dijana oleh JavaScript. Tetapi ia adalah bernilai dengan mengambil kira mengapa ia kelihatan seperti itu dan mengapa di bawah kod halaman?

Mari kita mulakan dengan sebab-sebab termasuk kod pada akhir. Dalam menentukan kedudukan mutlak, # mengesahkan, tanpa parameter z-index, urutan objek dari kedudukan: mutlak, ia akan sepadan dengan perintah yang di mana ia dihasilkan oleh pelayar. Lepas disusun, akan terdapat lebih daripada tindanan lapisan dengan kedudukan: mutlak, oleh itu jika misalnya, akan mempunyai dimensi yang sama, menutup lapisan, yang muncul dalam kod awal.

Mengapa mengesahkan dalam, kita meletakkan dua kali div? Untuk menjelaskan perkara ini, hanya membaca bahagian dalam kod css anda yang anda meletakkan di dalam bahagian kepala: 

  <style type="text/css">
 <! -
 * {Margin: 0px, padding: 0px;}
 badan {margin: 10px;}
 p {width: 600px; margin: 0 auto; talian ketinggian: 25px;}

 / * MENGESAHKAN * /
 # Sahkan {paparan: none; kedudukan: mutlak; height: 100%; width: 100%; background: # 000; top: 0; kiri: 0;}
 # Sahkan {ketinggian: ungkapan (((&& window.Enumerable yang window.Enumerable.max) [document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight] Max (): document.documentElement.scrollHeight) + 'px'); lebar: expresi (((&& window.Enumerable window.Enumerable.max) [document.body.scrollWidth, document.documentElement.scrollWidth, document.body.offsetWidth, dokumen. documentElement.clientHeight] max (): document.documentElement.scrollWidth) + 'px');}
 # Sahkan [id] {jawatan: tetap;}
 # Sahkan div {padding: 10px; margin-top: 200px;}
 Div # Sahkan div {background: # 900c0c; width: 500px; margin: 0 auto; sempadan: 1px solid # CCC; overflow: hidden;}
 # Sahkan div div h1 {font-size: 18px; warna: # FFF;}
 # Sahkan p div div {padding: 20px;}
 ->
 </ Style>

# Mentakrifkan di sini mengesahkan latar belakang yang akan "menutup" seluruh halaman. Yang selaras 2, (yang dengan ketinggian 1 pelik dan lebar), dalam kes Internet Explorer. # Sahkan [id] adalah difahami untuk pelayar moden sahaja, dan ini adalah yang pelan latar belakang tetingkap kami telah saiz% 100 untuk 100% dan berjalan sepanjang masa laman (untuk IE dikira dalam setiap kes berdasarkan lebar semasa dan ketinggian tingkap).

Yang span pertama adalah perlu untuk pusat 2 dan mengambil jarak dari tingkap atas pada bahagian atas margin. Div 2 sudah menyediakan tetingkap kami untuk mengesahkan yang boleh berpusat, kerana ia adalah di dalam elemen blok dengan lebar: 100% (nilai piawai bagi satu elemen dengan paparan: blok - yang merupakan div)

Ketiga Masa untuk jQuery

Ia kekal bagi kita untuk bertindak balas kepada klik pada link yang muncul pada akhir blok P, yang meletakkan Lorem ipsum'a: 

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

Dalam kes kami, semua hubungan dengan kelas mengesahkan, akan bertindak balas kepada tulisan. Anda boleh memohon pengakuan kita kepada semua link, bagi menghapuskan nilai dari pangkalan data.

Ia memerlukan kod JavaScript yang diletakkan di bahagian bawah halaman: 

  src = "jquery.js" <script type="text/javascript"> </ script>
 <script type="text/javascript">
 $ (Dokumen). Sedia (function () {
 $ ("Sahkan"). Klik (function () {
 $ ("# Confirm")
 Css ({opacity: 0,95})
 . FadeIn ()
 Html (<div> <div> <h1> Redirect </ h1> <p <butang onClick = \ "location.href = \" + $ (ini). Attr ("title") + '\ '\ "> Ya </ butang> <button> TIDAK </ butang> </ p> </ div> </ div>');
 kembali palsu;
 });
 $ ("# Confirm") Klik (function () {$ (ini) FadeOut ();});
 });
 </ Skrip>

JQuery beban baris pertama.

Kemudian, cawangan utama $ kod kami (dokumen). Sedia, mengaktifkan kod anda, selepas beban halaman.

Kita bertindak balas dengan klik pada unsur dengan mengesahkan kelas, menyebabkan dalam kes ini satu siri kaedah pada unsur dengan id = mengesahkan. Untuk memulakan, menambah ketelusan (tetapi masih satu elemen untuk memaparkan: tiada), kemudian menggunakan fadeIn kaedah, jQuery lancar bergerak dari paparan: tiada kelegapan: 0,95 (dalam kes kami). Akhirnya, di dalam elemen # mengesahkan, memuatkan kod html divami dua, yang diletakkan di dalam butang header h1 dan dua butang. Seperti yang anda mungkin telah menyedari bahawa salah seorang daripada mereka, ditambah dengan mereka diisytiharkan acara onClick, yang akan bertindak balas kepada pengesahan pengguna yang positif, przekierowywując dia ke tempat yang menunjukkan link diklik.

Mengapa kembali pada akhir blok ini kod yang palsu? Kepada pelayar, kita tidak redirect secara automatik, dengan mengklik pada pautan, fungsi kita mesti kembali palsu, jika tidak ia akan mengarahkan dan tingkap akan mengesahkan benang.

Jika anda klik mana-mana lain daripada di butang "YA", menggunakan FadeOut acara (), blok akan hilang dengan lancar dengan pengesahan, kami yang menyedari $ ("# mengesahkan"). Klik (...).

Kod bertulis seluruh harus kelihatan seperti ini: 

  <DOCTYPE html AWAM! "- / / 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">
 <kepala>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title> pengesahan dialog </ title>
 <style type="text/css">
 <! -
 * {Margin: 0px, padding: 0px;}
 badan {margin: 10px;}
 p {width: 600px; margin: 0 auto; talian ketinggian: 25px;}

 / * MENGESAHKAN * /
 # Sahkan {paparan: none; kedudukan: mutlak; height: 100%; width: 100%; background: # 000; top: 0; kiri: 0;}
 # Sahkan {ketinggian: ungkapan (((&& window.Enumerable yang window.Enumerable.max) [document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight] Max (): document.documentElement.scrollHeight) + 'px'); lebar: expresi (((&& window.Enumerable window.Enumerable.max) [document.body.scrollWidth, document.documentElement.scrollWidth, document.body.offsetWidth, dokumen. documentElement.clientHeight] max (): document.documentElement.scrollWidth) + 'px');}
 # Sahkan [id] {jawatan: tetap;}
 # Sahkan div {padding: 10px; margin-top: 200px;}
 Div # Sahkan div {background: # 900c0c; width: 500px; margin: 0 auto; sempadan: 1px solid # CCC; overflow: hidden;}
 # Sahkan div div h1 {font-size: 18px; warna: # FFF;}
 # Sahkan p div div {padding: 20px;}
 ->
 </ Style>
 </ Ketua>
 <body>
 <p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Quisque ultrices Orci nisl quis.  Aliquam di dolor.  Yang sed quam consequat au leo.  Curabitur memulikan sodales sem.  Praesent eleifend mauris ac ante aliquet pepatah.  Sapien Etiam null, consequat eget, consequat vitae, molestie id, Lectus.  Di HAC habitasse platea dictumst.  Aliquam feugiat Lectus ac odio.  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 dalam faucibus Orci et ultrices posuere luctus cubilia Curae; <br/>
 Aliquet Cras, quis ligula rutrum accumsan, Lorem Lorem velit dignissim, fermentum dignissim quam ligula di ligula.  Nulla interdum purus pepatah.  Aenean odio.  Vestibulum pretium.  Phasellus Enimem Enimem, semper aliquet., Tempus ac, rutrum gravida, libero.  Odio neque etiam, blandit NEC, suscipit aka, scelerisque Pellentesque, leo.  Pada Metus id.  Vivamus rutrum.  Nulla ttm velit.  Nisi ut purus, porta pada, tincidunt sit amet, scelerisque pulvinar, sem.  Sed adipiscing Risus.  Di nisi.  Augustin et al.  Phasellus ullamcorper quis kendi tempus dapibus lacus.  Sed est eget  Etiam tellus erat, adipiscing NEC, placerat sed, ultricies 1 Orci,.  Cras ac Lectus.  Curabitur ttm Lorem NIBH Mattis.  | <a href="http://poslinski.net" class="confirm"> sponsor </ a> aliquet iaculis turpis.
 </ P>
 <div id="confirm"> </ div>
 src = "jquery.js" <script type="text/javascript"> </ script>
 <script type="text/javascript">
 $ (Dokumen). Sedia (function () {
 $ ("Sahkan"). Klik (function () {
 $ ("# Confirm")
 Css ({opacity: 0,95})
 . FadeIn ()
 Html (<div> <div> <h1> Redirect </ h1> <p <butang onClick = \ "location.href = \" + $ (ini). Attr ("title") + '\ '\ "> Ya </ butang> <button> TIDAK </ butang> </ p> </ div> </ div>');
 kembali palsu;
 });
 $ ("# Confirm") Klik (function () {$ (ini) FadeOut ();});
 });
 </ Skrip>
 </ Badan>
 </ Html>

Ringkasan

Kerja Sebagai contoh, anda boleh lihat di sini .

Larutan sampel ini tidak memerlukan semua kemungkinan. Kita boleh melanjutkan kod sehingga menyentuh borang pengesahan, anda akan menghantar borang kawalan, yang juga boleh dibuat dari dalam jQuery. Anda boleh juga, atas dasar kod di atas untuk mencipta plugin untuk jQuery. Anda bebas untuk membincangkan dalam komen kepada pos ini.

Jadi pandai bergaul, Saham!

Entri berkaitan

Kategori: jquery
Tags: , , , ,
«
»
Anda boleh mengikuti sebarang respons bagi entri ini melalui RSS 2.0 . Anda juga boleh menulis komen anda sendiri , atau untuk menghubungkan ke jawatan ini pada halaman anda.
    • Obraz CAPTCHY
    Refresh Imej
    *

    Perlindungan spam oleh WP SpamFree