Dailog berdasarkan bootstarp

Pengantar Bootstrip

Bootstrap, dari Twitter, saat ini merupakan kerangka kerja front-end yang populer.

Bootstrap didasarkan pada HTML, CSS, dan JavaScript. Ini sederhana dan fleksibel, membuat pengembangan web lebih cepat. Dikembangkan oleh perancang Twitter Mark Otto dan Jacob Thornton, ini adalah kerangka kerja CSS/HTML.

Bootstrap memberikan spesifikasi HTML dan CSS yang elegan, yang ditulis dalam bahasa CSS yang dinamis lebih sedikit. Bootstrap sangat populer sejak diluncurkan dan telah menjadi proyek open source yang populer di GitHub, termasuk berita utama MSNBC NASA. Kerangka kerja yang lebih akrab bagi pengembang seluler domestik, seperti kerangka kerja open source front-end WEX5, juga didasarkan pada kode sumber bootstrap untuk optimasi kinerja.

1.1. Membantu kata kunci dokumen

boostrap boostrap box oaodailog

1.2. Skenario penggunaan

Ketika tombol diklik pada halaman web, pengguna perlu meminta konfirmasi, dan pengguna hanya dapat terus mengeksekusi, atau pengguna mengklik tombol Batal untuk membatalkan eksekusi;

Saat Anda mengklik untuk melihat di halaman web dan data yang ditampilkan perlu ditampilkan menggunakan kotak pop-up, Anda dapat menggunakan oaodailog

1.3. Diagram skematik

Modal Berdasarkan Boostrap3.0, JQuery1.9

1.4. Petunjuk Penggunaan

Mengapa Anda membutuhkan oaodailog?

A. Karena modal yang disediakan oleh BOOSTRAP3.0, kode tersembunyi div modal harus didefinisikan pada halaman terlebih dahulu. Pengguna menulis konten yang akan ditampilkan ke Div. Jika sebuah halaman memiliki beberapa kotak modal, beberapa kotak modal tersembunyi div kode tersembunyi perlu ditulis, yang tidak diragukan lagi berlebihan.

B. Karena modal default tidak memiliki tombol konfirmasi dan pembatalan, tentu saja kita dapat menulis dua tombol di div tersembunyi dari kotak modal, tetapi kita juga perlu menulis JS untuk memantau operasi yang dilakukan setelah tombol konfirmasi diklik. Pada saat yang sama, operasi yang dilakukan oleh tombol konfirmasi terkait dengan data yang diklik oleh pengguna saat pop-up. Bagaimana data dilewati, bootstrap tidak memberi kami.

C. OAodailog versi 1.0.0 terutama memecahkan masalah penggunaan kotak modal bootstrap yang tidak nyaman dan kode yang berlebihan.

Gambar reproduksi:

Mulai

1. Perkenalkan oaodailog.js

Kode:

 <type script = "Text/JavaScript" src = "$ {ctx} /static/jquery/jqueryapi/oaodialog/oao.dialog.js" charset = "utf-8"> </script>

2. Hubungi kode yang menampilkan kotak pop-up

Kode:

 oao.dialog ({title: "Hapus kotak prompt", konten: "Harap konfirmasi apakah itu benar -benar dihapus, itu tidak akan dipulihkan setelah dihapus!", OK: function () {oao.dialog.close ();}});

Ini adalah cara dasar dan paling umum untuk menggunakan kotak pop-up konfirmasi.

1.5. API

oao.dialog (): Metode ini adalah metode untuk menghasilkan kotak pop-up. Parameter yang diteruskan adalah objek JSON. Tentu saja, Anda tidak dapat melewati apa pun, dan kotak pop-up kosong akan muncul, yang tidak masalah. Berikut ini menjelaskan makna dan nilai default dari setiap parameter.

• oao.dialog.close (): Tutup kotak modal

