เครื่องมือที่ต้องใช้ทำเว็บด้วย Bootstrap เพื่อให้ทำงานได้อย่างรวดเร็ว
กำหนดวันที่เริ่มต้นของ Boostrap 4 DatePicker
$(".DateRightTranfer, .DateComReceiver").datepicker({ format: "dd/mm/yyyy", autoclose: true, startDate: "+1d", });
การทำเมนู Dropdown สำหรับ Bootstrap 4
.dropdown:hover .dropdown-menu { display: block; margin-top: 0; /*remove the gap so it doesn-t close*/ }
การทำตัวแจ้งเตือน Notify ของ Bootstrap
วิธีใช้: showNotify(["success", "warning", "danger"], [หัวข้อ], [รายละเอียด ถ้ามี]) function showNotify(textType = "success", textTitle = "", textMessage = "") { $.notify( { title: textTitle, message: textMessage, }, { type: textType, allow_dismiss: true, delay: 500, animate: { enter: "animated fadeInDown", exit: "animated fadeOutUp", }, onShow: function () { this.css({ width: "auto", height: "auto" }); }, } ); }
การแสดงป็อปอัพ (Popover) ขณะ Mouse เลื่อนไปหาปุ่ม
Bootstrap 4 ให้เพิ่ม Bundle Source:
bootstrap.bundle.min.js1. แท็กและใส่ข้อความที่ต้องการแสดง
data-toggle="popover" data-content="[ข้อความที่ต้องการให้แสดง]"
2. ใส่แท็กไว้ใน Document Ready
$('[data-toggle="popover"]').popover();
3. ตัวเลือกเพิ่มเติม
3.1 โชว์ป็อปอัพขณะเม้าท์เลื่อนไปหาใชแท็ก
data-trigger="hover"
3.2 โชว์ป็อปอัพไว้ด้านบน
data-placement="top"
4. หากต้องการให้แสดงป็อปอัพเลยทันที
$("#popover").popover({ trigger: "hover" });
ทำ checkbox ให้ดูสวยงาม (ฺBoostrap Custom Checkbox)
div class="custom-control custom-checkbox custom-control-inline" input type="checkbox" class="custom-control-input form-check-input" label class="custom-control-label" ตัวเลือก 1
ทำงานหลังจากปิด เปิด Bootrap Modal แล้วสามารถ run Javascript คำสั่งต่อไปได้
//on show $("#myModal").on("shown.bs.modal", function () { // do something… }); //on hide $("#myModal").on("hidden.bs.modal", function () { // do something… });
Boostrap DatePicker กำหนดวันที่เริ่มต้นและวันที่สิ้นสุดแบบเรียงวัน มีข้อดีคือจะไฮไลด์ช่วงวันที่ให้ทราบ
ดาวโหลด Plug-in: https://eternicode.github.io/bootstrap-datepicker/
$(".input-daterange").datepicker({ format: "dd/mm/yyyy", language: "th", todayBtn: "linked", autoclose: true, });
Boostrap DatePicker กำหนดวันที่เริ่มต้นและวันที่สิ้นสุด(ตามเหตุการ changeDate คือขณะผู้ใช้คลิกเปลี่ยนวันที่)
$("#startdate") .datepicker({ format: "dd/mm/yyyy", language: "th", todayBtn: "linked", autoclose: true, }) .on("changeDate", function (selected) { var minDate = new Date(selected.date.valueOf()); $("#enddate").datepicker("setStartDate", minDate); }); $("#enddate") .datepicker({ format: "dd/mm/yyyy", language: "th", }) .on("changeDate", function (selected) { var maxDate = new Date(selected.date.valueOf()); $("#startdate").datepicker("setEndDate", maxDate); });
แก้ปัญหา Boostrap DateTimePicker ไอคอนลูกศรไม่แสดง ให้เราแทนที่ด้วยไอคอนฟรี จาก Fontawesome 4.7
ดาวโหลด Plug-in: https://getdatepicker.com/4/Installing/
let val_minDate = new Date(); val_minDate.setDate(val_minDate.getDate() - 1); $("#input-DateVisit").datetimepicker({ format: "DD/MM/YYYY", minDate: val_minDate, useCurrent: true, icons: { time: "fa fa-clock-o", date: "fa fa-calendar", up: "fa fa-chevron-up", down: "fa fa-chevron-down", previous: "fa fa-chevron-left", next: "fa fa-chevron-right", today: "fa fa-calendar-check-o", clear: "fa fa-trash-o", close: "fa fa-times-circle", }, });
การรับค่าเมื่อผู้ใช้เปลี่ยนวันที่
$("#deal-input-DateCreate").on("dp.change", function (e) { let valDateCreate = e.date.format("DD/MM/YYYY"); console.log("objInput =>", valDateCreate); });
สลับสี List Group
ul.list-group.list-group-striped li:nth-of-type(odd){ background: #E5E5E5; } ul.list-group.list-group-striped li:nth-of-type(even){ background: white; } ul.list-group.list-group-hover li:hover{ background: #FFFDDA; }
ทำ Custom Select ให้สวยงาม ด้วย Bootstrap 4
ส่วนของ Style มีดังนี้
.border-red { border: 1px solid #FF0000; } /*the container must be positioned relative:*/ .custom-select { position: relative; font-family: Tahoma, "sans-serif", Arial; padding: initial; } .custom-select { display: inline-block; width: 100%; height: auto; padding: initial; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #495057; vertical-align: middle; background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e) no-repeat right .75rem center/8px 10px"); border: initial; border-radius: .25rem; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .custom-select select { display: none; /*hide original SELECT element:*/ } /*style the arrow inside the select element:*/ .custom-select .select-selected:after { position: absolute; content: ""; top: 14px; right: 10px; width: 0; height: 0; border: 6px solid transparent; border-color: #f00 transparent transparent transparent } /*point the arrow upwards when the select box is open (active):*/ .custom-select .select-selected.select-arrow-active:after { border-color: transparent transparent #f00 transparent; top: 7px; } .custom-select .select-selected.select-arrow-active { border: 1px solid #FF0000; } /*style the items (options), including the selected item:*/ .custom-select .select-items div { color: #333333; padding: 8px 16px; cursor: pointer; user-select: none; border: 1px solid #e2e2e2; -webkit-box-shadow: 1px -1px 4px 0px rgba(0,0,0,0.07); -moz-box-shadow: 1px -1px 4px 0px rgba(0,0,0,0.07); box-shadow: 1px -1px 4px 0px rgb(0,0,0,0.07); } .custom-select .select-selected { color: #333333; padding: 8px 16px; cursor: pointer; user-select: none; background-color: white; border-radius: 5px; border: 1px solid #FF0000; font-size: 0.85em; } /*style items (options):*/ .custom-select .select-items { position: absolute; background-color: white; top: 100%; left: 0; right: 0; z-index: 99; font-size: 0.85em; } /*hide the items when the select box is closed:*/ .custom-select .select-hide { display: none; } .custom-select .select-items div:hover, .same-as-selected { background-color: rgba(0, 0, 0, 0.1); } .custom-select .select-box-shadow { -webkit-box-shadow: 10px 10px 5px -7px rgba(0,0,0,0.45); -moz-box-shadow: 10px 10px 5px -7px rgba(0,0,0,0.45); box-shadow: 10px 10px 5px -7px rgba(0,0,0,0.45); }
ส่วนของ Javascript มีดังนี้
var x, i, j, l, ll, selElmnt, a, b, c; /*look for any elements with the class "custom-select":*/ x = document.getElementsByClassName("custom-select"); l = x.length; for (i = 0; i < l; i++) { selElmnt = x[ i ].getElementsByTagName("select")[0]; ll = selElmnt.length; /*for each element, create a new DIV that will act as the selected item:*/ a = document.createElement("DIV"); a.setAttribute("class", "select-selected"); a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML; x[ i ].appendChild(a); /*for each element, create a new DIV that will contain the option list:*/ b = document.createElement("DIV"); b.setAttribute("class", "select-items select-hide"); for (j = 1; j < ll; j++) { /*for each option in the original select element, create a new DIV that will act as an option item:*/ c = document.createElement("DIV"); c.innerHTML = selElmnt.options[j].innerHTML; c.addEventListener("click", function(e) { /*when an item is clicked, update the original select box, and the selected item:*/ var y, i, k, s, h, sl, yl; s = this.parentNode.parentNode.getElementsByTagName("select")[0]; sl = s.length; h = this.parentNode.previousSibling; for (i = 0; i < sl; i++) { if (s.options[ i ].innerHTML == this.innerHTML) { s.selectedIndex = i; h.innerHTML = this.innerHTML; y = this.parentNode.getElementsByClassName("same-as-selected"); yl = y.length; for (k = 0; k < yl; k++) { y[k].removeAttribute("class"); } this.setAttribute("class", "same-as-selected"); break; } } h.click(); }); b.appendChild(c); } x[ i ].appendChild(b); a.addEventListener("click", function(e) { /*when the select box is clicked, close any other select boxes, and open/close the current select box:*/ e.stopPropagation(); closeAllSelect(this); this.nextSibling.classList.toggle("select-hide"); this.classList.toggle("select-arrow-active"); }); } function closeAllSelect(elmnt) { /*a function that will close all select boxes in the document, except the current select box:*/ var x, y, i, xl, yl, arrNo = []; x = document.getElementsByClassName("select-items"); y = document.getElementsByClassName("select-selected"); xl = x.length; yl = y.length; for (i = 0; i < yl; i++) { if (elmnt == y[ i ]) { arrNo.push(i) } else { y[ i ].classList.remove("select-arrow-active"); } } for (i = 0; i < xl; i++) { if (arrNo.indexOf(i)) { x[ i ].classList.add("select-hide"); } } } function setCustomSelectVal( id, val) { let $this = $("#"+id); //set $this.val(val); //get let $selected = $( "#"+id+' [value="'+val+'"]' ); //get let textLabel = $selected.text(); //show text let $parentDiv = $this.closest("div.custom-select"); $parentDiv.find("div.select-selected").text(textLabel); //set active $.each($parentDiv.find("div.select-items div"), function( index, value ) { let $this = $(this); let text = $this.text(); if( text==textLabel ){ $this .removeClass( "same-as-selected" ) .addClass( "same-as-selected" ) ; return false; } }); }//func /*if the user clicks anywhere outside the select box, then close all select boxes:*/ document.addEventListener("click", closeAllSelect);
ทำ Big Radio and Checkbox ให้มีขนาดใหญ่และสวยงามได้ทันที ด้วย Bootstrap 4
.custom-radio .custom-control-label::before { /* Radio=50, Checkbox=0 */ border-radius: 50%; } /*Big Radio*/ .custom-control-label::after { position: absolute; top: .25rem; left: 0; display: block; width: 24px; height: 24px; content: ""; background-repeat: no-repeat; background-position: center center; background-size: 50% 50%; } .custom-control-label::before { position: absolute; top: .25rem; left: 0; display: block; width: 24px; height: 24px; pointer-events: none; content: ""; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-color: #fcfcfc; border: 1px solid #8d8d8d; }
Bootstrap Notify ขึ้นป็อปอัพแจ้งผู้ใช้ทราบเมื่อโปรแกรมทำงานเสร็จแล้ว
http://bootstrap-notify.remabledesigns.com/
// แสดงข้อความ $.notify('ข้อความ เสร็จแล้ว', { type: 'success', allow_dismiss: true, showProgressbar: false }); // แสดงข้อความ 3 วินาทีแล้วปิดอัตโนมัติ setTimeout(function () { $.notifyClose(); }, 3000);
ตัวอย่าง Bootstrap Notify
Bootstrap Tour แนะนำเครื่องมือต่าง ๆ บนเว็บให้ผู้ใช้ทราบ
http://www.sonisatima.org/analyst/assets/bower_components/bootstrap-tour/docs/index.html
ตัวอย่าง Bootstrap Tour
Bootstrap 4 จัดรูปแบบเมนูสำเร็จรูปยอดนิยม
แนะนำเว็บแรกจากเว็บ w3schools เช่น สไลด์รูปภาพ เมนู ปุ่ม
เว็บสอง tutorialrepublic เป็น Snippets สำเร็จรูปพร้อมใช้
ตัวอย่าง Bootstrap Snippets
Bootstrap Select Picker เสริมความสามารถให้ Select Box มีช่องค้นหา
== เลือกหลายรายการ
$('#myselect').selectpicker(); $('#myselect').selectpicker('val', [1,3,4]);
โหลดอัตโนมัติด้วย class พร้อมช่องค้นหา
select class="selectpicker" data-live-search="true"ตัวอย่าง
== รับค่าตอนผู้ใช้เลือก
$('#selectpicker').selectpicker({ liveSearch: true, maxOptions: 1 }) .on('change', function(e){ //ใช้ได้ทั้ง 3 อย่าง console.log( this.value, this.options[this.selectedIndex].value, $(this).find("option:selected").val() ); }) ;ปรับ Boostrap-Select ให้ดูสวยงาม
.bootstrap-select > .dropdown-toggle.bs-placeholder, .bootstrap-select > .dropdown-toggle.bs-placeholder:active, .bootstrap-select > .dropdown-toggle.bs-placeholder:focus, .bootstrap-select > .dropdown-toggle.bs-placeholder:hover { color: #515151; background-color: #e3e9ee; border-color: #d3d9df; -webkit-box-shadow: 10px 10px 5px -7px rgba(0,0,0,0.45); -moz-box-shadow: 10px 10px 5px -7px rgba(0,0,0,0.45); box-shadow: 7px 7px 5px -7px rgba(0,0,0,0.45); font-weight: 500; } .bootstrap-select > .dropdown-toggle { color: #515151; background-color: #e3e9ee; border-color: #d3d9df; -webkit-box-shadow: 10px 10px 5px -7px rgba(0,0,0,0.45); -moz-box-shadow: 10px 10px 5px -7px rgba(0,0,0,0.45); box-shadow: 7px 7px 5px -7px rgba(0,0,0,0.45); } .bootstrap-select .dropdown-toggle .filter-option { padding: 3px; } .bootstrap-select > .dropdown-toggle.bs-placeholder, .bootstrap-select > .dropdown-toggle.bs-placeholder:active, .bootstrap-select > .dropdown-toggle.bs-placeholder:focus, .bootstrap-select > .dropdown-toggle.bs-placeholder:hover { color: #999; border: 1px solid #d5d5d5; }
กำหนดความกว้าง เช่น 500px
.bootstrap-select { max-width: 500px; } .bootstrap-select .dropdown-toggle { background-color: #e7e7e7; } .bootstrap-select .dropdown-menu { max-width: 500px; overflow: hidden; } .bootstrap-select .btn { padding: 10px 10px; }
== javascript ให้ selectpicker อัพเดตข้อมูล
$("#selectpicker").selectpicker('refresh');
== แก้ปัญหา Boostrap Selectpicker เมนูถูกทับ
1. ครอบด้วย class: input-group < div class="input-group first">< select id="selectpicker" data-live-search="true">< option> 2. กำหนด z-index ดังนี้ .input-group.first { z-index: 10; }
อ่านเพิ่มเติม: https://developer.snapappointments.com/bootstrap-select/
ตัวอย่าง