Kamis, 4 Desember, 2008
Tidak ada komentar

jQuery: Sebuah jendela konfirmasi

Kami tetap subyek jQuery manfaat praktis. Hari ini aku harus menulis sebuah jendela yang menyatakan operasi di panel administrasi. Kasus ini tampaknya sederhana dan dapat diselesaikan oleh subjek, melupakan JavaScript (Konfirmasi) atau PHP, tapi menyenangkan terletak pada bagaimana melakukan ini agar tidak menyebabkan, dan bahkan itu adalah hasil benar-benar layak?
Saya akan mencoba untuk menyajikan solusi sampel untuk masalah ini, dengan asumsi bahwa elemen yang kita inginkan disertai dengan konfirmasi oleh pengguna, adalah link.

Pertama Contoh HTML file

Kita mulai dengan file di mana kita melakukan tes keji kami: 

  <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 content="text/html; http-equiv="Content-Type" charset=utf-8" />
 <title> dialog konfirmasi </ title>
 </ Kepala>
 <body>
 <p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Quisque ultrices Orci nisl Quis.  Aliquam pada kedukaan.  Sed QUAM consequat ac leo.  Curabitur Fringilla sodales sem.  Praesent eleifend mauris ac ante diktum aliquet.  Sapien Etiam null, consequat eget, consequat vitae, molestie id, lectus.  Dalam 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 Dimittis, eleifend alias, eleifend varius, Cong eget, leo.  Vestibulum ante ipsum primis di 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.  Interdum diktum nulla Purus.  Aenean Odio.  Vestibulum Pretium.  Phasellus Enimem Enimem, sempre aliquet, tempus ac, rutrum gravida, libero.  Etiam neque Odio, blandit NEC, suscipit alias, scelerisque Pellentesque, leo.  Dalam Metus id.  Vivamus rutrum.  Nulla nec velit.  Jikalau tidak ut Purus, porta di, tincidunt sit amet, scelerisque pulvinar, sem.  Sed Risus adipiscing.  Dalam jikalau tidak.  Augustin dkk.  Phasellus ullamcorper Quis guci tempus dapibus Lacus.  Sed eget est  Etiam tellus erat, adipiscing NEC, placerat sed, ultricies sebuah, 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>
 </ Tubuh>
 </ Html>

Contoh teks pembangkit Lorem ipsum , masuk ke dalam p. Tak lama sebelum tag penutup tubuh, menempatkan div # konfirmasi, di mana akan ada kode dari jendela kami untuk konfirmasi.

Kedua Lapisan presentasi

Mari kita fokus pada jendela kami. Dalam kasus saya, kode html yang akan bertanggung jawab untuk seluruh jendela, akan terlihat sebagai berikut: 

  <div id="confirm">
 <div>
 <div>
 <h1> Anda yakin ingin menghapus item ini? </ h1>
 <p> <button onClick="location.href='TUTAJ AKAN memukul isi dari HREF dari LINKU'"> YA </ tombol> <button> TIDAK </ tombol> </ p>
 </ Div> <- End # mengkonfirmasi div div ->
 </ Div> <- End # mengkonfirmasi div ->
 </ Div> <- End # Konfirmasi ->

Kode di dalam mengkonfirmasi #, dihasilkan oleh JavaScript. Tetapi perlu mempertimbangkan mengapa terlihat hanya seperti itu dan mengapa di bagian bawah kode halaman?

Mari kita mulai dengan alasan termasuk kode di akhir. Dalam menentukan posisi: absolut, untuk # konfirmasi, tanpa z-indeks parameter, urutan objek dari posisi: absolut, itu akan cocok dengan urutan yang dihasilkan oleh browser. Terakhir dikompilasi, akan ada lebih dari setumpuk lapisan dengan posisi: absolut, jadi jika misalnya, akan memiliki dimensi yang sama, menutupi lapisan, yang muncul dalam kode sebelumnya.

