Tạo một plugin JQuery. Các chữ viết tắt thường dùng. Plugin jQuery "MollyBlocks" để hiển thị menu xuyên tâm
plugin jQuery s là một trong những thành phần cần thiết khi xây dựng một trang web hoặc bất kỳ ứng dụng web nào. Chúng cho phép bạn mở rộng chức năng của mình. Bài viết này liệt kê các plugin hữu ích nhất năm 2012. Để biết thêm tìm kiếm thuận tiện tất cả các plugin được chia thành các loại sau: Bố cục trang web - plugin, plugin điều hướng, Plugin biểu mẫu, plugin tạo thanh trượt, plugin cho biểu đồ và đồ thị, hiệu ứng cho hình ảnh và các plugin khác. Ngoài ra, trong số các plugin này còn có các plugin sẽ giúp bạn tạo các ứng dụng đáp ứng của mình.
Plugin bố cục trang
Equalize.js là một plugin jQuery cho phép bạn tạo cấu trúc trang web dựa trên khối. Nó cho phép bạn điều chỉnh chiều cao và chiều rộng của bất kỳ phần tử nào.
Một plugin mới dành cho bố cục đáp ứng, Freetile cho phép bạn tạo các phần tử có kích thước bất kỳ mà không cần tạo các cột lưới có kích thước cố định.
Plugin jquery Gridster.JS để xây dựng lưới kéo và thả. Nó cũng có thể được sử dụng để tự động loại bỏ và thêm các phần tử khỏi lưới.
Zoomooz.js là một plugin jQuery dễ sử dụng để phóng to bất kỳ thành phần nào trên trang web. Bạn có thể dễ dàng thêm hiệu ứng thu phóng bằng cách thêm lớp "zoomTarget" vào bất kỳ thành phần HTML nào. Độ phóng đại có thể được đặt lại bằng cách nhấp vào trang. Plugin đã được thử nghiệm trong trình duyệt web IE 9, Safari 3+, Firefox 3.6+, Opera và Chrome.
Wookmark là một plugin để tạo mẫu nhiều cột động.
jQuery HiddenPosition là một plugin cho phép bạn thêm bất kỳ phần tử nào, ngay cả khi nó bị ẩn.
Stellar.js là một plugin jQuery cung cấp hiệu ứng thị sai cho các phần tử.
Một plugin jQuery bổ sung thêm hiệu ứng chuyển trang thực tế khi di chuyển giữa các phần. Tăng tốc phần cứng được sử dụng. Hoạt động trên máy tính bảng và điện thoại thông minh.
Plugin cho kiểu chữ đáp ứng. Nó cho phép bạn sử dụng bộ chọn để tạo ra kích thước phông chữ lý tưởng.
Cho phép bạn xây dựng các chuyển động hoạt hình xung quanh trang web, bao gồm tất cả các chuyển đổi có thể có
Plugin điều hướng
HorizontalNav là một plugin jQuery trải dài menu ngang sao cho vừa với toàn bộ chiều rộng của container. Nếu bạn đã từng cố gắng tạo hiệu ứng kéo dài chính xác menu điều hướng vào vùng chứa CSS cho một dự án thì bạn chắc chắn biết việc thực hiện điều đó để tương thích giữa nhiều trình duyệt khó đến mức nào. Plugin này làm cho nó dễ dàng.
StickMojo là một plugin thanh bên jQuery nhẹ, nhanh và linh hoạt. Nó hoạt động với Firefox, Chrome, Safari và IE8 + (hỗ trợ khá tốt các phiên bản IE cũ hơn).
ddSlick là một plugin cho phép bạn tạo menu thả xuống có hình ảnh và mô tả.
Plugin để tổ chức đơn giản các bảng thả xuống. Plugin hỗ trợ làm việc với cookie để lưu trữ trạng thái của bảng. Trong số các tùy chọn có các hàm trả về để tùy chỉnh quá trình mở và đóng các phần.
Plugin để tạo các khối có thể thu gọn có thể chứa bất kỳ dữ liệu nào trong một không gian giới hạn.
Plugin định hình
Plugin cho phép bạn xác định mức độ phức tạp của mật khẩu.
Plugin JQuery để trực quan hóa quá trình tải xuống tệp. Nó hỗ trợ kéo và thả và tạo bản xem trước tức thì cho ảnh.
Plugin phát hiện và kiểm tra số thẻ tín dụng. Nó cho phép bạn xác định loại thẻ tín dụng.
Plugin để lọc dữ liệu. Bạn có thể lọc dữ liệu theo thẻ và trên nhiều thẻ và danh mục.
Plugin xác thực đầu vào E-mailđể đảm bảo tính chính xác theo danh sách được chuẩn bị trước (ở đây bạn có thể đưa vào những danh sách phổ biến nhất dịch vụ bưu chính mail.ru, yandrex.ru, gmail, v.v.).
Plugin để tạo thanh trượt và băng chuyền
Một plugin cho phép bạn kiểm soát quá trình chuyển đổi bằng chuột, bàn di chuột và bàn phím. Đối với các chuyển đổi mặc định, bạn có thể thêm các chuyển đổi bổ sung cũng có trong tệp nguồn.
thanh trượt ios
iosSlider là một plugin dành cho thanh trượt đa trình duyệt đáp ứng.
RSlider - toàn màn hình thanh trượt thích ứng. VỀNó sẽ tự động điều chỉnh theo chiều rộng của màn hình của bạn.
Fresco là một plugin hộp đèn đáp ứng. Nó có thể được sử dụng để tạo lớp phủ tuyệt đẹp hoạt động tốt trên mọi kích thước màn hình, mọi trình duyệt, mọi thiết bị.
BookBlock: Plugin lật nội dung
BookBlock là một plugin jQuery có thể được sử dụng để tạo các thành phần kiểu tập sách nhỏ cho phép bạn tạo điều hướng kiểu lật trang. Tại đây bạn có thể sử dụng bất kỳ nội dung nào, có thể là hình ảnh hoặc văn bản. Plugin chỉ chuyển đổi cấu trúc khi cần thiết (nói cách khác, chỉ khi lật trang) và sử dụng lớp phủ và bóng để thêm tính chân thực.
Bộ chuyển đổi thanh trượt nhẹ nội dung cung cấp giao diện đơn giản để nhà phát triển tạo hoạt ảnh lật slide 2D hoặc 3D đẹp mắt. Hiện tại có hỗ trợ cho các thuộc tính 3D trong trình duyệt webkit và Firefox. Tất cả các chuyển đổi 2D đã được thử nghiệm trong IE6+ và các chuyển đổi khác trình duyệt hiện đại.
Băng chuyền liên tục với một số tính năng hữu ích.Nó rất dễ dàng để tùy chỉnh và hỗ trợ ngay cả các trình duyệt cũ hơn.
thanh trượt tê giác- khá linh hoạt jQuery plugin trình chiếu. Không chỉ có sẵn nhiều hiệu ứng khác nhau mà còn có thể thêm phong cách riêng, hiệu ứng và chức năng cho thanh trượt.
Sequence là một plugin jQuery để cuộn nội dung theo cách độc đáo và cung cấp cho bạn toàn quyền kiểm soát. Bất kỳ loại nội dung nào cũng có thể được sử dụng; nó sẽ cuộn vô tận. Nó sử dụng đánh dấu ngữ nghĩa và cũng hỗ trợ mẫu đáp ứng và các thiết bị dựa trên công nghệ cảm ứng.
Glisse.js là một thư viện ảnh jQuery đơn giản, đáp ứng nhanh và có khả năng tùy biến cao.
Plugin cho biểu đồ và đồ thị
Morris.js là một thư viện gọn nhẹ sử dụng JQuery và Raphaël để giúp việc vẽ biểu đồ chuỗi thời gian trở nên dễ dàng hơn.
Biểu đồ tổ chức jQuery là một plugin cho phép bạn tạo cấu trúc cây với các phần tử lồng nhau. Dữ liệu được nhập vào một danh sách không có thứ tự lồng nhau, giúp plugin cực kỳ dễ sử dụng.
Plugin kiểu chữ
Bacon.js là một plugin jQuery cho phép bạn bọc văn bản quanh đường cong hoặc đường thẳng Bezier.
Textualizer - Plugin jQuery để tạo hiệu ứng đẹp phía trên văn bản. Hỗ trợ: Chrome, Safari 4+, Firefox 3.5+, IE 6,7,8,9+, Opera 10.6+, Mobile Safari (iOS 4)
SlabText là một plugin jQuery rất hữu ích giúp phân chia từng dòng tiêu đề trước khi thay đổi kích thước từng dòng để điền vào không gian có sẵn theo chiều ngang.
trunk8 là một plugin cắt ngắn văn bản cho JQuery. Cho phép bạn giảm khối lớn văn bản thành một phần nhỏ hơn để kiểm tra sơ bộ.
Plugin tạo hiệu ứng đa dạng cho hình ảnh
Đây là một plugin jQuery sử dụng bộ lọc CSS3 để tạo hiệu ứng nghiêng.
Plugin để thực hiện hiệu ứng của hình ảnh thích ứng.
Plugin jQuery giúp dễ dàng tạo bản đồ hình ảnh. Với công cụ này, mọi bản đồ hình ảnh đều có thể được đánh dấu hoặc chọn và bản đồ có thể được thao tác những cách khác. Nó hoạt động trên tất cả các trình duyệt chính, bao gồm Internet Explorer 6, nó không sử dụng Flash và không yêu cầu bất cứ thứ gì ngoài jQuery. Một số hiệu ứng nâng cao yêu cầu hỗ trợ HTML5 nhưng nó vẫn hoạt động trong các trình duyệt cũ hơn.
Plugin để tích hợp trong các dự án của bạn. Ghi chú có nhiều phòng trưng bày, thanh trượt, menu và các plugin khác.
1. Thanh trượt “Twirlie” jQuery đơn giản
Thanh trượt nhỏ gọn, gọn gàng.
2. Danh mục đầu tư jQuery với hiệu ứng thu phóng
Một cách triển khai danh mục đầu tư thú vị, được tạo bằng cách kết nối hai plugin jQuery: Cloud Zoom và Fancybox. Khi bạn di chuột qua hình thu nhỏ, bản sao phóng to của vùng bên dưới con trỏ sẽ xuất hiện. Nhấp vào hình thu nhỏ sẽ mở thư viện Fancybox, trong đó bạn có thể xem một số hình ảnh kích thước đầy đủ Vì của dự án này trong danh mục đầu tư.
3. Hướng dẫn trang web sử dụng jQuery
Sử dụng plugin thú vị này, bạn có thể giới thiệu cho khách truy cập các chức năng chính của trang web nếu họ truy cập lần đầu tiên. Khi tải trang, một khối xuất hiện ở góc trên bên phải yêu cầu bạn tham quan trang web. Nếu khách truy cập truy cập trang web của bạn lần đầu tiên, họ có thể sử dụng hướng dẫn ngắn gọn để làm quen với các chức năng chính. Điều này sẽ làm tối trang và khối bắt buộcđược đánh dấu ở mỗi bước. Nếu khách truy cập đã từng truy cập trang web của bạn trước đó, họ có thể chỉ cần đóng cửa sổ cung cấp chuyến tham quan trang web.
4. Thư viện nhỏ với jQuery
Hình ảnh sẽ phóng to khi bạn di chuột qua nó.
5. Thanh trượt “Chu trình trình bày” jQuery đẹp mắt
Thanh trượt jQuery với chỉ báo tải hình ảnh. Cung cấp thay đổi tự động slide.
6. Thanh trượt jQuery tuyệt vời với hiệu ứng nền thể tích “Thanh trượt thị sai”
Thanh trượt hình ảnh sử dụng jQuery. Điểm nổi bật của thanh trượt này là chuyển động của nền, bao gồm nhiều lớp, mỗi lớp cuộn với ở tốc độ khác nhau. Kết quả là sự bắt chước hiệu ứng thể tích. Nó trông rất đẹp, bạn có thể tự mình nhìn thấy. Hiệu ứng được hiển thị mượt mà hơn trên các trình duyệt như Opera, Google Chrome,I E.
7. Thay đổi màu nền và màu văn bản bằng jQuery
Màu sắc thay đổi khi bạn di chuột qua nó. Bạn có thể làm cho màu sắc thay đổi ngẫu nhiên.
8. Thư viện Lightbox trang nhã “ppGallery”
9. Trình chiếu jQuery
Trình chiếu có thể mở rộng với sử dụng jQuery. Bạn có thể đặt kích thước trình chiếu phù hợp với mình nhất.
10. Giỏ hàng sử dụng jQuery và PHP
Một giải pháp ban đầu để bán giỏ hàng trong cửa hàng trực tuyến.
11. Thư viện mini jQuery “Thư viện cảm ứng”
12. Menu trượt jQuery có hình ảnh
Để menu xuất hiện, bạn cần nhấp vào mũi tên bên phải góc trên cùng màn hình. Bạn có thể ẩn menu trên trang bằng cách nhấp vào mũi tên tương tự.
13. Plugin jQuery “MollyBlocks” để hiển thị menu xuyên tâm
14. Plugin jQuery “MollyNotes”
Plugin jQuery để hiển thị hình ảnh hoặc nội dung khác một cách bất thường.
15. Thanh trượt jQuery
Việc điều hướng giữa các hình ảnh có thể được thực hiện bằng cách sử dụng các nút “Chuyển tiếp” và “Quay lại” cũng như sử dụng các liên kết đến số hình ảnh, đồng thời việc thay đổi hình ảnh diễn ra với nhiều hiệu ứng hoạt hình khác nhau. tạo kiểu liên kết có thể được viết trong tập tin.
16. Thanh trượt hình ảnh jQuery, plugin “slideJS”
Một thanh trượt jQuery đầy phong cách chắc chắn có thể trang trí cho dự án của bạn.
17. Thanh trượt nội dung jQuery, plugin “slideJS”
Thanh trượt nội dung jQuery: một trong các tùy chọn để sử dụng plugin “slideJS”.
Vậy là bạn đã quen với jQuery và muốn biết cách viết plugin của riêng mình. Tuyệt vời! Bạn đang ở nơi bạn cần đến. Việc mở rộng chức năng của jQuery thông qua các plugin và phương thức là rất mạnh mẽ và có thể giúp bạn và đồng nghiệp của bạn tiết kiệm nhiều giờ phát triển bằng cách gói các hàm được sử dụng phổ biến nhất của bạn vào các plugin. Bài đăng này sẽ phác thảo trong phác thảo chung, thông tin cơ bản, phương pháp hay nhất và các lỗi phổ biến cần cân nhắc khi viết plugin.
Bắt đầu
Hãy bắt đầu viết một plugin JQuery bằng cách thêm một phương thức mới vào đối tượng jQuery.fn, trong đó tên phương thức là tên plugin của bạn:
JQuery.fn.myPlugin = function() ( // đặt mã plugin của bạn vào đây );
Nhưng chờ đã! Ký hiệu đô la của tôi mà tôi biết và yêu thích ở đâu? - bạn hỏi. Nó vẫn có sẵn, nhưng bạn cần đảm bảo rằng plugin của bạn sẽ không xung đột với các thư viện khác cũng có thể sử dụng ký hiệu đô la (Mootools, Prototype). Để thực hiện việc này, mã plugin của bạn phải được đặt trong chính phần đóng lệnh gọi.
(function($)( $.fn.myPlugin = function() ( // đây là mã plugin của bạn); ))(jQuery);
Cái đó tốt hơn. Sau này các thư viện khác có thể thay đổi ký hiệu $ bao nhiêu tùy ý, việc này không ảnh hưởng gì đến bạn. Bên trong bao đóng, $ sẽ bằng jQuery.
Bối cảnh
Bây giờ chúng ta đã có trình bao bọc, chúng ta có thể bắt đầu viết mã plugin thực tế. Nhưng trước khi chúng ta làm điều đó, tôi muốn nói vài lời về bối cảnh. Bên trong plugin, từ dành riêng this là tham chiếu đến đối tượng jQuery. Nhưng khi nào, trong mã plugin được sử dụng chức năng gọi lại, thì đây là liên kết đến phần tử DOM gốc. Lỗi xảy ra khi nhà phát triển thực hiện $(this) một lần nữa hoặc ngược lại, quên làm điều đó
(function($)( $.fn.myPlugin = function() ( // không cần phải làm điều đó $(this) vì // "this" đã là một đối tượng jquery // $(this) cũng có nghĩa tương tự, $($("#element")); this.fadeIn("normal", function())( // nhưng đây là một liên kết đến đối tượng DOM gốc và để làm việc với nó // bạn cần phải làm cái này $( cái này) )); ))(jQuery); $("#element").myPlugin();
Chào thế giới!!!
Bây giờ chúng ta đã hiểu ngữ cảnh của các plugin jQuery, hãy viết một plugin thực sự làm được điều gì đó.
(function($)( $.fn.maxHeight = function() ( var max = 0; this.each(function() ( max = Math.max(max, $(this).height()); )); trả về tối đa; ); ))(jQuery); var cao nhất = $("div").maxHeight(); // trả về chiều cao của div cao nhất
Đây là một plugin đơn giản sử dụng phương thức .height() để trả về chiều cao của DIV cao nhất trên trang.
Hỗ trợ chuỗi cuộc gọi
Trong ví dụ trước, plugin trả về một giá trị số nguyên, chiều cao của DIV cao nhất trên trang, nhưng thường mục tiêu của plugin chỉ đơn giản là thay đổi bằng cách nào đó một tập hợp các phần tử và chuyển chúng sang phương thức tiếp theo trong chuỗi cuộc gọi . Vẻ đẹp và sự ngắn gọn của chuỗi cuộc gọi jQuery là một trong những lý do khiến jQuery trở nên phổ biến. Vì vậy, để hỗ trợ chuỗi cuộc gọi trong một plugin, bạn phải đảm bảo rằng plugin của bạn trả về cái này trong hàm chính của nó.
(function($)( $.fn.lockDimensions = function(type) ( return this.each(function() ( var $this = $(this); if (!type || type == "width") ( $ this.width($this.width()); ) if (!type || type == "height") ( $this.height($this.height()); ) )); ))(jQuery ); $("div").lockDimensions("width").css("color", "red");
Bởi vì plugin trả về cái này trong phần thân ngay lập tức của hàm nên nó duy trì chuỗi cuộc gọi và bộ sưu tập jQuery có thể tiếp tục bị thao tác bằng các phương thức jQuery như .css . Vì vậy, nếu plugin của bạn không trả về giá trị có giá trị, bạn phải luôn trả về giá trị này trong phần thân ngay lập tức của chức năng plugin. Ngoài ra, các tham số bạn chuyển khi gọi plugin sẽ được chuyển dưới dạng đối số cho hàm plugin. Trong ví dụ trên, đối số này là loại và khi được gọi, nó được cung cấp giá trị "width". Nhân tiện, plugin ở trên sửa chiều cao hoặc chiều rộng của từng khối trên trang, phù hợp với kích thước hiện tại của nó.
Mặc định và tùy chọn
Đối với các plugin tùy chỉnh và phức tạp hơn hỗ trợ nhiều tùy chọn, sự lựa chọn tốt nhất sẽ có cài đặt mặc định có thể được ghi đè hoặc mở rộng (sử dụng $.extend) khi gọi trực tiếp plugin. Vì vậy, thay vì gọi plugin bằng một lượng lớnđối số, bạn có thể gọi nó bằng một đối số, đó là một đối tượng có các trường và giá trị mà bạn muốn ghi đè cài đặt mặc định. Đây là cách nó được thực hiện.
(function($)( $.fn.tooltip = function(options) ( var settings = ("location" : "top", "background-color" : "blue" ); return this.each(function() ( / / nếu các tùy chọn tồn tại, thì hãy kết hợp chúng // với các giá trị mặc định if (options) ( $.extend(settings, options); // thứ tự kết hợp là quan trọng) // mã plugin ở đây )); ); )) (jQuery ); $("div.tools").tooltip(( "location" : "left" ));
Trong ví dụ này, sau khi gọi plugin chú giải công cụ bằng các tùy chọn thích hợp, trường vị trí trong cài đặt mặc định sẽ được ghi đè thành giá trị "trái". Kết quả là các cài đặt sẽ trông như thế này:
("vị trí" : "trái", "màu nền" : "xanh")
Đây là một cách tuyệt vời để cung cấp plugin có thể tùy chỉnh hoàn toàn mà không yêu cầu nhà phát triển điền vào tất cả cài đặt. Những thứ kia. Nếu nhà phát triển hài lòng với mọi thứ thì anh ta có thể gọi plugin như thế này:
$("div.tools").tooltip(); // tất cả các cài đặt sẽ vẫn mặc định
Không gian tên
Có không gian tên chính xác cho plugin của bạn là rất quan trọng phần quan trọng phát triển plugin. Một plugin được đặt tên chính xác sẽ có rất ít khả năng bị ghi đè bởi các plugin hoặc mã khác. Việc đặt tên chính xác cho các phương thức của bạn cũng giúp cuộc sống của bạn dễ dàng hơn vì nó giúp bạn theo dõi các phương pháp, sự kiện và dữ liệu cụ thể của mình tốt hơn. Ý tưởng là đặt tên cho plugin của bạn một cách đơn giản và chu đáo. Hãy xem ví dụ sau
Phương pháp bổ trợ
Trong mọi trường hợp, plugin không được chiếm nhiều hơn một tên trong đối tượng jQuery.fn.
(function($)( $.fn.tooltip = function(options) ( // ĐÂY); $.fn.tooltipShow = function() ( // RẤT); $.fn.tooltipHide = function() ( // BAD ); $.fn.tooltipUpdate = function(nội dung) ( // !!! ); ))(jQuery);
Mã này làm tắc nghẽn đối tượng $.fn. Điều này được khuyến khích vì nó có thể ảnh hưởng tới $. Tên Fn. Để khắc phục điều này, bạn nên tập hợp tất cả các phương thức của plugin vào một đối tượng và gọi phương thức đó bằng tên chuỗi của nó
(function($)( var Methods = ( init: function(options) ( // ĐÂY ), show: function() ( // ĐÃ ), ẩn: function() ( // TỐT HƠN))), cập nhật: function ( nội dung) ( // !!! ) ); $.fn.tooltip = function(method) ( // logic để gọi phương thức if (methods) ( return Method[ Method].apply(this, Array.prototype.slice.call(arguments, 1)); ) else if (phương thức typeof === "object" || ! phương thức) ( return Method.init.apply(this, đối số); ) else ( $.error("Phương thức " + Method + " không tồn tại trong jQuery.tooltip" ); ) ) ; ))(jQuery); $("div").tooltip(); // gọi phương thức init $("div").tooltip(( // gọi phương thức init với tham số foo: "bar" )); $("div").tooltip("hide"); // gọi phương thức ẩn $("div").tooltip("update", "Đây là nội dung mới!"); // gọi phương thức cập nhật với các tham số
Kiểu kiến trúc plugin này cho phép bạn đóng gói tất cả các phương thức của mình trong một lần đóng plugin và gọi các phương thức bằng cách chỉ định tên chuỗi của phương thức làm tham số đầu tiên trong plugin, sau đó bất kỳ phương thức nào Tùy chọn bổ sung, mà bạn sẽ cần cho phương pháp này. Kiểu kiến trúc và phương pháp đóng gói này là tiêu chuẩn cho các plugin jQuery và được sử dụng trong vô số plugin, bao gồm cả plugin và widget trong jQueryUI.
Sự kiện
Một tính năng ít được biết đến của phương thức liên kết là nó cho phép các sự kiện được đặt cho một không gian tên duy nhất. Nếu plugin của bạn gây ra một loại sự kiện nào đó thì bạn nên liên kết sự kiện đó với không gian tên của mình. Bằng cách này, nếu sau này bạn cần tắt nó, bạn có thể làm như vậy mà không can thiệp vào các sự kiện khác có thể đã bị ràng buộc với cùng loại sự kiện. bạn có thể dùng tên độc đáo Sự kiện của bạn bằng cách thêm ".<название плагина>".
(function($)( var Methods = ( init: function(options) ( return this.each(function())( $(window).bind("resize.tooltip", Method.reposition); )); ), destroy : function() ( return this.each(function())( $(window).unbind(".tooltip"); )) ), định vị lại: function() ( // ... ), show: function( ) ( // ... ), ẩn: function() ( // ... ), cập nhật: function(content) ( // ...) ); $.fn.tooltip = function(method) ( if ( các phương thức) ( return Method.apply(this, Array.prototype.slice.call(arguments, 1)); ) else if (typeof Method === "object" || ! Method) ( return Method.init.apply(this , đối số ); ) else ( $.error("Phương thức " + phương thức + " không tồn tại trong jQuery.tooltip"); ) ); ))(jQuery); $("#fun").tooltip(); // một lúc sau... $("#fun").tooltip("destroy");
Trong ví dụ này, khi plugin chú giải công cụ được khởi tạo bằng phương thức init, nó sẽ liên kết phương thức định vị lại với sự kiện thay đổi kích thước của cửa sổ trong không gian tên "chú giải công cụ". Sau này, nếu nhà phát triển cần hủy chú giải công cụ, chúng tôi có thể tắt các sự kiện liên quan đến plugin bằng cách chuyển tên của nó tới trong trường hợp này"chú giải công cụ", vào phương thức hủy liên kết. Điều này cho phép bạn vô hiệu hóa các sự kiện plugin một cách an toàn mà không vô tình hủy liên kết các sự kiện bị ràng buộc với các sự kiện bên ngoài plugin.
Dữ liệu
Thông thường khi phát triển plugin, bạn có thể cần kiểm tra trạng thái của plugin hoặc kiểm tra xem plugin của bạn đã được khởi chạy chưa phần tử này. Sử dụng phương thức jQuery.data là một cách tuyệt vờiđể theo dõi và lưu trữ các biến cho từng phần tử. Tuy nhiên, thay vì phục vụ một loạt cuộc gọi cá nhân dữ liệu với tên khác nhau, tốt hơn là sử dụng một đối tượng chứa tất cả các biến và việc truy cập vào đối tượng này sẽ thông qua một tên.
(function($)( var Methods = ( init: function(options) ( return this.each(function())( var $this = $(this), data = $this.data("tooltip"), tooltip = $ ("
", ( text: $this.attr("title") )); // plugin chưa được khởi tạo if (! data) ( /* Tính năng bổ sung cài đặt */ $(this).data("tooltip", ( target: $this, tooltip: tooltip )); ) )); ), destroy: function() ( return this.each(function())( var $this = $(this), data = $this.data("tooltip"); $(window).unbind(".tooltip" ) ; data.tooltip.remove(); $this.removeData("tooltip"); )) ), định vị lại: function() ( // ... ), show: function() ( // ... ), ẩn : function() ( // ...), cập nhật: function(content) ( // ...) ); $.fn.tooltip = function(method) ( if (methods) ( return Method.apply(this, Array.prototype.slice.call(arguments, 1)); ) else if (typeof Method === "object" | | ! phương thức) ( return Method.init.apply(this, đối số); ) else ( $.error("Method " + Method + " không tồn tại trên jQuery.tooltip"); ) ); ))(jQuery);Việc sử dụng dữ liệu giúp bạn theo dõi các biến và trạng thái của plugin ngay từ bên trong plugin. Việc đặt tên dữ liệu vào một đối tượng tương tự như tên plugin cho phép bạn dễ dàng truy cập tất cả các trường của plugin ở một nơi và cũng dễ dàng xóa tất cả dữ liệu liên quan đến plugin nếu cần.
Bản tóm tắt
Viết plugin trong jQuery cho phép bạn kết hợp tốt nhất chức năng tiện lợi và bất kỳ mã nào được lặp lại thường xuyên ở một nơi, điều này sẽ tiết kiệm thời gian và giúp chương trình của bạn hiệu quả hơn nữa. Dưới đây là bản tóm tắt nhanh về những điều bạn nên ghi nhớ khi phát triển plugin tiếp theo của mình:
- Luôn bao quanh plugin trong một bao đóng (function($)( // plugin của bạn ở đây ))(jQuery);
- Không cần phải bọc cái này trong phần thân plugin, nó sẽ dư thừa
- Plugin phải trả về giá trị này trong chức năng của nó, nếu plugin không cần trả về bất kỳ giá trị cụ thể nào thì nó sẽ hỗ trợ chuỗi cuộc gọi
- Thay vì cung cấp tất cả cài đặt cùng một lúc khi plugin được khởi chạy, tốt hơn là bạn nên xác định giá trị mặc định của chúng, tức là. người dùng không quen với plugin có thể kiểm tra hoạt động của nó ngay lập tức
- Không tạo nhiều tên cho mỗi plugin trong jQuery.fn
- Luôn sử dụng không gian tên của plugin khi làm việc với dữ liệu và sự kiện.
- jQuery.fn được phát âm là jQuery effin"
kể với bạn bè
Trong bài viết hôm nay tôi sẽ nói với bạn, cách tạo một plugin đơn giản chojQuery. Và để việc tạo nó trở nên thú vị hơn, hãy đặt ra một nhiệm vụ thực sự mà plugin này sẽ thực hiện. Không do dự, tôi quyết định tạo một plugin mà khi cuộn xuống một trang sẽ hiển thị một khối ở góc màn hình và khi nhấp vào, trang sẽ cuộn lên một cách trơn tru. Ngày nay những thứ như vậy khá phổ biến và có thể được tìm thấy trên nhiều trang web.
Xây dựng vấn đề
Trước khi tiếp tục, hãy chia nhiệm vụ của chúng ta thành nhiều bước:
- Khi người dùng cuộn trang xuống nhiều hơn một chiều cao màn hình, một khối có hình ảnh mũi tên lên sẽ xuất hiện mượt mà ở cuối màn hình
- Khi bạn nhấp vào khối này, trang sẽ tự động cuộn lên đầu trang
- Nếu người dùng cuộn trang lên, khối sẽ tự động ẩn
Yêu cầu về plugin
Plugin phải có các cài đặt sau:
- để chỉ định hình ảnh sẽ xuất hiện trong khối
- thiết lập chiều cao cuộn màn hình sau đó khối cuộn sẽ xuất hiện
Vì vậy, chúng tôi đã sắp xếp các yêu cầu và nhiệm vụ. Bây giờ bạn có thể chuyển sang triển khai plugin này trong jQuery một cách an toàn.
Tại tạo một plugin jQuery bạn cần đặt mã plugin vào một tệp riêng biệt có tên: jquery.plugin_name.js . Đây là một tiêu chuẩn như vậy. Vì vậy tốt hơn là nên bám vào nó.
Vì vậy, plugin của chúng tôi sẽ được gọi con lăn , vì vậy hãy tạo một tệp trống có tên jquery.scroller.js
Để tạo một plugin bạn cần một đối tượng jQuery.fn thêm một phương thức mới, trong đó tên phương thức là tên plugin của chúng tôi. Hãy xem một ví dụ:
Như bạn có thể đã nhận thấy, thay vì ký hiệu đô la $ chúng tôi sử dụng từ này jQuery . Điều này được thực hiện để plugin của chúng tôi không xung đột với các thư viện javascript khác (ví dụ: Mootools, Prototype) cũng sử dụng ký hiệu đô la $ . Nếu bạn quen với việc làm việc với ký hiệu đô la $ , thì tất cả mã plugin phải được gói trong chính lệnh gọi đóng:
Trong dòng đầu tiên và cuối cùng của mã này, chúng tôi đã khai báo một hàm ẩn danh chỉ nhận một tham số $ , và ngay lập tức gọi nó và truyền cho nó một đối tượng làm tham số jQuery . Bây giờ chúng ta có thể sử dụng ký hiệu đô la trong mã của mình một cách an toàn và không nghĩ đến bất kỳ xung đột nào với các thư viện khác.
Bước tiếp theo là triển khai khả năng thiết lập một số cài đặt cho plugin mà chúng tôi đã đề cập ở trên. Điều này đang được triển khai theo cách sau:
(function($)( $.fn.scroller = function(options)( //Giá trị mặc định tùy chọn = $.extend(( img_src: "images/scrollup.png", chiều cao: 1.5, ), tùy chọn); ) ; )(jQuery);
Tất cả các tham số được lưu trữ trong một biến tùy chọn . Để khởi tạo biến này chúng ta sử dụng hàm $.extend() , đối số đầu tiên là một đối tượng có tham số mặc định, đối số thứ hai là tham số do người dùng chỉ định. Trong trường hợp của chúng tôi, 2 tham số được sử dụng:
- img_src — đường dẫn đầy đủ đến hình ảnh trên máy chủ, đường dẫn này sẽ được hiển thị trong một khối ở cuối trang. Mặc định là "hình ảnh/scrollup.png"
- chiều cao — chiều cao cuộn trang sau đó khối sẽ xuất hiện. Mặc định là - 1,5
Trước khi chúng ta tiếp tục, cần có một vài từ về ngữ cảnh. Từ dành riêng bên trong plugin cái này đây là một tài liệu tham khảo đối tượng jQuery , mà plugin được gọi. Nhưng khi nào, trong mã plugin được sử dụng gọi lại chức năng thì ở đó cái này là một liên kết đến phần tử DOM gốc. Lỗi xảy ra khi nhà phát triển làm quá mọi thứ $(cái này) hoặc ngược lại, họ quên làm việc đó. Dưới đây trong văn bản bạn sẽ hiểu mọi thứ.
Vì vậy, hãy tiếp tục. Vì plugin của chúng tôi có thể được gọi trực tiếp tới một tập hợp các phần tử ( $(".class").scroller();), thì chúng ta cần tính đến thời điểm này và xem qua tất cả các thành phần có trong bộ này và áp dụng plugin của chúng ta cho từng thành phần. Điều này rất dễ thực hiện. Chức năng sử dụng mỗi() . Hãy xem một ví dụ:
Như bạn có thể thấy trong trường hợp này cái này là một tham chiếu đến một đối tượng jQuery, vì vậy bạn không cần phải làm điều này ở đây $(cái này)! Ngoài ra, plugin của chúng tôi trả về đối tượng này cái này , vì nó được sử dụng từ khóa trở lại . Điều này được thực hiện để hỗ trợ chuỗi cuộc gọi jQuery. Xét cho cùng, vẻ đẹp và tính đồng nhất của chuỗi lệnh gọi jQuery là một trong những lý do khiến jQuery trở nên phổ biến. Do đó, để plugin của bạn hỗ trợ các chuỗi cuộc gọi này, bạn phải đảm bảo rằng plugin của bạn trả về chuỗi cuộc gọi này cái này trong chức năng chính của nó
Bây giờ bạn có thể bắt đầu triển khai chức năng của plugin. Hãy khai báo một vài biến cho công việc tiếp theo.
(function($) ( $.fn.scroller = function(options) ( //Giá trị mặc định options = $.extend(( img_src: "images/scrollup.png", Height: 1.5, ), options); return this .each(function())( //tham chiếu đến phần tử DOM gốc var $this = $(this), //Chiều cao của phần tử có thể cuộn Height = $this.height(), content = "
Để không bị nhầm lẫn sau này, tôi đã tạo một biến cục bộ $cái này , đã được gán một đối tượng jQuery. Chúng tôi cũng xác định chiều cao ban đầu của đối tượng vì nó sẽ phụ thuộc vào nó khi khối xuất hiện ở cuối màn hình. Ngoài ra, chúng tôi đã tạo đánh dấu html cho khối của mình và chèn nó vào bên trong đối tượng mà plugin được gọi.
Bây giờ tất cả những gì còn lại là treo sự kiện cuộn , đối với phần tử đã chọn và tùy thuộc vào cài đặt plugin và thao tác cuộn trang, hiển thị hoặc ẩn khối ở cuối màn hình. Và cũng khi bạn click vào khối này, hãy cuộn trang lên đầu màn hình.
(function($) ( $.fn.scroller = function(options) ( //Giá trị mặc định options = $.extend(( img_src: "images/scrollup.png", Height: 1.5, ), options); return cái này .each(function())( var $this = $(this), Height = $this.height(), content = "
Để sử dụng plugin này trên trang web của bạn, bạn cần giữa các thẻ
kết nối chính thư viện jQuery và chính plugin đó.Đã gần 10 năm trôi qua kể từ khi jQuery xuất hiện và ngày nay nó là thư viện JavaScript phổ biến nhất. Mười năm trước, việc truy cập Internet có thể thực hiện được thông qua số lượng giới hạn các trình duyệt được thiết kế để giảm thiểu khả năng thao túng HTML DOM (Tài liệu Mô hình đối tượng). JQuery hóa ra là cứu cánh cho nhiều nhà phát triển, những người đã cố gắng hiển thị nội dung của các trang web một cách giống hệt nhau. trình duyệt hiện có. Những người đam mê phát triển jQuery đã tìm cách kết hợp các khả năng của trình duyệt và do đó tạo ra một giao diện chung cho tất cả những thứ có thể hoạt động bất kể loại và phiên bản của trình duyệt. Ưu điểm chính của các nhà phát triển là họ đã tạo ra những tính năng mới API, tốt hơn trình duyệt gốc và triển khai các tính năng không được hỗ trợ giao diện phần mềm browser. Tuy nhiên, một số nhà phát triển không có xu hướng đánh giá quá cao vai trò của jQuery trong việc giải quyết các vấn đề trên nhiều trình duyệt và nhấn mạnh rằng thư viện này đã trở nên phổ biến nhờ việc triển khai querySelectors. Như thường lệ, sự thật nằm ở đâu đó ở giữa.
Ngày nay, hệ sinh thái trình duyệt không còn phức tạp như 10 năm trước. Mặc dù một số trình duyệt có thể không triển khai được mọi thứ mà API HTML5 cung cấp, nhưng các nhà phát triển ngày nay gặp ít vấn đề hơn nhiều với khả năng tương thích và triển khai trên nhiều trình duyệt. các chức năng khác nhau. Nếu hiện tại có thứ gì đó hoạt động tốt trong Chrome thì có thể nó cũng sẽ hoạt động tốt trong Firefox hoặc Edge. Nền tảng Các phần tử JavaScript cùng với querySelectors đều được ghi chép đầy đủ và được hỗ trợ bởi tất cả các nhà sản xuất trình duyệt. Do đó, thoạt nhìn có vẻ như các vấn đề mà jQuery giải quyết không còn tồn tại nữa. JavaScript thuần túy sẽ luôn nhanh hơn giải pháp sử dụng thư viện, vì vậy câu hỏi đặt ra là: ngày nay có cần thiết phải sử dụng công nghệ đã hơi lỗi thời không? Chu kỳ CPU là một loại hàng hóa nhưng thời gian thì không. Liệu việc tiết kiệm 30 KB có hợp lý không nếu bạn phải viết mã và kiểm tra nó nếu đã có giải pháp làm sẵn?
Tất cả chỉ là vấn đề lựa chọn. Một số cố gắng tạo ra mã hoàn hảo, số khác sử dụng các đoạn mã do các nhà phát triển khác tạo ra. thư viện jQuery có hàng nghìn plugin hoạt động hoàn hảo và được ghi chép đầy đủ giúp tăng năng suất và cho phép bạn thực hiện những ý tưởng táo bạo nhất của mình. Nhiều plugin trong số này cũng hoàn toàn miễn phí. Chúng tôi xin giới thiệu với bạn 10 plugin jQuery tốt nhất được người tạo ra chúng hỗ trợ tích cực và cập nhật thường xuyên.
Tường lửa là một plugin jQuery đa trình duyệt rất thú vị được thiết kế để hoạt động với bố cục dựa trên lưới. Nó cho phép bạn tạo ấn tượng hiệu ứng hoạt hình sử dụng các tính năng của SCC3 và hoạt động tốt với các sự kiện gọi lại. Nếu bạn cần tạo bố cục linh hoạt với nhiều hình ảnh như Pinterest thì Tường lửa là giải pháp tốt nhất để tạo lưới động. Freewall hoạt động trong hầu hết các trình duyệt hiện đại và thậm chí cả IE8 cổ xưa, điều này làm cho plugin này trở thành một công cụ thực sự phổ biến.
Plugin multiscroll.js cho phép bạn thêm tính năng cuộn đa chiều của các thành phần thiết kế chính vào trang web của mình. Điều này giúp tạo nhiều cuộn dễ dàng hơn cho các trang web có hai cột hoặc bảng. Mục đích chính của plugin là thu hút sự chú ý của người dùng vào nội dung chính mà không ảnh hưởng đến UX. Plugin hoạt động tốt trên cả trình duyệt hiện đại và cũ và tất nhiên là trong môi trường di động.
RowGrid.js là một plugin đơn giản cho phép bạn sắp xếp hình ảnh trên trang web theo hàng chẵn, giống như được thực hiện trong công cụ tìm kiếm. hình ảnh của Google. Nó thời trang, đẹp và không quá cầu kỳ. RowGrid.js sắp xếp hình ảnh theo hàng dựa trên kích thước phần tử cha: anh ấy chọn những bức ảnh theo cách sao cho chúng trông hài hòa trong ranh giới đã thiết lập, trong khi một số yếu tố được thu nhỏ lại. Tuy nhiên, khi làm việc với plugin này, bạn cần nhớ rằng tất cả các hình ảnh phải có cùng chiều cao, nếu không plugin sẽ không hoạt động và lưới ngẫu nhiên đẹp mắt sẽ không hoạt động.
Plugin Slidebars jQuery, như tên cho thấy, giúp bạn thêm các phần tử trượt vào trang web của mình, chẳng hạn như mặt bên hoặc các menu ẩn. Phiên bản thứ hai của plugin đã được viết lại hoàn toàn, có tính đến tất cả những thiếu sót trước đó và cho phép bạn sử dụng số lượng phần tử không giới hạn nằm bên ngoài màn hình chính.
Plugin pagePilings.js cho phép bạn triển khai các hiệu ứng cuộn rất thú vị, trông đặc biệt ấn tượng trên các trang đơn lẻ. Người dùng xem nội dung di chuyển lên xuống và tập lệnh sẽ cắt các lớp nội dung trên cùng, từ đó triển khai một thanh trượt. Sử dụng plugin sẽ giúp tạo ra trải nghiệm người dùng khó quên. Hướng và tốc độ cuộn có thể được điều chỉnh dễ dàng - về mặt này, plugin có khả năng rất tuyệt vời. PagePilings.js hoàn toàn đáp ứng, hoạt động tốt trên mọi màn hình và hiển thị tốt trong hầu hết các trình duyệt hiện đại.
Mục đích chính của plugin jQuery là tạo chuyển tiếp suôn sẻ giữa các trang, giúp cải thiện trải nghiệm người dùng. Plugin nhỏ này cho phép bạn tạo các hoạt ảnh CSS mượt mà và đẹp mắt đi kèm với các thay đổi của trang. Plugin có hơn 60 hiệu ứng khác nhau, bao gồm các hiệu ứng phổ biến như làm mờ, làm mờ, xoay mặt phẳng khung, lật, thu phóng và nhiều hơn nữa.
Một hiệu ứng như phóng to hình ảnh khi di con trỏ chuột gây khó chịu cho một số người, nhưng đôi khi nó lại rất cần thiết. Vì vậy, nếu bạn cần sử dụng hoạt ảnh như vậy trong dự án của mình thì bạn nên chú ý đến plugin ZooMovie jQuery. Plugin không chỉ chia tỷ lệ hình ảnh mà còn cho phép bạn xem chi tiết hình ảnh bằng cách di chuyển con trỏ. Mọi thứ hoạt động rất đơn giản và có thể dự đoán được.
Rippleria là một plugin dựa trên khái niệm Thiết kế Vật liệu tạo ra hiệu ứng sóng khi nhấp chuột vào một phần tử. Hiệu ứng có thể được áp dụng cho các đồ vật khác nhau, ví dụ: vào các nút, biểu tượng hoặc hình ảnh. Plugin rất dễ tùy chỉnh và hoạt động tốt trong tất cả các trình duyệt hiện đại.
Plugin Flickity có tài liệu rất chi tiết. Tất cả các chức năng được mô tả rõ ràng và có cấu trúc hợp lý. Đây là một trong những plugin jQuery tinh tế nhất để triển khai hiệu ứng băng chuyền. Flickity giúp việc tạo thanh trượt phản hồi trở nên dễ dàng công việc nhẹ, vì plugin có tất cả các công cụ để thực hiện bất kỳ ý tưởng nào. Plugin này là phần mềm chia sẻ, nhưng để sử dụng nó trong các dự án thương mại, bạn sẽ phải mua phiên bản trả phí.
Nếu bạn cần cài đặt thanh trượt trên trang web của mình một cách nhanh chóng và dễ dàng, bạn có thể sử dụng plugin jQuery Unslyder. Plugin này nhỏ nhưng đủ linh hoạt để cho phép nhà phát triển thay đổi tập lệnh bằng cách sử dụng thông số khác nhau và các tùy chọn, phương thức và sự kiện gọi lại.
