Vui vẻ với các trình cắm thêm jQuery - núm vú

Thư viện jQuery thật ấn tượng, và khi bạn thêm các thư viện jQuery UI và jQuery Mobile, bạn có thể thấy công cụ này chính xác như thế nào. Nhưng đó không phải là tất cả. Các nhà phát triển của jQuery được xây dựng trong một cơ chế mở rộng đáng kinh ngạc khiến cho các bên thứ ba dễ dàng thêm các phần mở rộng mới gọi là plug - trong đến jQuery.

Các chi tiết về mỗi plug-in khác nhau, nhưng nói chung, bạn phải làm những điều dưới đây để làm cho chúng hoạt động:

1. Liên kết đến jQuery.

   Tất cả các plugin này mở rộng chức năng của jQuery, vì vậy chúng bắt đầu bằng giả định rằng bạn đang sử dụng jQuery trong trang web của bạn.

2. Tải xuống một thư viện bổ sung.

   Các trình cắm là tất cả các tệp JavaScript chủ yếu, vì vậy, bạn có thể cài đặt chúng trên máy chủ của riêng mình hoặc tạo liên kết. Một số plugin bao gồm các tệp bổ sung và hướng dẫn, vì vậy hãy chắc chắn kiểm tra các chi tiết trên trang chính của trình bổ sung.

3. Thêm một hàm init ().

   Hầu hết các trang jQuery đều có một số kiểu khởi tạo và cần phải khởi tạo gần như mọi trình cắm thêm. Đảm bảo thêm một hàm init () theo cách thông thường.

4. Gọi hàm jQuery thích hợp.

   Hầu hết các trình cắm thêm đơn giản thêm các chức năng mới vào jQuery. Đối với hầu hết các phần, chạy một plug-in chỉ đơn giản đòi hỏi phải áp dụng các hàm jQuery mới cho một node hoặc các nút trên trang của bạn.

Hiện có hàng trăm và hàng trăm plugin tuyệt vời. Bạn có thể thấy một loạt chúng tại Andy's Books. Bạn có thể tìm thấy nhiều trình cắm thêm khác tại Thư viện Trình cắm của jQuery.

ipwEditor

Trình cắm thêm mát này làm cho một phần của trang web của bạn có thể chỉnh sửa. Bạn có thể chọn một hình thức đơn giản của chỉnh sửa hoặc một cái gì đó tinh vi hơn với các công cụ FCKedit. (Sau khi bạn bắt đầu chơi với công cụ này, bạn sẽ nhận ra nó ngay lập tức bởi vì bạn có thể đã sử dụng nó hàng chục lần với tư cách người dùng). IPWEditor không lưu các trang của bạn. Bạn vẫn cần một số loại AJAX và phía máy chủ mã hóa để làm điều đó. Tuy nhiên, đây là một cách rất dễ dàng để xây dựng một CMS đơn giản.

Flot

Đôi khi các trang web của bạn cần hiển thị một số loại dữ liệu. Có một số plug-in đồ họa mạnh mẽ mà bạn có thể sử dụng. Một lựa chọn dễ dàng và mạnh mẽ được gọi là Flot.

Chương trình flot cho phép bạn xây dựng một biểu đồ từ một dãy các điểm dữ liệu 2D. Bạn có thể trích xuất dữ liệu từ cơ sở dữ liệu, thu thập nó từ người dùng, hoặc bất cứ điều gì. Trình cắm thêm flot tạo ra một khung vải và tạo ra một trong một số biểu đồ chuẩn. Đây là một công cụ mạnh mẽ nếu bạn cần làm đồ thị thời gian thực trên trang web của mình.

Cloud

Trong những năm gần đây, nó đã trở nên phổ biến để cung cấp dữ liệu trực quan , hoặc cách để minh họa dữ liệu.Một cơ chế như vậy là tag cloud . Về cơ bản công cụ này đặt một số từ trong các vị trí bán ngẫu nhiên. Trong một đám mây tag điển hình, vị trí, kích thước và màu sắc của từ được sử dụng để biểu thị sức mạnh tương đối và mối quan hệ của các từ. Trình cắm thêm jQuery trên đám mây giúp bạn dễ dàng tạo các đám mây từ khóa của riêng mình. Bạn có thể chuyển đổi bất kỳ danh sách HTML nào sang một đám mây từ khóa. Chỉ cần thêm một thuộc tính giá trị tùy chọn vào mỗi phần tử