1.6. Fungsi yang akan didukung 1. Saat ini, konten kotak pop-up hanya mendukung teks dan HTML statis, dan tidak mendukung permintaan URL.

2. Saat ini, hanya dua tombol yang dapat ditampilkan paling banyak, dan tombol khusus tidak didukung.

3. Posisi dan ukuran saat ini kotak pop-up tidak mendukung kustomisasi

4. Saat ini, hanya satu kotak pop-up yang dapat muncul sekaligus, dan itu tidak mendukung muncul kotak modal lain di kotak pop-up (Bootstrap Modal tidak didukung di lapisan yang mendasarinya)

Tetap disini, sampai jumpa di versi berikutnya.

 /*!* Oaodialog 1.0.0* Penulis: Xufei* Tanggal: 2015-7-9 1: 32* http: //www.oaoera.com* Hak Cipta © 2014 www.oaoera.com Inc. Semua hak dilindungi undang-undang. Shanghai ICP No. 13024515-1 Shanghai Yixin E-Commerce Co., Ltd. ** Ini dilisensikan di bawah GNU LGPL, versi 2.1 atau lebih baru.* Untuk detailnya, lihat: http://creativecommons.org/licensess/lgpl/2.1/*.oo {oo oin. function (pengaturan) {var defaultSettings = {title: "prompt", konten: "", okval: "konfirmasi", cancalval: "batal", ok: function () {$ ("#oaomodal"). Modal ('hide');}, batal: function () {$ ("#ooomodal"). $ .Extend ({}, DefaultSettings, Pengaturan || {}); return oao.settings;} oao.InitContent = function () {var modelHtml = "<div id =/" oaomodal/"class =/" Modal fade delete_modal/"Tabinindex =/" class = "" "" "" "" aria-laLedby =/"myModallabel/" aria-hidden =/"true/"> "+" <div class =/"modal-dialog/"> "+" <div class =/"modal-content/"> "+" <div class =/"modal-header/" "DATA-DAT/" "DATA/" DATA/"DATA/" DATA/"DATA/" DATA/" aria-label =/"tutup/"> <span aria-hidden =/"true/"> × </span> </button> "+" <h4 class =/"modal-jitle/"> </h4> "+" </div> "+" <div class =/"modal-body/" style = "Text-laign: center;/" <Div class =/"modal-body/" style =/"Text-laign: center;/" class=/"modal-footer/">"+" <button type=/"button/" class=/"btn btn-default modalCancel/"></button>"+" <button type=/"button/" class=/"btn btn-primary modalOK/"></button>"+" </div>"+" </div>"+" </div>"+" </div>";var $ modelhtml = $ (modelhtml); $ (". Modalok", $ modelhtml) .text (oao.settings.okval); $ (". Modalcancel", $ modelHtml) .text (oao .settings.cancalval); $ (". Modal-title", $ modelhtml) .text (oao.settings.title); $ (". Modal-body", $ modelHTM l) .html (oao.settings.content); if (! oao.settings.ok) {$ (". Modalok", $ modelHtml) .remove ();} if (! oao. settings.cancel) {$ (". Modalcancel", $ modelHtml) .remove ();} $ ("body"). append ($ modelHtml);} // metode untuk dialog pop-up oao.dialog = function (pengaturan) {pengaturan = oao.init (pengaturan); oao.initcontent (); // Metode panggilan $ ('#oaomodal'). on ('hidden.bs.modal', function (e) {if (oao.settings.close) {oao.settings.close ();} $ ("#oaomodal"). Remove ();}) if (oao.settings.ok) {$ ("#oAomodal .modalok"). Klik (pengaturan .modalcancel "). Klik (Pengaturan.Cancel);} $ ("#oaomodal "). Modal ('show'). CSS ({" margin-top ": function () {return ($ (this) .height ()/ 2-200);}}) ;;} // Metode tutup dialog ()/ 2-200);}); function () {$ ("#oaomodal"). Modal ('hide');}