Mengapa mengkonfirmasi dalam, kita menempatkan dua kali div? Untuk memperjelas hal ini, hanya membaca bagian dalam kode css Anda bahwa Anda menempatkan di dalam bagian kepala: 

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

 / * KONFIRMASI * /
 # Konfirmasikan {display: none; position: absolute; height: 100%; lebar: 100%; background: # 000; top: 0; kiri: 0;}
 # Konfirmasikan {height: ekspresi (((&& window.Enumerable.max window.Enumerable) [document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight] Max ():. document.documentElement.scrollHeight) + 'px'); lebar: ekspresi (((&& window.Enumerable.max window.Enumerable) [document.body.scrollWidth, document.documentElement.scrollWidth, document.body.offsetWidth, dokumen. documentElement.clientHeight] max ():. document.documentElement.scrollWidth) + 'px');}
 # Konfirmasikan [id] {position: fixed;}
 # Konfirmasikan div {padding: 10px; margin-top: 200px;}
 # Konfirmasikan div div {background: # 900c0c; width: 500px; margin: 0 auto; border: 1px solid # CCC; overflow: hidden;}
 # Konfirmasikan div div h1 {font-size: 18px; color: # FFF;}
 # Konfirmasikan div div p {padding: 20px;}
 ->
 </ Style>

# Mendefinisikan sini mengkonfirmasi latar belakang yang akan "menutupi" seluruh halaman. Baris kedua, (yang satu dengan ketinggian aneh dan lebar), perlu dalam kasus Internet Explorer. # Konfirmasikan [id] adalah dipahami hanya untuk browser modern, dan ini adalah rencana untuk latar belakang jendela kami ukuran 100% sampai 100% dan berjalan sepanjang waktu dengan situs (untuk IE dihitung dalam setiap kasus berdasarkan lebar saat ini dan tinggi jendela).

Div pertama perlu ke pusat-2 dan mengambil jarak dari jendela atas di bagian atas margin-. Div kedua sudah menyediakan jendela kami untuk mengkonfirmasi bahwa dapat berpusat, karena di dalam elemen blok dengan lebar: 100% (nilai standar untuk elemen dengan display: block - yang merupakan div)

Ketiga Waktu untuk jQuery

Masih bagi kita untuk bereaksi terhadap klik pada link yang muncul pada akhir blok P, yang menempatkan Lorem ipsum'a: 

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

Dalam kasus kami, semua link dengan kelas konfirmasi, akan bereaksi terhadap script. Anda bisa menerapkan pengakuan kepada semua link, untuk menghapus nilai dari database.

