Sourceແຈ້ງເຕືອນ
ສະໜອງຂໍ້ຄວາມການຕິຊົມຕາມບໍລິບົດສຳລັບການກະທຳຂອງຜູ້ໃຊ້ທົ່ວໄປດ້ວຍຂໍ້ຄວາມແຈ້ງເຕືອນທີ່ມີຈຳນວນຫຼາຍ ແລະມີຄວາມຍືດຫຍຸ່ນ.
ການແຈ້ງເຕືອນມີໃຫ້ສໍາລັບຄວາມຍາວຂອງຂໍ້ຄວາມ, ເຊັ່ນດຽວກັນກັບປຸ່ມປິດທາງເລືອກ. ສໍາລັບການຄໍເຕົ້າໄຂ່ທີ່ທີ່ເຫມາະສົມ, ໃຫ້ໃຊ້ຫນຶ່ງໃນແປດ ຫ້ອງຮຽນສະພາບການ ທີ່ຕ້ອງ ການ (ເຊັ່ນ, .alert-success
). ສຳລັບການຍົກເລີກໃນແຖວ, ໃຫ້ໃຊ້ການ ແຈ້ງເຕືອນ jQuery plugin .
ແຈ້ງເຕືອນຂັ້ນຕົ້ນແບບງ່າຍໆ—ລອງເບິ່ງ!
ແຈ້ງເຕືອນຂັ້ນສອງແບບງ່າຍໆ—ລອງເບິ່ງ!
ການແຈ້ງເຕືອນຄວາມສຳເລັດແບບງ່າຍໆ—ລອງເບິ່ງ!
ການເຕືອນໄພອັນຕະລາຍແບບງ່າຍໆ—ລອງເບິ່ງ!
ການແຈ້ງເຕືອນແບບງ່າຍໆ—ລອງເບິ່ງ!
ແຈ້ງເຕືອນຂໍ້ມູນງ່າຍໆ—ກວດເບິ່ງມັນອອກ!
ການເຕືອນໄຟແບບງ່າຍໆ—ລອງເບິ່ງ!
ການເຕືອນຄວາມມືດແບບງ່າຍໆ—ລອງເບິ່ງ!
ບົ່ງບອກຄວາມໝາຍກັບເທັກໂນໂລຍີຊ່ວຍເຫຼືອ
ການນໍາໃຊ້ສີເພື່ອເພີ່ມຄວາມຫມາຍພຽງແຕ່ສະຫນອງການສະແດງໃຫ້ເຫັນ, ທີ່ຈະບໍ່ໄດ້ຮັບການນໍາໃຊ້ເຕັກໂນໂລຊີການຊ່ວຍເຫຼືອ - ເຊັ່ນ: ຕົວອ່ານຫນ້າຈໍ. ໃຫ້ແນ່ໃຈວ່າຂໍ້ມູນທີ່ສະແດງໂດຍສີແມ່ນເຫັນໄດ້ຊັດເຈນຈາກເນື້ອຫາຂອງມັນເອງ (ເຊັ່ນ: ຂໍ້ຄວາມທີ່ເຫັນໄດ້), ຫຼືຖືກລວມຜ່ານວິທີການທາງເລືອກ, ເຊັ່ນ: ຂໍ້ຄວາມເພີ່ມເຕີມທີ່ເຊື່ອງໄວ້ກັບ .sr-only
ຊັ້ນ.
ໃຊ້ .alert-link
ຫ້ອງຮຽນຜົນປະໂຫຍດເພື່ອສະຫນອງການເຊື່ອມຕໍ່ສີທີ່ກົງກັນຢ່າງໄວວາພາຍໃນການແຈ້ງເຕືອນໃດໆ.
ການແຈ້ງເຕືອນຄວາມສຳເລັດແບບງ່າຍໆດ້ວຍ
ລິ້ງຕົວຢ່າງ . ໃຫ້ມັນຄລິກຖ້າຫາກວ່າທ່ານຕ້ອງການ.
ການແຈ້ງເຕືອນຂໍ້ມູນແບບງ່າຍໆດ້ວຍ
ລິ້ງຕົວຢ່າງ . ໃຫ້ມັນຄລິກຖ້າຫາກວ່າທ່ານຕ້ອງການ.
ການແຈ້ງເຕືອນຍັງສາມາດມີອົງປະກອບ HTML ເພີ່ມເຕີມເຊັ່ນ: ຫົວຂໍ້, ວັກ ແລະຕົວແບ່ງ.
ເຮັດໄດ້ດີ!
ອ້າວ, ເຈົ້າອ່ານຂໍ້ຄວາມແຈ້ງເຕືອນອັນສຳຄັນນີ້ສຳເລັດແລ້ວ. ຂໍ້ຄວາມຕົວຢ່າງນີ້ຈະແລ່ນຕໍ່ໄປອີກເລັກນ້ອຍເພື່ອໃຫ້ທ່ານສາມາດເບິ່ງວ່າໄລຍະຫ່າງພາຍໃນການແຈ້ງເຕືອນເຮັດວຽກກັບເນື້ອຫາປະເພດນີ້ແນວໃດ.
ທຸກຄັ້ງທີ່ເຈົ້າຕ້ອງການ, ໃຫ້ແນ່ໃຈວ່າຈະໃຊ້ສິ່ງອໍານວຍຄວາມສະດວກດ້ານຂອບເພື່ອຮັກສາສິ່ງທີ່ງາມ ແລະ ກະທັດຮັດ.
ການນໍາໃຊ້ plugin JavaScript ແຈ້ງເຕືອນ, ມັນເປັນໄປໄດ້ທີ່ຈະປິດການແຈ້ງເຕືອນໃດໆໃນແຖວ. ນີ້ແມ່ນວິທີ:
- ໃຫ້ແນ່ໃຈວ່າທ່ານໄດ້ໂຫລດ plugin ແຈ້ງເຕືອນ, ຫຼື Bootstrap JavaScript ທີ່ລວບລວມ.
- ຖ້າທ່ານກໍາລັງສ້າງ JavaScript ຂອງພວກເຮົາຈາກແຫຼ່ງ, ມັນ ຕ້ອງການ
util.js
. ສະບັບທີ່ລວບລວມປະກອບມີນີ້.
- ເພີ່ມປຸ່ມປິດແລະ
.alert-dismissible
ຊັ້ນຮຽນ, ເຊິ່ງເພີ່ມ padding ພິເສດໄປທາງຂວາຂອງການແຈ້ງເຕືອນແລະວາງຕໍາແຫນ່ງ .close
ປຸ່ມ.
- ໃນປຸ່ມປິດ, ເພີ່ມ
data-dismiss="alert"
ຄຸນສົມບັດ, ເຊິ່ງກະຕຸ້ນການເຮັດວຽກຂອງ JavaScript. ໃຫ້ແນ່ໃຈວ່າໃຊ້ <button>
ອົງປະກອບກັບມັນສໍາລັບພຶດຕິກໍາທີ່ເຫມາະສົມໃນທົ່ວອຸປະກອນທັງຫມົດ.
- ເພື່ອເຄື່ອນໄຫວການແຈ້ງເຕືອນເມື່ອປິດພວກມັນ, ໃຫ້ແນ່ໃຈວ່າຈະເພີ່ມ
.fade
ແລະ .show
ຫ້ອງຮຽນ.
ທ່ານສາມາດເບິ່ງນີ້ໃນການປະຕິບັດກັບການສາທິດສົດ:
ຍານບໍລິສຸດ guacamole! ທ່ານຄວນກວດເບິ່ງບາງຊ່ອງຂໍ້ມູນຂ້າງລຸ່ມນີ້.
ເປີດໃຊ້ການຍົກເລີກການແຈ້ງເຕືອນຜ່ານ JavaScript:
ຫຼືມີ data
ຄຸນລັກສະນະກ່ຽວກັບປຸ່ມ ພາຍໃນການແຈ້ງເຕືອນ , ດັ່ງທີ່ສະແດງໃຫ້ເຫັນຂ້າງເທິງ:
ໃຫ້ສັງເກດວ່າການປິດການແຈ້ງເຕືອນຈະເອົາມັນອອກຈາກ DOM.
ວິທີການ |
ລາຍລະອຽດ |
$().alert() |
ເຮັດໃຫ້ການແຈ້ງເຕືອນຟັງເຫດການຄລິກຢູ່ອົງປະກອບສືບທອດທີ່ມີ data-dismiss="alert" ຄຸນສົມບັດ. (ບໍ່ຈໍາເປັນເມື່ອໃຊ້ການເລີ່ມຕົ້ນອັດຕະໂນມັດຂອງ data-api.) |
$().alert('close') |
ປິດການແຈ້ງເຕືອນໂດຍການລຶບມັນອອກຈາກ DOM. ຖ້າມີ .fade ຊັ້ນ .show ຮຽນຢູ່ໃນອົງປະກອບ, ການແຈ້ງເຕືອນຈະຫາຍໄປກ່ອນທີ່ມັນຈະຖືກລຶບອອກ. |
$().alert('dispose') |
ທໍາລາຍການແຈ້ງເຕືອນຂອງອົງປະກອບ. |
ປັ໊ກອິນເຕືອນຂອງ Bootstrap ເປີດເຜີຍເຫດການບາງຢ່າງສໍາລັບການເຊື່ອມໂຍງກັບການເຮັດວຽກຂອງການແຈ້ງເຕືອນ.
ເຫດການ |
ລາຍລະອຽດ |
close.bs.alert |
ເຫດການນີ້ໄຟໄຫມ້ທັນທີເມື່ອ close ວິທີການຕົວຢ່າງຖືກເອີ້ນ. |
closed.bs.alert |
ເຫດການນີ້ຖືກດັບສູນເມື່ອປິດການແຈ້ງເຕືອນແລ້ວ (ຈະລໍຖ້າການປ່ຽນ CSS ສຳເລັດ). |