của danh sách, và trình cắm sẽ tự động thay đổi kích thước và trọng lượng của phần tử theo giá trị.

Tablesorter

Các chương trình AJAX thường liên quan đến việc lấy dữ liệu, thường được hiển thị trong một bảng HTML. Trình bổ sung tablesorter cho phép người dùng dễ dàng sắp xếp bảng bằng cách nhấp vào một tiêu đề.

Khi người dùng nhấp vào tiêu đề tên đầu tiên, bảng sẽ được sắp xếp theo tên theo thứ tự abc. Nhấp vào tiêu đề tên một lần nữa để sắp xếp theo tên theo thứ tự nghịch. Các hành vi mặc định của tablesorter cho phép bạn sắp xếp theo bất kỳ lĩnh vực tiêu đề.

Droppy

Các menu thả xuống đã trở thành công cụ hữu ích quan trọng trong các trang web. Có hàng trăm plugin jQuery để xử lý tính năng này. Một lựa chọn tốt là droppy vì nó rất dễ sử dụng.

Hầu hết các hệ thống định vị là những danh sách liên kết lồng nhau. Trình cắm thêm droppy chỉ cần lấy một ul với một bó các liên kết (lồng nhau như sâu như bạn muốn) và biến nó thành một trình đơn thả xuống định dạng độc đáo.

Galleria

Phòng trưng bày hình ảnh là một chủ đề plugin phổ biến khác. Nhiều phòng trưng bày hình ảnh có sẵn để chơi với. Galleria là một thư viện hình ảnh phổ biến, mạnh mẽ, và không yêu cầu bất kỳ kịch bản phía máy chủ.

Thư viện hình ảnh mặc định có một số tính năng tuyệt vời:

• Hình ảnh được tải trước: Mỗi hình ảnh được tải vào bộ nhớ khi trang khởi tạo, do đó sẽ không có sự chậm trễ khi người dùng chuyển giữa các hình ảnh.

• Công cụ thư viện tự động tạo các hình thu nhỏ: Các hình ảnh chỉ mục nhỏ hơn được tạo tự động và thêm vào trang.

• Nhấp vào hình thu nhỏ mở rộng nó vào khu vực xem: Khu vực xem lớn hơn chứa một phiên bản lớn hơn của hình ảnh hiện tại.

• Nhấp vào khu vực xem cho phép bạn xem hình ảnh tiếp theo: Các hành vi mặc định cho phép bạn dễ dàng chu kỳ hình ảnh bằng chuột.

• Đầu ra dựa trên CSS: Sử dụng tệp CSS kèm theo để quản lý việc hiển thị trang của bạn, bao gồm cách thức và vị trí của hình thu nhỏ, kích thước hình ảnh hiển thị lớn hơn và nhiều hơn nữa.

• Nó có nhiều lựa chọn: Các Galleria plug-in là rất tùy biến. Nó có nhiều tùy chọn nâng cao. Kiểm tra tài liệu để biết thêm.

Sử dụng Galleria giống như bất kỳ plugin jQuery nào khác. Thêm các kịch bản thích hợp, viết một số HTML cơ bản và thêm một nút jQuery ma thuật:

1. Nhập các tập lệnh.

   Bạn sẽ cần jQuery như mọi khi, cũng như jquery. galleria và galleria. css CSS style sheet.

2. Tạo một danh sách các hình ảnh.

   Làm cho mỗi mục trong danh sách một hình ảnh.

3. Thêm nút galleria () vào danh sách.

   Đó thực sự là tất cả những gì bạn cần làm.

4. Chơi với các tùy chọn.

   Xem qua tài liệu hướng dẫn cho một số tùy chọn tuyệt vời, bao gồm khả năng sử dụng hình thu nhỏ tùy chỉnh, chỉ định vùng chứa đầu ra của chính bạn và chạy các chức năng gọi lại khi người dùng chọn hình ảnh hoặc hình thu nhỏ.