Video: Bài 14: Hiệu ứng load từng phần tử - thư viện TweenMax || khóa học jQuery 2025
Việc viết mã jQuery UI không phải là khó khăn, nhưng việc nhận đúng phần của thư viện có thể hơi khó hiểu đối với các lập trình HTML5 và CSS3. Thư viện jQuery UI lớn hơn nhiều so với gói jQuery chuẩn, vì vậy bạn có thể không muốn bao gồm toàn bộ điều nếu bạn không cần nó.
Các phiên bản trước của jQuery UI cho phép bạn tải toàn bộ gói nhưng lưu trữ từng phần tử trong một tệp JavaScript riêng biệt. Thường có một nửa tá các thẻ tập lệnh khác nhau hoạt động chỉ để có được các yếu tố khác nhau tại chỗ.
Tồi tệ hơn, một số vấn đề phụ thuộc đã tồn tại, vì vậy bạn cần đảm bảo rằng bạn đã cài đặt một số gói trước khi bạn sử dụng các gói khác. Điều này làm cho một thư viện đơn giản khá phức tạp để thực sự sử dụng.
May mắn thay, các phiên bản mới nhất của giao diện jQuery làm cho quá trình này khá đơn giản:
-
Chọn (hoặc tạo) chủ đề của bạn.
Sử dụng trang themeRoller để chọn nơi bắt đầu từ thư viện mẫu. Sau đó, bạn có thể tuỳ chỉnh chủ đề chính xác để thực hiện bất cứ điều gì bạn muốn (thay đổi màu sắc, phông chữ, và các yếu tố khác).
-
Tải về chủ đề.
Chủ đềRoller có nút tải xuống. Nhấp vào liên kết này khi bạn đã sẵn sàng tải chủ đề của mình.
-
Chọn các phần tử bạn muốn.
Khi bạn lần đầu tiên bắt đầu dự án, có thể bạn sẽ chọn tất cả các phần tử. Nếu bạn thấy rằng trang đang tải quá chậm, bạn có thể xây dựng một phiên bản nhỏ hơn chỉ chứa các yếu tố bạn cần. Bây giờ, chọn mọi thứ.
-
Tải xuống tệp.
Sau khi bạn đã chọn các phần tử bạn muốn, bạn có thể tải chúng xuống trong một tệp zip.
-
Cài đặt nội dung của tệp zip vào thư mục làm việc của bạn.
Tệp zip chứa một số tệp và thư mục. Sao chép thư mục css và js vào thư mục nơi các trang web của bạn sẽ được (thường là thư mục public_html hoặc htdocs). Bạn không cần sao chép thư mục bó phát triển hoặc chỉ mục. trang html.
-
Nếu bạn cài đặt nhiều chủ đề, chỉ sao chép thông tin chủ đề từ các chủ đề bổ sung.
Tất cả các chủ đề sử dụng cùng một mã JavaScript. Chỉ có CSS (và các tệp hình ảnh liên quan) thay đổi. Nếu bạn muốn có nhiều chủ đề trong dự án của bạn, chỉ cần sao chép nội dung CSS. Mỗi chủ đề sẽ là một thư mục con khác của thư mục chính của CSS.
-
Liên kết đến tệp CSS.
Sử dụng kỹ thuật liên kết tiêu chuẩn để liên kết đến tệp CSS do jQuery UI tạo. Bạn cũng có thể liên kết đến các tệp CSS của riêng bạn hoặc sử dụng nội bộ CSS ngoài CSS tùy chỉnh. Hãy chắc chắn rằng bạn có được con đường bên phải.
-
Liên kết tới tệp JavaScript.
Bộ công cụ jQuery UI cũng cài đặt hai tệp JavaScript: thư viện jQuery chuẩn và thư viện jQuery UI. Theo mặc định, cả hai tệp này đều được cài đặt trong thư mục js. Bạn sẽ cần phải liên kết đến cả hai tệp. Đôi khi bạn sẽ thấy các tệp được thu nhỏ nhất bên cạnh các phiên bản thông thường. Phiên bản được thu nhỏ sẽ có min min. Một trong hai phiên bản là tốt, nhưng phiên bản thu nhỏ sẽ tải nhanh hơn.
Nếu cái gì đó không hoạt động đúng, hãy kiểm tra đường dẫn tệp của bạn một lần nữa. Hầu như luôn luôn, những vấn đề nảy sinh vì bạn chưa liên kết đến tất cả các tệp đúng. Ngoài ra, lưu ý rằng các tệp CSS được tạo bởi giao diện jQuery cũng bao gồm các hình ảnh. Hãy chắc chắn rằng chủ đề của bạn có một thư mục hình ảnh liên quan, hoặc dự án của bạn có thể không hoạt động chính xác. Nếu bạn đã sao chép toàn bộ các thư mục CSS và JS từ việc tải xuống, bạn nên sử dụng tốt.
