MỞ BÀI:
Vào một ngày đẹp trời nọ trong quá trình code form điền thông tin, tui chợt nhớ mình cần phải thêm phần notification nữa để cho cái form nó có vẻ “professional” hơn, trong quá trình đau đầu đi tìm kiếm một thư viện phù hợp nhất để làm phần notification thay vì chọn cái alert củ chuối của ông thần Javascript thì vô tình tui được cao nhân chỉ điểm cho một thư viện Javascript có tên là “Toastr” . Toastr là một thư viện Javascript dùng cho việc lập trình các notification bất đồng bộ. Để sử dụng Toastr, yêu cầu cần phải có JQuery.
CÁCH CÀI ĐẶT :
EASY:
Để sử dụng toastr, bạn cần phải thêm 2 thư viện css và js của toastr vào header và footer của ứng dụng web của bạn. Các bạn có thể sử dụng CDN bên dưới để add vào source của mình.
Minified CDN Toastr
- //cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js
- //cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css
ADVANCED:
Để tăng thêm phần kịch tính và có thêm kiến thức nhiều hơn về terminal, các bạn có thể add toastr bằng những lệnh bên dưới:
Cài toastr thông qua Bower
bower install toastr
Cài toastr thông qua NPM
npm install --save toastr
CÁCH SỬ DỤNG TOASTR:
Để sử dụng toastr cho phần hiển thị thông báo cho form điền của chúng ta, các bạn chỉ cần gõ thêm vài dòng lệnh nho nhỏ như bên dưới, tuỳ vào mục đích sử dụng để load toastr theo những dạng thông báo khác nhau.
// Display a warning toast, with no title // Hiển thị cảnh báo của toastr không tiêu đề toastr.warning('My name is Inigo Montoya. You killed my father, prepare to die!') // Display a success toast, with a title // Thông báo hiển thị thành công toastr.success('Have fun storming the castle!', 'Miracle Max Says') // Display an error toast, with a title // Thông báo hiển thị lỗi toastr.error('I do not think that word means what you think it means.', 'Inconceivable!') // Immediately remove current toasts without using animation toastr.remove() // Remove current toasts using animation toastr.clear() // Override global options toastr.success('We do have the Kapua suite available.', 'Turtle Bay Resort', {timeOut: 5000})
KẾT LUẬN:
- Toastr là một thư viện Javascript gọn nhẹ phù hợp cho code hiển thị thông báo.
- Giao diện thân thiện.
- Hiệu ứng đẹp mắt.
- Dễ sử dụng.
- Dể cài đặt.