Javascript Library – Toast Notifications với “Toastr”

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.