Tôi có thể tạo kiểu cảnh báo trong javascript không?
|
Mỗi hoạt động trong mô-đun này sẽ liên quan đến việc viết mã JavaScript. Bạn sẽ bắt đầu bằng cách viết một tập lệnh đơn giản, sau đó dần dần xây dựng tập lệnh đó, bổ sung thêm nhiều chức năng cho tập lệnh đó trong các bài học tiếp theo Show
Bắt đầu bằng cách mở javascript tệp danh mục đầu tư của bạn. html bằng trình soạn thảo văn bản ưa thích của bạn Thêm mã JavaScript sau vào phần trên trang web của bạn Đây là một chức năng rất đơn giản. Lưu ý rằng nó trông rất giống với các hàm showTop() và showBottom() của PHP đã được giải thích trong tài liệu Beyond HTML mà bạn đã học trong bài học trước. Hầu hết các ngôn ngữ lập trình hoặc viết kịch bản đều tương tự nhau, bao gồm cả PHP và JavaScript, nhưng có những khác biệt tinh tế trong cú pháp của chúng (các quy tắc về cách viết mã). Một hàm hữu ích có nguồn gốc từ JavaScript là hàm alert(). Chức năng này sẽ hiển thị văn bản trong hộp thoại bật lên trên màn hình Trước khi chức năng này có thể hoạt động, trước tiên chúng ta phải gọi hàm showAlert(). Các hàm JavaScript được gọi để phản hồi các sự kiện. Khi trang tải hoặc khi người dùng nhấp vào, di chuột qua hoặc tab đến một liên kết cụ thể, đây đều là các sự kiện. Chúng tôi có thể hướng dẫn JavaScript theo dõi các sự kiện này và nếu hoặc khi chúng xảy ra, hãy thực thi chức năng đã chỉ định Ví dụ: giả sử chúng ta muốn thực thi hàm showAlert() sau khi phần nội dung của trang web được tải đầy đủ. Một cách để làm điều đó là thêm thuộc tính onload vào phần tử của trang web của chúng tôi, như thế này Hãy thử thêm phần trên vào trang web của bạn, sau đó tải trang và xem nó có hoạt động không. Nếu không, bạn có thể có một lỗi. Hãy chắc chắn rằng bạn đã nhập chính xác mọi thứ như nó xuất hiện, bao gồm cả cách viết hoa và dấu chấm câu. Các ngôn ngữ lập trình có thể rất kén chọn đối với những lỗi dường như nhỏ. (Bài sau sẽ nói kỹ hơn về debug). Khi bạn đã làm việc, hãy chuyển sang phần tiếp theo BiếnNhư đã đề cập trong Ngoài HTML, một biến trong ngôn ngữ lập trình hoặc ngôn ngữ kịch bản là một tên tượng trưng đại diện cho một giá trị. Trong ví dụ PHP trước đây của chúng tôi, chúng tôi đã sử dụng biến $thisPage để kiểm soát các tính năng nhất định trong hàm showTop(). Trong PHP, tên biến phải bắt đầu bằng $, nhưng đó không phải là trường hợp trong JavaScript. Hãy xem ví dụ sau, sử dụng một biến có tên myText để tùy chỉnh văn bản được hiển thị trong hộp cảnh báo Hãy thử sửa đổi tập lệnh showAlert() của bạn bằng thông báo cảnh báo tùy chỉnh của riêng bạn. Sau đó kiểm tra nó để chắc chắn rằng nó hoạt động Sử dụng sự kiện onclickCho đến giờ trong bài học này, chúng ta đã gọi hàm showAlert() khi phần nội dung của trang web được tải. Tuy nhiên, thay vào đó, chúng tôi có thể kích hoạt nó bằng các sự kiện khác. Ví dụ: chúng tôi có thể chỉ hiển thị cảnh báo nếu người dùng nhấp vào nút. Thử cái này
Mã mới này thêm một nút vào trang web của bạn. Nút bao gồm thuộc tính onclick, khiến showAlert() được gọi khi người dùng nhấp vào nút. Sự kiện onclick cũng hoạt động cho người dùng bàn phím. Nếu người dùng điều hướng đến nút bằng phím tab, sau đó nhấn enter, điều đó cũng sẽ kích hoạt cảnh báo Trong JavaScript, chúng tôi thường muốn tạo các trang web có các hộp cảnh báo tùy chỉnh để làm cho trang web hấp dẫn hơn. Ngoài ra, một số chức năng bổ sung cũng có thể được thêm vào hộp cảnh báo nhằm mục đích tùy chỉnh. Trong những trường hợp như vậy, việc tạo hộp cảnh báo tùy chỉnh giúp quá trình phát triển của bạn dễ dàng hơn và nâng cao giao diện của trang web Blog này sẽ minh họa các phương pháp tạo hộp cảnh báo tùy chỉnh trong JavaScript Làm cách nào để thiết kế hộp thông báo tùy chỉnh trong JavaScript?Để tạo hộp cảnh báo tùy chỉnh trong JavaScript, bạn có thể sử dụng
Bây giờ chúng ta sẽ đi qua từng cách tiếp cận một Phương pháp 1. Tạo Hộp thông báo tùy chỉnh trong Javascript bằng Thư viện SweetAlertSweetAlert is a JavaScript library used to customize alerts in web applications and websites with the help of a button. You can utilize its “Swal.fire()” method to create an alert box and customize it using CSS. It can be done by specifying the “Content Delivery Network” (CDN) link of the SweetAlert library in the “ < div id= "xác nhận"> Trong bước dưới đây, chúng tôi sẽ bao gồm một nút có tên “Bật hộp cảnh báo tùy chỉnh”. Nó sẽ hoạt động theo cách mà khi nhấp vào nút, sự kiện “onclick” sẽ kích hoạt phương thức “showAlert ()” < đầu vào loại= "nút" value= "Enable Custom Alert Box" onclick= "showAlert();"/> Sau đó, chúng ta sẽ định nghĩa hàm showAlert() chấp nhận hai đối số. Trong phần thân của nó, chúng ta sẽ truy cập div id, tìm nạp thông báo của lớp div và lớp nút. Phương thức “text()” sẽ trả về nội dung văn bản của tin nhắn và phương thức “unbind()” sẽ xóa các trình xử lý sự kiện khỏi tin nhắn. Khi nút của nó được nhấp vào, hộp cảnh báo sẽ ẩn. Cuối cùng, phương thức “click()” sẽ được áp dụng để xử lý thông báo trên hộp cảnh báo
Tạo kiểu cho hộp cảnh báo tùy chỉnh để làm cho nó hấp dẫn
đầu ra Chúng ta đã thảo luận về các phương pháp sáng tạo khác nhau để tạo Hộp thông báo tùy chỉnh trong JavaScript. Bạn có thể áp dụng bất kỳ phương pháp nào theo yêu cầu của bạn Sự kết luậnĐể tạo hộp cảnh báo tùy chỉnh trong JavaScript, bạn có thể sử dụng “thư viện SweetAlert, bao gồm tệp “CDN” để kích hoạt “Swal. fire()” và thư viện “JQuery”, sẽ tải thư viện JQuery trong dự án, lấy các thuộc tính khác nhau của hộp cảnh báo và áp dụng các chức năng khác nhau trên hộp cảnh báo. Bài viết này giải thích các phương pháp tạo hộp cảnh báo tùy chỉnh bằng JavaScript Làm cách nào để tùy chỉnh thông báo cảnh báo trong JavaScript?Để tạo hộp cảnh báo tùy chỉnh trong JavaScript, bạn có thể sử dụng “thư viện SweetAlert, bao gồm tệp “CDN” để kích hoạt “Swal. fire()” và thư viện “JQuery”, sẽ tải thư viện JQuery trong dự án, lấy các thuộc tính khác nhau của hộp cảnh báo và áp dụng các chức năng khác nhau trên hộp cảnh báo
Chúng tôi có thể thay đổi màu của hộp cảnh báo trong JavaScript không?Tạo Hộp cảnh báo tùy chỉnh bằng JavaScript
. Người lập trình chỉ cần thay đổi thuộc tính hiển thị hoặc kiểu của hộp cảnh báo khi muốn bật và ẩn hộp cảnh báo. programmers can set the custom background color for the alert div. Programmers just need to change the display property or style of the alert box when they want to popup and hide the alert box.
Làm cách nào để tùy chỉnh hộp cảnh báo bằng CSS?Chúng tôi sẽ gán một lớp cho hộp cảnh báo, sau đó, chúng tôi thiết kế lớp cụ thể đó trong CSS . Trong ví dụ này, lớp là một thùng chứa. Để thiết kế button chúng ta sẽ sử dụng thẻ button trong CSS để thiết kế. Và các thông báo xuất hiện cũng có thể được trang trí như chúng ta đính kèm một lớp và cũng có thể thiết kế điều đó.
Làm cách nào để chỉnh sửa hộp cảnh báo JavaScript?Không thể chỉnh sửa tiêu đề hộp cảnh báo JavaScript do vấn đề bảo mật. Tuy nhiên, để chỉnh sửa hộp cảnh báo để nó hoạt động trên tất cả các trình duyệt web, hãy sử dụng Hộp thoại phương thức JavaScript tùy chỉnh hoặc plugin jQuery .
|
