Tunawisma mengkonfirmasi html. Peringatan operasi, cepat dan konfirmasi. Interaksi pengguna dalam Javascript. Mengganti dialog konfirmasi menggunakan jQuery
konfirmasi() metode
Metode konfirmasi() menampilkan jendela konfirmasi, yang mirip dengan jendela peringatan yang dihasilkan oleh metode peringatan(), namun berisi dua tombol: OK dan Batal. Listing 11.3 menunjukkan pembuatan jendela konfirmasi, namun skrip ini tidak membedakan antara tombol OK dan Batal. Menekan salah satu tombol hanya akan menutup jendela (Gbr. 11.5).
Beras. 11.5. Bekerja dengan konfirmasi
Daftar 11.3. Bekerja dengan konfirmasi
Bekerja dengan konfirmasi
konfirmasi("Ini adalah konfirmasi saya");
Setelah membaca bab ini, Anda akan mempelajari cara menggunakan metode ini untuk membuat skrip Anda merespons secara berbeda ketika Anda mengklik tombol OK dan Batal.
Dari buku Windows Script Host untuk Windows 2000/XP oleh Andrey Vladimirovich PopovMetode Jalankan Parameter intWindowStyle mengatur tipe jendela untuk aplikasi yang akan diluncurkan (Tabel 1.13).Tabel 1.13. Jenis jendela (intWindowStyle) Parameter Konstanta Visual Basic Deskripsi 0 vbHide Menyembunyikan jendela saat ini dan mengaktifkan jendela lain (menampilkannya dan memberinya fokus) 1 vbNormalFocus Mengaktifkan dan
Dari buku Pemrograman di Ruby [Ideologi Bahasa, Teori dan Praktik Penerapannya] oleh Fulton HalMetode Hapus Jika parameter force salah atau tidak ditentukan, maka menggunakan metode Delete tidak mungkin menghapus direktori dengan atribut read-only. Menyetel force ke true akan memungkinkan direktori tersebut segera dihapus. Saat menggunakan metode Hapus, tidak masalah apakah yang ditentukan
Dari buku Pemrograman PDA dan Smartphone pada .NET Compact Framework oleh Klimov Alexander P.Metode pemindahan Parameter tujuan yang diperlukan menentukan direktori tujuan perpindahan; wildcard tidak diperbolehkan dalam nama direktori. Catatan Selain metode Pindah, Anda dapat menggunakan metode objek MoveFolder
Dari buku Linux dan UNIX: pemrograman shell. Panduan Pengembang. oleh Tainsley DavidMetode penyalinan Parameter tujuan yang diperlukan menentukan file tujuan penyalinan; wildcard tidak diperbolehkan dalam nama file. Parameter overwrite adalah variabel Boolean yang menentukan apakah akan menimpa file yang sudah ada bernama tujuan (overwrite=true)
Dari buku Deskripsi bahasa PascalABC.NET oleh Tim RuBoardMetode Hapus Jika parameter force salah atau tidak ditentukan, maka menggunakan metode Delete tidak mungkin menghapus file dengan atribut read-only. Menyetel force ke true akan memungkinkan file tersebut segera dihapus. Catatan Anda dapat menggunakan metode DeleteFile daripada metode Hapus.
Dari buku penulis8.3.1. Metode inject Metode inject datang ke Ruby dari bahasa Smalltalk (pertama kali muncul di Ruby 1.8). Perilakunya menarik, meskipun tidak mudah untuk dipahami pertama kali. Hal ini mencerminkan fakta bahwa kita sering kali ingin melihat-lihat daftar dan “mengumpulkan” beberapa hasil sepanjang prosesnya. Tentu saja paling banyak
Dari buku penulis8.3.3. Metode partisi Seperti yang mereka katakan, “ada dua tipe orang di dunia: mereka yang membagi orang ke dalam tipe yang berbeda, dan mereka yang tidak.” Metode partisi tidak mengacu pada orang (walaupun kita dapat merepresentasikan mereka sebagai objek di Ruby), tetapi metode ini juga membagi kumpulan menjadi dua bagian. Jika sebuah blok diberikan saat partisi dipanggil, maka blok tersebut akan dievaluasi
Dari buku penulis11.1.10. metode inisialisasi_salin Saat menyalin objek menggunakan metode dup atau clone, konstruktor tidak dipanggil. Semua informasi negara bagian disalin. Namun bagaimana jika Anda tidak memerlukan perilaku ini? Mari kita lihat contohnya: class Document attr_accessor:title, :text attr_reader:timestamp def inisialisasi(judul, teks) @title, @text = judul, teks @timestamp =
Dari buku penulis11.1.11. Metode alokasi Jarang terjadi, tetapi kebetulan Anda perlu membuat objek tanpa memanggil konstruktornya (melewati metode inisialisasi). Misalnya, keadaan suatu objek mungkin ditentukan seluruhnya oleh metode aksesnya; maka tidak perlu memanggil metode baru (yang akan memanggil inisialisasi) kecuali Anda
Dari buku penulis11.3.2. Metode const_get Metode const_get mendapatkan nilai konstanta dengan nama tertentu dari modul atau kelas tempatnya berada.str = "PI"Math.const_get(str) # Nilainya adalah Math::PI Ini adalah cara untuk melakukannya hindari memanggil metode eval, yang terkadang dianggap tidak elegan. Pendekatan ini lebih murah dari sudut pandang
Dari buku penulis11.3.5. Metode Define_method Terlepas dari kata kunci def, satu-satunya cara normal untuk menambahkan metode ke kelas atau objek adalah dengan menggunakan metode Define_method, dan ini memungkinkan Anda melakukan ini pada saat run time waktu berjalan. Jika
Dari buku penulis11.3.6. metode const_missing Metode const_missing mirip dengan metode method_missing. Saat mencoba mengakses konstanta yang tidak diketahui, metode ini dipanggil - jika ditentukan, tentu saja. Sebagai parameter, ia melewatkan simbol yang merujuk pada konstanta untuk mencegat panggilan
Dari buku penulisMetode Lockbits .NET Compact Framework 2.0 memperkenalkan dukungan terbatas untuk metode LockBits, yang dapat digunakan untuk memanipulasi array piksel gambar. Pencacahan ImageLockMode dalam metode ini memungkinkan nilai ReadWrite, ReadOnly, dan WriteOnly. Dan enumerasi PixelFormat mendukung
Dari buku penulis Dari buku penulisMetode Zip Deskripsi metode Metode diberikan untuk urutan urutan T. fungsi Zip(kedua: urutan TSecond; resultSelector: (T,TSecond)->Res): urutan Res; Menggabungkan dua barisan menggunakan fungsi yang ditentukan, yang mengambil satu elemen dari setiap barisan dan
Dari buku penulisMetode Berisi Deskripsi metode Metode diberikan untuk urutan urutan T. fungsi Berisi (nilai: T): boolean; Menentukan apakah elemen tertentu terdapat dalam urutan, menggunakan pembanding kesetaraan default. fungsi Berisi(nilai: T; pembanding: IEqualityComparer): boolean;
Pada artikel ini, kita akan mempelajari tiga metode menarik, yaitu metode alert(), konfirmasi() dan prompt(). Semuanya dirancang untuk berinteraksi dengan pengguna.
Ketiga metode ini milik objek jendela (Jendela Browser). Dan mereka bisa dipanggil seperti ini: window.method_name(); Tapi JavaScript memungkinkan kita untuk tidak menentukan objek jendela ini, tapi cukup menulis nama metodenya.
Kita akan mulai dengan metode alert(). Metode ini menampilkan pesan tertentu di jendela browser pengguna. Jendela ini akan muncul di bagian atas seluruh halaman, dan hingga pengguna mengklik tombol OK, jendela ini tidak akan ditutup.
Untuk mendemonstrasikannya, mari kita tampilkan pesan menggunakan metode alert().
Var hari ini_is = "Senin"; alert("Hari ini " + hari ini_is);
Di dalam metode ini kita dapat menentukan string apa pun, hanya tanpa tag html. Mereka tidak diproses di sini, tetapi ditampilkan apa adanya.
Jika baris yang ingin kita tandai sangat panjang, dan kita ingin membuat baris baru, maka inilah tag htmlnya
tidak akan berhasil. Di sini Anda perlu menggunakan karakter "\n".
Alert("Loooooooooong \nStringgggggg");
Cara ini sering digunakan untuk menemukan kesalahan pada kode.
Proses pemrosesan kode berjalan dari atas ke bawah, jadi untuk menangkap kesalahan, kita cukup menulis metode alert() ke area yang diharapkan di mana kesalahan tersebut berada. Dan jika alert() berfungsi, maka tidak ada kesalahan hingga baris penulisannya.
Selanjutnya, Anda perlu memindahkannya satu baris atau lebih ke bawah. Kami menyimpan perubahan, menyegarkan kembali halaman di browser, dan melihat apakah alert() berfungsi, maka tidak ada kesalahan hingga baris tempatnya berada, sebaliknya, jika tidak berfungsi, kesalahannya terletak di garis di atas garis di mana ia berada saat ini. Ini adalah bagaimana Anda dapat menemukan kesalahan dalam kode.
konfirmasi() metodeMetode ini digunakan untuk mengkonfirmasi jawaban suatu pertanyaan. Hanya ada dua pilihan jawaban, ya (OK) atau tidak (Batal). Jika pengguna menjawab ya, maka metode akan mengembalikan nilai benar, jika tidak maka akan mengembalikan nilai salah.
Misalnya, kami akan menampilkan jendela menggunakan metode konfirmasi(), di mana kami akan menanyakan pengguna “Apakah Anda yakin ingin meninggalkan halaman?” Jika pengguna menjawab ya, maka melalui metode alert() kita akan menampilkan pesan berikut “Pengguna ingin meninggalkan halaman”, sebaliknya kita akan menampilkan pesan lain “Pengguna TIDAK ingin meninggalkan halaman”.
Var user_answer = konfirmasi("Apakah Anda yakin ingin meninggalkan halaman ini?"); if(user_answer) alert("Pengguna ingin meninggalkan halaman"); else alert("Pengguna TIDAK ingin \nmeninggalkan halaman");
Beginilah cara kerja metode konfirmasi(). Ini dapat digunakan dalam berbagai kesempatan. Misalnya, sebelum menghapus sesuatu dari sebuah situs, biasanya menanyakan kepada pengguna apakah dia yakin dengan tindakannya. Atau, sebelum mengirimkan formulir, Anda juga dapat bertanya kepada pengguna “Apakah Anda sudah mengisi semuanya dengan benar?” Jika dia menjawab ya, maka formulir akan dikirim, jika tidak maka formulir tidak akan dikirim.
metode cepat()Metode terakhir yang akan kita pelajari adalah metode prompt(). Metode ini lebih jarang digunakan dibandingkan dua metode lainnya. Ini memungkinkan Anda menerima beberapa informasi dari pengguna, yang akan dia masukkan ke dalam bidang teks.
Hasilnya, metode prompt() mengembalikan string yang dimasukkan jika pengguna mengklik tombol OK, atau null jika pengguna mengklik tombol batal.
Sebagai parameternya, yaitu di dalam tanda kurung metode ini, kita dapat menuliskan baris indikatif atau pertanyaan agar pengguna mengetahui informasi apa saja yang perlu dimasukkan.
Misalnya, minta pengguna menjawab pertanyaan "Siapa nama Anda?" Nama yang dimasukkan oleh pengguna akan ditampilkan di layar menggunakan metode alert().
Var nama = prompt("Siapa nama anda?"); alert("Nama Anda adalah "+nama);
Simpan dan buka halaman di browser.
Tentu saja, Anda dapat memasukkan informasi apa pun ke dalam kolom teks dari metode prompt(). Informasi ini akan dikembalikan sebagai string, meskipun berupa angka atau karakter khusus lainnya.
Misalnya, minta pengguna memasukkan dua angka lalu mengalikannya. Akan ada semacam kalkulator untuk mengalikan angka.
Var x = prompt("Masukkan bilangan pertama :"); var y = prompt("Masukkan angka kedua :"); //Mengonversi angka yang dimasukkan dari tipe string ke tipe numerik x = Angka(x); y = Angka(y); dokumen.tulis(x + " * " + y + " = " + (x * y));
Angka yang dimasukkan adalah string, jadi agar hasil perkaliannya benar, angka tersebut harus dilewatkan melalui fungsi Number(), yang mengubahnya dari tipe string menjadi angka normal.
Ya, itu saja. Sekarang Anda mengetahui tiga metode lagi: alert(), konfirmasi() dan prompt(). Yang dapat Anda gunakan dengan aman dalam latihan.
Melanjutkan rangkaian tutorial kami tentang cara mempercantik dan mengelola pengaturan browser default, hari ini kami mengundang Anda untuk mengembangkan dialog konfirmasi lintas-browser menggunakan plugin jQuery yang mudah digunakan. Anda dapat memilih teks, tombol, dan tindakan yang akan dilakukan setelah klik.
kode HTML
Meskipun pada awalnya kita harus fokus pada jendela konfirmasi, pertama-tama mari kita ceritakan sedikit tentang halaman yang akan kita gunakan. Jika Anda ingin melihat kode sumber plugin, Anda dapat melewati langkah ini dan gulir ke bawah ke bagian artikel jQuery.
Indeks.php
Penggantian Dialog Konfirmasi jQuery dengan CSS3 | Demo Tutorialzine
Di bagian atas dokumen kami telah menyertakan font Cuprum dari , jQuery.confirm.css (cascading style sheet untuk kotak dialog), dan style.css - cascading style sheet halaman kami.
Di bagian paling bawah badan dokumen kami telah menyertakan perpustakaan jQuery, jquery.confirm.js (file plugin utama), serta script.js, yang mendengarkan acara klik tombol dan menjalankan plugin. Pada langkah terakhir tutorial kami hari ini, kami akan memberi tahu Anda tentang kedua file ini.
Untuk menyertakan jendela konfirmasi di situs web Anda, Anda perlu menyalin folder jquery.confirm dari arsip yang diunduh, dan menyertakan jquery.confirm.css di bagian atas kode, serta file jquery.confirm.js sebelum tag yang mengakhiri badan dokumen + perpustakaan jQuery.
Dialognya sendiri tidak lebih dari beberapa baris kode HTML. Di bawah ini Anda dapat melihat kode yang disisipkan oleh plugin untuk menampilkan kotak dialog.
Contoh Kode Kotak Dialog
Kode ditambahkan ke badan dokumen. konfirmasiOverlay ditampilkan di atas sisa halaman, yang mencegah interaksi apa pun dengan elemen halaman saat kotak dialog ditampilkan. h1, p dan div konfirmasiTombol disusun sesuai dengan struktur yang ditentukan dalam pengaturan plugin. Nanti di artikel ini Anda akan mempelajari lebih lanjut tentang ini.
kode CSS
Desain kotak dialog terdapat pada file jquery.confirm.css. Hal ini membuatnya lebih mudah untuk diintegrasikan ke dalam proyek yang sudah selesai, dan penataan gaya dilakukan sedemikian rupa sehingga Anda dapat yakin bahwa gaya tersebut tidak akan tercampur dengan gaya yang sudah ada di halaman.
jquery.konfirmasi.css
#konfirmasiHamparan(
lebar:100%;
tinggi:100%;
posisi: tetap;
atas:0;
kiri:0;
latar belakang:url("ie.png");
latar belakang: -moz-linear-gradient(rgba(11,11,11,0.1), rgba(11,11,11,0.6)) ulangi-x rgba(11,11,11,0.2);
latar belakang:-webkit-gradient(linier, 0% 0%, 0% 100%, dari(rgba(11,11,11,0.1)), ke(rgba(11,11,11,0.6))) ulangi-x rgba(11,11,11,0.2);
indeks-z:100000;
}
#konfirmasiKotak(
background:url("body_bg.jpg") ulangi-x kiri bawah #e5e5e5;
lebar:460 piksel;
posisi: tetap;
kiri:50%;
atas:50%;
margin:-130 piksel 0 0 -230 piksel;
batas: 1px rgba padat(33, 33, 33, 0.6);
Bayangan-kotak-Moz: 0 0 2px rgba(255, 255, 255, 0.6) sisipan;
-webkit-box-shadow: 0 0 2px rgba(255, 255, 255, 0.6) sisipan;
bayangan kotak: 0 0 2px rgba(255, 255, 255, 0.6) sisipan;
}
#konfirmasiKotak h1,
#konfirmasiKotak p(
font:26px/1 "Cuprum", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
background:url("header_bg.jpg") ulangi-x kiri bawah #f5f5f5;
bantalan: 18px 25px;
bayangan teks: 1px 1px 0 rgba(255, 255, 255, 0.6);
warna:#666;
}
#konfirmasiKotak h1(
spasi huruf: 0,3 piksel;
warna:#888;
}
#konfirmasiKotak p(
latar belakang: tidak ada;
ukuran font:16px;
tinggi garis:1.4;
padding-atas: 35 piksel;
}
#konfirmasiTombol(
bantalan:15 piksel 0 25 piksel;
perataan teks:tengah;
}
#confirmBox.button(
tampilan: blok sebaris;
warna putih;
posisi:relatif;
tinggi: 33 piksel;
Font:17px/33px "Cuprum", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
Margin-kanan: 15px;
bantalan: 0 35 piksel 0 40 piksel;
dekorasi teks: tidak ada;
perbatasan: tidak ada;
}
#confirmBox .button:anak terakhir(margin-kanan:0;)
#confirmBox .rentang tombol(
posisi:mutlak;
atas:0;
kanan:-5px;
background:url("buttons.png") tanpa pengulangan;
lebar:5 piksel;
tinggi:33px
}
#confirmBox .blue( posisi latar belakang:kiri atas;bayangan teks:1px 1px 0 #5889a2;)
#confirmBox .blue span( posisi latar belakang:-195px 0;)
#confirmBox .blue:hover( posisi latar belakang:kiri bawah;)
#confirmBox .blue:hover span( posisi latar belakang:-195px bawah;)
#confirmBox .gray( posisi latar belakang:-200px atas;bayangan teks:1px 1px 0 #707070;)
#confirmBox .grey span( posisi latar belakang:-395px 0;)
#confirmBox .gray:hover( posisi latar belakang:-200px bawah;)
#confirmBox .gray:hover span( posisi latar belakang:-395px bawah;)
Ini memanfaatkan CSS3 baru. Pada definisi #confirmOverlay, kami menggunakan gradasi CSS3 (yang hanya berfungsi di Firefox, Safari, dan Chrome) dengan fallback yang disediakan dalam bentuk PNG transparan.
Selanjutnya, pada tampilan #confirmBox di tengah, kami menambahkan bayangan kotak bagian dalam (mirip dengan cahaya bagian dalam di Photoshop). Kami juga menggunakan font Cuprum, yang ditambahkan dari direktori font Google.
Seiring dengan bayangan teks, Anda dapat melihat gaya tombol. Mereka diimplementasikan menggunakan pintu geser. Saat ini ada dua jenis desain yang tersedia – biru dan abu-abu. Anda dapat menambahkan warna tombol baru dengan menambahkan deklarasi baru ke kode.
jQuery
Sebelum kita beralih ke kode sumber plugin, mari kita lihat lebih jauh. Di script.js Anda dapat melihat plugin berjalan.
skrip.js
$(dokumen).siap(fungsi())(
$(".barang .hapus").klik(fungsi())(
Var elemen = $(ini).terdekat(".item");
$.konfirmasi((
"title" : "Hapus Konfirmasi",
"message" : "Anda akan menghapus item ini.
Itu tidak dapat dipulihkan di lain waktu! Melanjutkan?"
"tombol" :(
"Ya" :(
"kelas" : "biru",
"tindakan": fungsi())(
elemen.slideUp();
}
},
"TIDAK" :(
"kelas" : "abu-abu",
"action": function()() // Tidak ada yang perlu dilakukan dalam kasus ini. Anda juga dapat menghilangkan properti action.
}
}
});
Ketika div .deleted diklik dalam contoh kita, skrip menjalankan fungsi $.confirm yang ditentukan plugin. Berikut ini adalah judul kotak dialog, deskripsi, dan objek dengan tombol. Setiap tombol memiliki nama kelas CSS serta parameter tindakan. Tindakan adalah fungsi yang dijalankan ketika tombol diklik.
Sekarang mari kita ke bagian yang menarik. Di jquery.confirm.js Anda dapat melihat kode sumber untuk dialog kita.
Jquery.konfirmasi.js
$.konfirmasi = fungsi(params)(
If($("#confirmOverlay").panjang)(
// Konfirmasi sudah ditampilkan di halaman:
kembali salah;
}
Tombol VarHTML = "";
// Menghasilkan markup untuk tombol:
If(!obj.action)(
obj.aksi = fungsi())(;
}
});
Markup var = [
"
"
",params.pesan,"
","
",
tombolHTML,
"
].bergabung("");
$(markup).hide().appendTo("body").fadeIn();
Tombol Var = $("#confirmBox .button"),
saya = 0;
$.each(params.buttons,function(nama,obj)(
tombol.eq(i++).klik(fungsi())(
// Memanggil atribut action ketika a
// klik terjadi, dan menyembunyikan konfirmasi.
Obj.aksi();
$.konfirmasi.sembunyikan();
kembali salah;
});
});
}
$.konfirmasi.sembunyikan = fungsi())(
$("#confirmOverlay").fadeOut(fungsi())(
$(ini).hapus();
});
}
Plugin kami mendefinisikan metode $.confirm(). Metode ini memproses data yang Anda masukkan, membuat markup, lalu menambahkan semuanya ke halaman. Karena div #confirmOverlay memiliki posisi tetap melalui deklarasi CSS, kita akan menyerahkan proses memusatkannya ke browser dan kemudian memindahkannya saat pengguna menggulir halaman.
Setelah menambahkan markup, skrip mendistribusikan tuas peristiwa untuk peristiwa klik tombol, melakukan tindakan yang sesuai dengan tombol yang ditekan.
Ini mengakhiri kotak dialog kita!
Mari kita rangkum
Anda dapat mengedit tampilan kotak dialog menggunakan file jquery.confirm.css. Karena atribut pesan pada kotak dialog menggunakan kode HTML, Anda dapat menambahkan gambar atau ikon di sana.
Anda bahkan dapat menggunakan plugin untuk mengimplementasikan kotak pesan kesalahan - Anda hanya perlu menambahkan satu tombol tanpa menetapkan atribut tindakan.
Perhatian! Anda tidak memiliki izin untuk melihat teks tersembunyi.
Dan sekali lagi, saya menyambut Anda di topik lain yang didedikasikan untuk bahasa JavaScript, di mana kami akan menganalisis metode peringatan, prompt, konfirmasi. Metode ini dibangun ke dalam bahasa Javascript dan membantu kami berinteraksi dengan pengguna.
Peringatan menampilkan jendela di layar browser dengan informasi tertentu, yang menghentikan sementara skrip hingga pengguna mengklik OK.
Prompt biasanya menampilkan jendela yang menanyakan pertanyaan kepada pengguna yang harus mereka jawab di kolom teks tertentu sebelum mengklik OK. Pengguna juga tidak dapat memasukkan apa pun dengan menekan tombol Batal.
Konfirmasi juga menampilkan jendela di mana pengguna tidak dapat lagi memasukkan apa pun ke dalam kolom teks, namun hanya dapat mengklik OK atau membatalkan.
Dan sekarang, setelah perkenalan singkat, mari kita beralih ke pertimbangan semua hal di atas dalam praktiknya.
waspada, cepat, konfirmasi
alert("Halo, pengguna yang terhormat!" );
var namaPengguna = prompt("Nama Anda?", "nama" );
var userAnswer = konfirmasi("Apakah Anda yakin ingin meninggalkan situs ini?" );
Hasilnya, saat kita me-refresh halaman browser, kita akan melihat jendela menyambut pengguna. Setelah mengklik OK, jendela berikut akan muncul menanyakan nama Anda. Metode ini memiliki dua parameter, yang pertama diperlukan dan bertanggung jawab atas judul yang akan ditampilkan, dalam kasus kami ini adalah pertanyaan nama pengguna. Dan parameter kedua bertanggung jawab atas nilai yang akan ditampilkan secara default di kolom teks. Jika Anda memasukkan nama Anda dan mengklik OK, nama Anda akan ditempatkan di variabel namaPengguna. Jika Anda mengklik tombol batal, null akan ditulis ke variabel.
Dan terakhir, sebuah jendela yang menanyakan pengguna apakah dia ingin meninggalkan situs kita atau tidak. Jika disetujui, nilai Boolean true akan ditempatkan dalam variabel, dan jika ditolak, nilai false akan ditempatkan. Itu saja yang perlu Anda ketahui tentang metode ini, sampai jumpa di pelajaran selanjutnya!
Sebagai alternatif alat browser standar, dalam tutorial ini kita akan membangun solusi lintas browser untuk menyediakan dialog konfirmasi dalam bentuk plugin jQuery yang mudah digunakan. Dimungkinkan untuk mengubah teks, tombol, dan tindakan yang akan dilakukan saat tombol diklik.
Meskipun sebagian besar upaya akan difokuskan pada dialog konfirmasi, pertama-tama mari kita jelaskan beberapa kata tentang halaman yang akan digunakan untuk demo. Bagi yang ingin melihat kode plugin bisa langsung scroll ke bawah ke bagian jQuery.
indeks.phpMengganti dialog konfirmasi menggunakan jQuery | Demo untuk situs situs " target="_blank"> " alt="" width="250" /> Mengganti dialog konfirmasi menggunakan jQuery
Di bagian header halaman kami, font disertakan Tembaga dari Google Font, jquery_confirm.css, yang berisi gaya untuk dialog konfirmasi, dan style.css, yang berisi gaya untuk halaman demo.
Pustaka jQuery disertakan di bagian bawah badan halaman , jquery_confirm.js , yang berisi kode plugin utama, dan script.js , yang berisi kode untuk event handler klik, digunakan pada halaman demo untuk menjalankan plugin.
Untuk menggunakan dialog konfirmasi di situs Anda, Anda perlu menyalin folder jquery_confirm dari arsip sumber dan menyertakan jquery_confirm.css di bagian judul halaman, dan menempelkan jquery_confirm.js sebelum tag penutup tubuh, serta perpustakaan jQuery.
Dialog konfirmasi sendiri tidak lebih dari beberapa baris kode HTML. Di bawah ini adalah kode yang menghasilkan plugin untuk menampilkan kotak dialog.
Contoh kode dialogJudul jendela
Deskripsi proses
Tidak terlaluKode ini ditambahkan ke dokumen. Elemen konfirmasiHamparan ditampilkan di atas konten halaman lainnya, mencegah interaksi apa pun dengannya saat dialog konfirmasi (jendela modal) terbuka. Elemen h1, P Dan konfirmasiTombol diisi sesuai dengan argumen yang diteruskan ke plugin. Penjelasan tambahan diberikan di bawah ini dalam teks pelajaran.
Gaya untuk dialog konfirmasi ada di file jquery_confirm.css. Dengan demikian, plugin akan mudah dihubungkan ke proyek yang ada, dan dibuat sedemikian rupa untuk menghilangkan kemungkinan persinggungan dengan gaya halaman Anda.
jquery_confirm.css#confirmOverlay( lebar:100%; tinggi:100%; posisi:tetap; atas:0; kiri:0; latar belakang:url("ie.png"); latar belakang: -moz-linear-gradient(rgba(11,11 ,11,0.1), rgba(11,11,11,0.6)) ulangi-x rgba(11,11,11,0.2); latar belakang:-webkit-gradien(linier, 0% 0%, 0% 100%, dari(rgba(11,11,11,0.1)), ke(rgba(11,11,11,0.6))) ulangi-x rgba(11,11,11,0.2); indeks-z:100000; latar belakang:url("body_bg.jpg") ulangi-x kiri bawah #e5e5e5; lebar:460px; posisi:tetap kiri:50%; (33, 33, 33, 0.6); -moz-kotak-bayangan: 0 0 2px rgba(255, 255, 255, 0.6) sisipan; -webkit-kotak-bayangan: 0 0 2px rgba(255, 255, 255, 0.6) sisipan; bayangan kotak: 0 0 2px rgba(255, 255, 255, 0.6) sisipan; ) #confirmBox h1, #confirmBox p( font:26px/1 "Cuprum","Lucida Sans Unicode" Lucida Grande", sans-serif; latar belakang:url("header_bg.jpg") ulangi-x kiri bawah #f5f5f5; bantalan: 18px 25px; ) #confirmBox h1( spasi huruf:0,3px; warna:#888; ) #confirmBox p( background:none; font-size:16px; line-height:1.4; padding-top: 35px; ) #confirmButtons( padding:15px 0 25px; text-align:center; ) #confirmBox .button( tampilan :blok sebaris; latar belakang:url("buttons.png") tanpa pengulangan; posisi:relatif; font:17px/33px "Cuprum", "Lucida Sans Unicode", "Lucida Grande", sans-serif; : 15 piksel; bantalan: 0 35 piksel 0 40 piksel; batas: tidak ada; ) #confirmBox .button:last-child(margin-right:0;) #confirmBox .button span ( posisi:absolute; atas:0; kanan:-5px; background:url("buttons.png") tanpa pengulangan; lebar:5px; tinggi:33px ) #confirmBox .blue( background-position:left top;text- shadow:1px 1px 0 #5889a2;) #confirmBox .blue span ( posisi latar belakang:-195px 0;) #confirmBox .blue:hover( posisi latar belakang:kiri bawah;) #confirmBox .blue:hover span( posisi latar belakang :-195px bawah;) #confirmBox .gray( posisi latar belakang :-200px atas;text-shadow:1px 1px 0 #707070;) #confirmBox .gray span( background-position:-395px 0;) #confirmBox .gray: hover( background-position:-200px bottom;) #confirmBox . abu-abu: rentang melayang (posisi latar belakang: -395px bawah;)
Beberapa aturan CSS3 digunakan. Dalam definisi #confirmOverlay, kami menentukan gradien CSS3 (ini hanya akan tersedia di browser Firefox, Safari, dan Chrome).
Di #confirmBox, yang terletak di tengah layar, telah ditambahkan bayangan internal yang terlihat mengesankan (mirip dengan cahaya internal di Photoshop). Juga menggunakan font Tembaga, yang disertakan dalam Google Font.
Tombolnya menggunakan sprite CSS. Tersedia dua pilihan desain - abu-abu dan biru. Anda juga dapat menambahkan gaya Anda sendiri untuk tombolnya.
jQuerySebelum melihat kode plugin, mari kita lihat cara menggunakannya. Plugin ini dipanggil dalam file scripts.js.
skrip.js$(dokumen).siap(fungsi())( $(".item .delete").klik(fungsi())( var elem = $(ini).closest(".item"); $.konfirmasi(( "title " : "Konfirmasi penghapusan", "message" : "Anda telah memutuskan untuk menghapus item tersebut.
Setelah dihapus, tidak dapat dipulihkan! Bisakah kita melanjutkan?", "buttons" : ( "Yes" : ( "class" : "blue", "action": function() ( elem.slideUp(); ) ), "No" : ( "class" : "abu-abu", "aksi": function()() // Dalam hal ini, kami tidak melakukan apa pun. Opsi ini dapat dihilangkan begitu saja.
Saat berada di elemen div.delete ditekan, skrip menjalankan fungsinya $.konfirmasi, ditentukan oleh plugin. Ini meneruskan judul dialog, deskripsi, dan objek tombol ke plugin. Setiap tombol mendapat nama kelas CSS dan properti tindakan. Properti ini mengatur fungsi yang dijalankan ketika tombol ditekan.
Sekarang kita dapat melanjutkan ke bagian paling menarik dari pelajaran kita. File jquery_confirm.js berisi kode untuk plugin alternatif dari dialog konfirmasi standar.
jquery_confirm.js(function($)( $.confirm = function(params)( if($("#confirmOverlay").length)( // Dialog konfirmasi sudah ditampilkan di halaman: return false; ) var buttonHTML = ""; $.each (params.buttons,function(name,obj)( // Buat markup tombol: buttonHTML += ""+name+""; if(!obj.action)( obj.action = function())(); ) )); var markup = [ "", "", "",params.judul,"", "
",params.pesan,"
", "", buttonHTML, "" ].join(""); $(markup).hide().appendTo("body").fadeIn(); var tombol = $("#confirmBox .button"), i = 0; $.each(params.buttons,function(name,obj)(buttons.eq(i++).click(function())( // Saat tombol diklik, panggil fungsi tindakan // dan tutup dialog konfirmasi obj .action(); return false )); $.confirm.hide = function())( $("#confirmOverlay").fadeOut(function()); ).remove(); jQuery);Plugin kami mendefinisikan metode $.confirm(). Metode ini membaca argumen yang diteruskan, membuat markup, dan menambahkannya ke halaman. Karena div#confirmOverlay memiliki posisi tetap, artinya ditempatkan di tengah layar dan tetap pada posisinya meskipun pengguna menggulir halaman.
Setelah menambahkan markup, skrip menginstal event handler yang melakukan tindakan yang sesuai untuk tombol dialog.
Siap!
KesimpulanAnda dapat mengubah gaya dialog dengan memodifikasi file jquery_confirm.css. Karena atribut pesan dialog menerima teks HTML, Anda dapat menambahkan gambar dan ikon ke dalamnya untuk ditampilkan di kotak dialog.
Anda juga dapat menggunakan plugin untuk menampilkan peringatan - Anda hanya perlu melewati satu tombol tanpa atribut tindakan.
