Rumah >hujung hadapan web >tutorial js >Pemalam kotak amaran Bootstrap yang anda mesti pelajari setiap hari kemahiran javascript

Pemalam kotak amaran Bootstrap yang anda mesti pelajari setiap hari kemahiran javascript

WBOY
WBOYasal
2016-05-16 15:04:011389semak imbas

Mesej amaran kebanyakannya digunakan untuk memaparkan maklumat seperti amaran atau mesej pengesahan kepada pengguna akhir. Menggunakan pemalam Alert, anda boleh menambah fungsi penolakan pada semua mesej amaran.

Jika anda ingin merujuk kefungsian pemalam ini secara berasingan, maka anda perlu merujuk alert.js. Sebagai alternatif, seperti yang dinyatakan dalam bab Gambaran Keseluruhan Plugin Bootstrap, anda boleh merujuk bootstrap.js atau versi mini bootstrap.min.js.

1
Anda boleh mendayakan fungsi pemecatan kotak amaran dalam dua cara berikut:
1. Melalui atribut data: Tambah fungsi boleh dibatalkan melalui API Data (API Data) Cuma tambah data-dismiss="alert" pada butang tutup, dan fungsi penutupan akan ditambahkan secara automatik pada kotak amaran.

<a class="close" data-dismiss="alert" href="#" aria-hidden="true">
 &times;
</a>
2. Melalui JavaScript: Tambah fungsi boleh dibatalkan melalui JavaScript:

$(".alert").alert()

2. Contoh mudah
Kotak amaran ialah kotak maklumat pada jam klik.
1. Contoh asas

<div class="alert alert-warning">                   
 <button class="close" type="button" data-dismiss="alert">            
  <span>&times;</span>                     
 </button>                        
 <p>                          
  警告:您的浏览器不支持!                       
 </p>                          
</div>   
2. Tambah kesan fade in dan fade out

a35bfa72b5366bdb9bb6febe35707b28
Jika anda menggunakan JavaScript, anda boleh menggantikan data-dismiss="alert"

//JavaScript 方法

$('.close').on('click', function() {
 $('#alert').alert('close');
})

Terdapat dua jenis acara dalam pemalam Makluman:

//事件,其他雷同

$('#alert').on('close.bs.alert', function() {
 alert('当 close 方法被触发时调用!');
}); 
Untuk maklumat lanjut tentang Bootstrap, sila rujuk topik khas:

Tutorial pembelajaran Bootstrap

Di atas ialah keseluruhan kandungan artikel ini, saya harap ia akan membantu semua orang untuk mempelajari pemalam kotak amaran Bootstrap.

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn