Cấu hình javascript trên html

Cấu hình javascript trên html.

Trong bài viết này mình sẽ nói về việc sử dụng các plugin khi bạn phải làm di làm lại nhiều lần. ta sẽ cấu hình trên html để đỡ tốn công viếc javascript.

1. Sử dung jquery UI

Bước 1: tải thư viện jquery ui theo đường dẫn sau:

https://jqueryui.com/download/

Trang tài liệu của thư viện.

https://jqueryui.com/development/

1. Sử dụng vài thư cái cơ bản trước.

Datepicker:

Viết code như sau:

 

Sau đó chạy thử:

 

 

Mọi thứ đều tốt cho đến khi bạn cần datepicker này ở nhiều chỗ hơn.

Ví dụ 2: ta sẽ tạo ra 4 datepicker.

 

Vậy khi thêm datepicker ta cần thêm code cho javascript

Tôi sẽ sửa lại code như sau:

 

Tôi sẽ thêm class datepicker vào thẻ input.
Tôi sẽ lấy tất cả các thẻ có class datepicker thêm phần datepicker.
 

Phần config cho từng datepicker thì sao?

          Vậy ta cần biết config của datepicker như nào.

                   Cấu hình như sau:

 

          Các thuộc tính sẽ được tạo thành một đối tượng theo dạng JSON.

Vậy ta nên đệ cấu hình này ở đâu?

          + Nếu để trong code javascript thì mỗi cái datepicker ta phải viết code riêng  -> cái này không cần nói.   

          + Nếu để trong html thì ta phải viết như thế nào?

Ta viết như sau:

 

Ta sẽ dụng các thuộc tính có tiền tố data để lưu cấu hình.

Trong phần html ta chỉnh sửa thêm thuộc tinh có data-

 

Trong ví dụ trên ta có dung dateFormat = “dd-nn-yyy”

 

 

Tương tự với các thuộc tính khác ta làm như sau:

 

Khi chạy ta sẽ có kết quả như sau:

 

 

---

Bài Liên Quan

---