Dalam berbagai proses pengembangan web, pemrosesan kotak dialog dan kotak prompt adalah teknologi pemrosesan antarmuka yang sangat umum. Jika digunakan dengan baik, itu dapat memberi pengguna pengalaman halaman yang baik. Hal yang sama berlaku untuk pengembangan bootstrap. Kami sering menggunakan lapisan kotak dialog pop-up untuk menampilkan data pada antarmuka seperti menambahkan, mengedit, dan melihat detail. Saat menghapus, kotak konfirmasi prompt dapat digunakan. Jika operasi berhasil, kita dapat menggunakan kotak prompt yang lebih kaya untuk menanganinya. Artikel ini terutama membandingkan poin teknis yang digunakan dalam pengembangan bootstrap ini.
1. Penggunaan kotak dialog Bootstrap
Bootstrap biasa memiliki beberapa ukuran kotak dialog, termasuk kotak dialog kecil dengan status default, kotak dialog lebar sedang, dan kotak dialog ukuran penuh. Antarmuka kotak dialog Bootstrap sangat ramah. Saat kami menggunakan kunci ESC atau klik ruang kosong lainnya dengan mouse, kotak dialog akan secara otomatis disembunyikan.
Definisi mereka hanya berbeda, seperti yang berikut ini adalah kode antarmuka dialog kecil default:
<! ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- data-toggle="validator" enctype="multipart/form-data"> <div> <div> <div> <div> <div> <label>Parent ID</label> <div> <select id="PID" name="PID" type="text" placeholder="parent ID..." ></select> </div> </div> </div> </div> <div> <div> <label>Name</label> <div> <input id = "name" name = "name" type = "text" placeholder = "name ..."/> </div> </div> </div> <dv> <verv> <label> Keterangan < <Div> <input type = "tersembunyi" id = "id" name = "id"/> <Tombol type = "kirim"> konfirmasi </button> <tombol type = "tombol" data-dismiss = "modal"> Batal </button> </div> </form> </div> </Div> </Div> </Div>
Antarmuka perkiraan adalah sebagai berikut:
Perhatikan kode gaya dialog dalam kode di atas, sebagai berikut:
<div>
Jika itu adalah database dari dua ukuran lainnya, Anda hanya perlu memodifikasinya di sini. Dua kode yang ditunjukkan di bawah ini adalah:
<div>
maupun
<div>
Kita dapat memutuskan ukuran definisi lapisan dialog mana yang akan diadopsi berdasarkan tata letak elemen antarmuka, tetapi metode panggilan kotak dialog ini konsisten.
Antarmuka kotak dialog adalah sebagai berikut:
// show dapat memilih pelanggan $ ("#btnselectcustomer"). Show ();Antarmuka kotak dialog penutup adalah sebagai berikut:
$ ("#add"). Modal ("Hide");Secara umum, kotak dialog yang kami muncul adalah formulir yang dapat melakukan operasi pengiriman yang mirip dengan menghemat data. Oleh karena itu, perlu memverifikasi data formulir. Jika ada kesalahan, kita mungkin perlu mengingatkannya pada antarmuka. Oleh karena itu, ketika halaman diinisialisasi, aturan verifikasi formulir perlu diinisialisasi. Di bawah ini adalah operasi inisialisasi formulir reguler kami.
// BIND Fungsi Acara Terkait bindEvent () {// menilai apakah informasi formulir melewati verifikasi $ ("#ffadd"). Validasi ({meta: "validasi", errorElement: 'span', errorClass: 'help-block help-block-error', focusInvalid: false, sorot: function (element) { $ (elemen). ERRORPLACEMENT: FUNGSI (ERROR, ELEMENT) {element.parent ('Div'). Append (error); $ .parsejson (json); }}). ERROR (function () {showTips ("Anda tidak berwenang menggunakan fungsi ini, silakan hubungi administrator untuk menanganinya.");}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}}); }}}); }}Tetapi umumnya kode -kode ini akan banyak diulangi, sehingga kami dapat merangkum fungsi dan menggunakan kembali beberapa kode untuk menggunakan kode pemrosesan yang lebih sederhana, tetapi kami juga dapat mencapai tujuan.
// BIND Acara Terkait Fungsi BindEvent () {// Tambah dan edit catatan formvalidate ("ffadd", function (form) {$ ("#add"). Modal ("hide"); // kirim parameter konstruk ke latar belakang var postdata = $ ("#ffadd"). Function (); $. Postdata = $ ("#ffadd"). SerializeArray (); $. $. $ .parsejson (json); untuk menanganinya. ");});}); }); }2. Hapus Pemrosesan Kotak Dialog Konfirmasi
1) Penggunaan plug-in bootbox
Selain kotak dialog reguler di atas, kami sering menemukan kotak dialog konfirmasi ringkas. Meskipun kode di atas juga dapat digunakan untuk membangun kotak dialog konfirmasi, tidak perlu terlalu merepotkan secara umum. Anda dapat menggunakan kotak dialog konfirmasi dari bootbox plug-in untuk menanganinya.
Bootbox.js adalah pustaka JavaScript kecil yang membantu Anda dengan cepat membuat kotak dialog saat menggunakan kerangka kerja Bootstrap, dan juga dapat membantu Anda membuat, mengelola, atau menghapus setiap elemen DOM yang diperlukan atau penangan acara JS.
Bootbox.js menggunakan tiga metode untuk merancang meniru beberapa metode javascript mereka. Tanda tangan metode yang tepat mereka fleksibel untuk masing -masing untuk mengambil berbagai parameter untuk menyesuaikan label dan menentukan nilai default, tetapi mereka sering disebut sama:
bootbox.alert (pesan, panggilan balik)
bootbox.promppt (pesan, callback)
bootbox.confirm (pesan, panggilan balik)
Satu -satunya parameter yang diperlukan adalah waspada adalah pesan; Callback diperlukan untuk mengkonfirmasi dan meminta panggilan untuk menentukan respons pengguna. Bahkan ketika memanggil panggilan balik alarm ditentukan ketika pengguna menolak kotak dialog karena metode pembungkus kami tidak dapat memblokir seperti bahasa asli mereka berguna: mereka tidak sinkron daripada sinkron.
Tiga metode ini menyebut seperempat dari metode publik, yang juga dapat Anda buat menggunakan dialog khusus Anda sendiri:
bootbox.dialog (opsi)
Untuk dokumentasi bantuan API lainnya, silakan lihat: http://bootboxjs.com/documentation.html
Peringatan
bootbox.alert ("Hello World!", function () {example.show ("Hello World Callback");});Mengonfirmasi
bootbox.confirm ("Apakah Anda yakin?", function (hasil) {example.show ("Konfirmasi hasil:"+hasil);});Atau kode:
bootbox.confirm("Are you sure you delete the selected record?", function (result) { if (result) { //Finally remove the last comma, ids = ids.substring(0, ids.length - 1); //Then send the asynchronous request information to the background to delete the data var postData = { Ids: ids }; $.get("/Province/DeletebyIds", PostData, JSON) {var data = $ .parsejson (json); }});Mengingatkan
bootbox.promppt ("Siapa namamu?", function (hasil) {if (result === null) {example.show ("prompt diberhentikan");} else {example.show ("hai <b>"+hasil+"</b>");}});Dialog Kustom
Efek menggunakan kode dan antarmuka adalah sebagai berikut:
bootbox.dialog (...)
[2)
2) Penggunaan plug-in sweetalert
Meskipun efek di atas sangat konsisten dengan gaya bootstrap, antarmuka agak monoton. Efek di atas bukanlah yang saya sukai, saya menemukan efek yang terlihat lebih indah, seperti yang ditunjukkan di bawah ini.
Efek ini diimplementasikan dengan memperkenalkan plugin Sweetalert (http://t4t5.github.io/sweetalert/).
swal({ title: "Operation prompt", text: newtips, type: "warning", showCancelButton: true, confirmButtonColor: "#DD6B55", cancelButtonText: "Cancel", confirmButtonText: "Yes, execute delete!", closeOnConfirm: true }, function () { delFunction(); });Kode implementasi dengan efek antarmuka yang sama di atas adalah sebagai berikut:
Secara umum, kode pop-upnya dapat dibuat sangat sederhana, seperti yang ditunjukkan di bawah ini.
3. Pemrosesan Kotak Prompt Informasi
Dua pemrosesan di atas diimplementasikan menggunakan kotak dialog pop-up dan memblokir antarmuka. Secara umum, kami melakukan permintaan informasi, berharap itu tidak akan mempengaruhi operasi kami lebih lanjut, atau setidaknya memberikan efek penghilangan otomatis yang sangat singkat.
Jadi di sini kami akan memperkenalkan plug-in plug-in dan roti panggang JNotify.
1) Penggunaan kotak prompt jnotify
JNotify Prompt Box, plugin kotak prompt hasil jQuery yang sangat baik. Setelah mengirimkan formulir, kami menanggapi latar belakang melalui AJAX dan mengembalikan hasilnya dan menampilkan informasi pengembalian di latar depan. JNotify dapat menampilkan informasi hasil operasi dengan sangat elegan. JNotify adalah plug-in prompt informasi berbasis jQuery, yang mendukung tiga metode prompt informasi: keberhasilan operasi, kegagalan operasi, dan pengingat operasi. JNotify Browser memiliki kompatibilitas yang sangat baik, mendukung perubahan konten cepat, mendukung memposisikan lokasi kotak prompt, dan dapat mengkonfigurasi parameter plug-in.
jsuccess (pesan, {option}); jerror ("Operasi gagal, coba lagi !!"); jnotify ("Catatan: Harap tingkatkan informasi pribadi <strong> Anda! </strong>");Konfigurasi terperinci parameter JNotify:
Autohide: Benar, // Apakah akan secara otomatis menyembunyikan bilah prompt ClickOllay: False, // Apakah akan mengklik lapisan topeng untuk menutup bilah prompt Minwidth: 200, // Minimum Lebar Timeshown: 1500, // Tampilan Waktu: Milliseconds Showetefect: 200, / : 15, // Perpindahan Saat bilah prompt ditampilkan dan horizontalposisi tersembunyi: "kanan", // Posisi horizontal: kiri, tengah, kananvosisi: "Bawah", // Posisi vertikal: Top, tengah, bottomshowover: true, // apakah akan menampilkan warna topeng coloroverlay: "#000, // set. Transparansi lapisan mask yang ditutup: fn // Setelah menutup kotak prompt, jalankan fungsi, Anda dapat menghubungi jNotify lainnya lagi. Seperti disebutkan di atas, ketiga panggilan itu dipanggil secara berurutan.
Di bawah ini adalah metode publik yang saya renungkan di kelas skrip untuk mencapai tampilan efek cepat.
// Tunjukkan kesalahan atau pesan cepat (memerlukan file terkait jnotify) function shower (tips, timeshown, autohide) {jerror (tips, {autohide: autohide || true, // ditambahkan dalam v2.0 timeshown: OneThown || 1500, horizontalposition: 'center', verticalposition: 'On -On -Onclover', horizontalposition: 'center', verticalposition: 'OneShown', showover -ufover -000l: function -000 -000l. () {// Ditambahkan dalam v2.0 // alert ('jnofity selesai!');}});} // Tampilkan fungsi pesan cepat (tips, timeshown, autohide) {jsuccess (kiat, {autohide: autohide || true, // ditambahkan di v2.0 Timeshown: Timesshown: Autohide | ShowOverlay: True, ColorOverlay: '#000', onCompleted: function () {// ditambahkan dalam v2.0 // alert ('jnofity selesai!');});}Dengan cara ini, ketika kami menggunakan metode posting Ajax, kami dapat meminta sesuai dengan kebutuhan yang berbeda.
var postdata = $ ("#ffadd"). SerializeArray (); $ .post (url, postdata, function (json) {var data = $ .parsejson (json); if (data.success) {// Tambahkan pemrosesan unggahan potret $ ('#file-portrait'). eveinput ('unggah'); // simpan berhasil 1. Tutup lapisan pop-up, 2. {showerror ("Simpan gagal:" + data.errormessage, 3000);2) Penggunaan plug-in Toastr
Toastr adalah perpustakaan JavaScript untuk membuat pengingat pesan halaman gnome/growl, non-blocking. , Toastr dapat mengatur empat mode pemberitahuan: keberhasilan, kesalahan, peringatan, dan prompt. Lokasi jendela yang cepat dan efek animasi dapat ditetapkan dengan jumlah energi. Di situs web resmi, Anda dapat memilih parameter untuk menghasilkan JS, yang sangat nyaman digunakan.
Alamat plugin adalah: http://codeseven.github.io/toastr/
Ini dapat membuat efek berikut: peringatan, bahaya, kesuksesan, informasi dialog yang cepat, efeknya adalah sebagai berikut.
Penggunaannya kode JS ditunjukkan di bawah ini.
// Tunjukkan peringatan, tidak ada judul toastr.warning ('My Name Is Inigo Montoya. Anda membunuh ayah saya, bersiaplah untuk mati!') // Tunjukkan sukses, judul toastr.success ('bersenang -senang itu menyerbu castle!', 'Miracle Max mengatakan') // tunjukkan judul kesalahan Toastr.Rorror ('saya tidak berpikir itu,' saya tidak berpikir itu. Daftar toastr.clear ()Definisi parameter plug-in ini adalah sebagai berikut.
// mengatur parameter, jika nilai default digunakan, generasi berikut toastr.options = {"closeButton": false, // apakah akan menampilkan tombol tutup "debug": false, // apakah akan menggunakan mode debug "possion": "Toast-Top-full-width", // Posisi jendela pop-up "showduration": HIP-TOP-TOP-PENGHIDUP ", "1000", //The animation time disappearing "timeOut": "5000", //The display time "extendedTimeOut": "1000", //Extended display time "showEasing": "swing", //The animation buffering method during display "hideEasing": "linear", //Animation buffering method when disappearing "showMethod": "fadeIn", //Animation method when displaying "hideMethod": "Fadeout" // Metode animasi saat menghilang}; // Sukses meminta untuk mengikat $ ("#Success"). Klik (function () {toastr.success ("Selamat atas kesuksesan Anda");})Di atas adalah ringkasan saya tentang pengalaman saya dalam memproses dan optimalisasi kotak dialog dan kotak prompt dalam proyek. Saya harap akan sangat membantu bagi semua orang untuk belajar dan meningkatkan antarmuka web. Jika Anda ingin mengetahui informasi lebih lanjut, harap perhatikan situs web Wulin.com!