Hal ini membutuhkan kode JavaScript yang diletakkan di bagian bawah halaman: 

  src = "jquery.js" <script type="text/javascript"> </ script>
 <script type="text/javascript">
 $ (Dokumen) Siap (function (). {
 $ (". Konfirmasi"). Klik (function () {
 $ ("# Konfirmasi")
 Css ({opacity: 0,95}).
 FadeIn (.)
 Html (. '<div> <div> <h1> Redirect </ h1> <p <tombol onClick = \ "location.href = \'' + $ (this). Attr (" href ") +' \ '\ "> Ya </ tombol> <button> TIDAK </ tombol> </ p> </ div> </ div>');
 return false;
 });
 . $ ("# Konfirmasi") Klik (function () {$ (ini) fadeOut ();.});
 });
 </ Script>

JQuery beban pertama baris.

Kemudian, cabang utama kami kode $ (document) Siap,. Mengaktifkan kode Anda, setelah beban halaman.

Kami menjawab mengklik pada elemen dengan kelas konfirmasi, dalam hal ini menyebabkan serangkaian metode pada elemen dengan id = konfirmasi. Untuk memulai, menambahkan transparansi (tapi masih elemen diatur untuk menampilkan: none), kemudian menggunakan metode fadeIn, jQuery mulus bergerak dari display: none untuk opacity: 0.95 (dalam kasus kami). Akhirnya, di dalam unsur # konfirmasi, memuat kode html dari kedua divami, yang ditempatkan di dalam tombol header h1 dan dua tombol. Seperti Anda mungkin telah melihat salah satu dari mereka, ditambah mereka dinyatakan onClick acara, yang akan bereaksi terhadap konfirmasi pengguna yang positif, przekierowywując Yesus ke tempat yang menunjukkan link yang diklik.

Mengapa return false pada akhir blok kode ini? Untuk browser, kita tidak mengarahkan secara otomatis, dengan mengklik pada link, fungsi kita harus kembali palsu, selain itu akan mengarahkan dan jendela akan mengkonfirmasikan benang.

Jika Anda mengklik tempat lain daripada di tombol dari "YA", gunakan fadeOut acara (), blok akan hilang secara lancar dengan konfirmasi kami, yang menyadari $ ("# konfirmasi") Klik (...)..

Kode ditulis keseluruhan harus terlihat seperti ini: 

  <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 content="text/html; http-equiv="Content-Type" charset=utf-8" />
 <title> dialog konfirmasi </ title>
 <style type="text/css">
 <! -
 * {Margin: 0px, padding: 0px;}
 body {margin: 10px;}
 p {width: 600px; margin: 0 auto; line-height: 25px;}

 / * KONFIRMASI * /
 # Konfirmasikan {display: none; position: absolute; height: 100%; lebar: 100%; background: # 000; top: 0; kiri: 0;}
 # Konfirmasikan {height: ekspresi (((&& window.Enumerable.max window.Enumerable) [document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight] Max ():. document.documentElement.scrollHeight) + 'px'); lebar: ekspresi (((&& window.Enumerable.max window.Enumerable) [document.body.scrollWidth, document.documentElement.scrollWidth, document.body.offsetWidth, dokumen. documentElement.clientHeight] max ():. document.documentElement.scrollWidth) + 'px');}
 # Konfirmasikan [id] {position: fixed;}
 # Konfirmasikan div {padding: 10px; margin-top: 200px;}
 # Konfirmasikan div div {background: # 900c0c; width: 500px; margin: 0 auto; border: 1px solid # CCC; overflow: hidden;}
 # Konfirmasikan div div h1 {font-size: 18px; color: # FFF;}
 # Konfirmasikan div div p {padding: 20px;}
 ->
 </ Style>
 </ Kepala>
 <body>
 <p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Quisque ultrices Orci nisl Quis.  Aliquam pada kedukaan.  Sed QUAM consequat ac leo.  Curabitur Fringilla sodales sem.  Praesent eleifend mauris ac ante diktum aliquet.  Sapien Etiam null, consequat eget, consequat vitae, molestie id, lectus.  Dalam 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 Dimittis, eleifend alias, eleifend varius, Cong eget, leo.  Vestibulum ante ipsum primis di 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.  Interdum diktum nulla Purus.  Aenean Odio.  Vestibulum Pretium.  Phasellus Enimem Enimem, sempre aliquet, tempus ac, rutrum gravida, libero.  Etiam neque Odio, blandit NEC, suscipit alias, scelerisque Pellentesque, leo.  Dalam Metus id.  Vivamus rutrum.  Nulla nec velit.  Jikalau tidak ut Purus, porta di, tincidunt sit amet, scelerisque pulvinar, sem.  Sed Risus adipiscing.  Dalam jikalau tidak.  Augustin dkk.  Phasellus ullamcorper Quis guci tempus dapibus Lacus.  Sed eget est  Etiam tellus erat, adipiscing NEC, placerat sed, ultricies sebuah, 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">
 $ (Dokumen) Siap (function (). {
 $ (". Konfirmasi"). Klik (function () {
 $ ("# Konfirmasi")
 Css ({opacity: 0,95}).
 FadeIn (.)
 Html (. '<div> <div> <h1> Redirect </ h1> <p <tombol onClick = \ "location.href = \'' + $ (this). Attr (" href ") +' \ '\ "> Ya </ tombol> <button> TIDAK </ tombol> </ p> </ div> </ div>');
 return false;
 });
 . $ ("# Konfirmasi") Klik (function () {$ (ini) fadeOut ();.});
 });
 </ Script>
 </ Tubuh>
 </ Html>

Ringkasan

Bekerja contoh, Anda dapat melihat di sini .

Ini larutan sampel tidak memerlukan semua kemungkinan. Kita dapat memperpanjang kode sehingga mempengaruhi bentuk konfirmasi, Anda kemudian akan mengirim kontrol form, yang juga bisa dibuat dari dalam jQuery Anda dapat. Juga, berdasarkan kode di atas untuk membuat sebuah plugin untuk jQuery. Jangan ragu untuk mendiskusikan di komentar untuk posting ini.

Jadilah Sociable, Share!

Terkait entri

Kategori: jquery
Tags: , , , ,
«
»
Anda dapat mengikuti respon untuk entri ini melalui feed RSS 2.0 . Anda juga dapat menulis komentar Anda sendiri , atau untuk link ke posting ini pada halaman Anda.
    • Obraz CAPTCHY
    Segarkan Gambar
    *

    Spam Protection oleh WP-SpamFree