51 Plugin jQuery tuyệt vời mà bạn nên sử dụng

jQuery có một cộng đồng phát triển rất lớn bởi các lập trình viên. Tuy nhiên, nó có thể trở nên khó khăn để chọn lọc ra cái tốt nhất trong tất cả những gì được phát hành. Đây là lý do tại sao, trong bài viết này, bạn sẽ tìm thấy một bộ sưu tập của 50 plugin jQuery mới và thư viện JavaScript, khi áp dụng nó có thể làm cho trang web của bạn sinh động, chuyên nghiệp và hơn thế nữa.

Hộp thoại (Dialogs)

1. Alertify.js

Alertify (github) là thư viện nhỏ để trình bày cửa sổ hộp thoại đẹp và thông báo. Nó rất dễ dàng để tùy chỉnh với CSS, có một API đơn giản và không phụ thuộc vào thư viện của bên thứ ba.

2. jQuery Avgrund

jQuery Avgrund là thêm một giải pháp dialog tuyệt vời. Nó không phải là tính năng phong phú như alertify, nhưng nó có yếu tố ứng dụng web của bạn cần. Hộp thoại được thể hiện với một hình ảnh ấn tượng mang lại cho nó vào trọng tâm, trong khi làm mờ và tối nền.

Biểu mẫu (Form)

3. iCheck

4. Long Press

Long Press là một jQuery plugin đó giúp giảm bớt các văn bản của ký tự có dấu hoặc hiếm. Giữ một phím trong khi đánh máy sẽ có một thanh gợi ý với các ký tự thay thế mà bạn có thể sử dụng.

5. jQuery File Upload

jQuery File Upload là một widget với nhiều tập tin lựa chọn, hỗ trợ kéo và thả file, thanh tiến trình và hình ảnh xem trước. Nó hỗ trợ cross-domain, chunked, file đang upload có thể tiếp tục lại và phía khách hàng thay có thể resize hình ảnh. Làm việc với bất kỳ nền tảng server-side (PHP, Python, Ruby on Rails, Java, Node.js, Go, v.v.) và rất dễ dàng để nhúng vào ứng dụng của bạn nhờ một số hooks và callbacks.

6. Complexify

Complexify là một plugin jQuery nhằm mục đích đánh giá mật khẩu phức tạp. Bạn có thể sử dụng nó trong các hình thức đăng ký để hiển thị tỷ lệ phần trăm cho người sử dụng. Với plugin này bạn có thể buộc mật khẩu để có sự kết hợp của chữ hoa / chữ thường chữ cái, số, ký hiệu đặc biệt và nhiều hơn nữa. Tôi nên lưu ý rằng điều này hoàn toàn là một giải pháp phía khách hàng, có nghĩa là nó có thể bị vô hiệu hoá nếu người dùng tắt Javascript trên trình duyệt. Đây là lý do tại sao bạn cũng nên kiểm tra lại các mật khẩu phức tạp ở phía máy chủ.

7.  jQuery Knob

Knob jQuery là một plugin cho chuyển thành phần đầu vào đĩa số jQuery touchable. Nó được xây dựng bằng canvas, và hoàn toàn tùy biến bằng cách thiết lập các thuộc tính dữ liệu trên các yếu tố đầu vào như thế này:

8. Pickadate.js

Pickadate.js là một plugin jQuery tạo ra một widget lựa chọn ngày thân thiện, nhạy và di động. Nó rất dễ sử dụng và có thể được tùy chỉnh với CSS. Để sử dụng nó, nhúng các tập tin js và các css, và gọi các plugin trên phần tử đầu vào của bạn:

9. Chosen

Chosen là một widget mạnh mẽ giúp chuyển đổi một đầu vào chọn vào một danh sách thả xuống tìm kiếm được. Nó rất dễ dàng để tùy chỉnh với CSS, và bạn có thể treo (hook) đang nhờ của riêng bạn để một số callback. Các plugin cũng cập nhật các yếu tố ban đầu (được ẩn) để gửi nó như một phần của biểu mẫu hoặc đọc nó với JS sẽ cung cấp cho bạn kết quả chính xác.

10. Fancy Input

Input Fancy (github) là một plugin jQuery mà làm cho nhập vào hoặc xóa văn bản trong một textboox uber tuyệt vời. Nó sử dụng CSS3 hình ảnh động để đạt được hiệu quả.

11. Typeahead.js

Typeahead là một thư viện AutoComplete nhanh của twitter. Nó được lấy ý tưởng từ hộp tìm kiếm của twitter.com và có đầy đủ các tính năng. Nó sẽ hiển thị các đề xuất như loại người dùng, và cho thấy những gợi ý đầu như một gợi ý. Các plugin làm việc với dữ liệu hardcoded cũng như dữ liệu từ xa, và tỷ lệ hạn yêu cầu mạng để làm giảm tải.

12. Parsley.js

Parsley.js là một thư viện validate form. Nó cho phép bạn xác nhận các trường dưới hình thức mà không cần phải viết một dòng của JavaScript. Thay vào đó, bạn phải đặt thuộc tính dữ liệu trong các trường nhập mà bạn cần phải được xác nhận, và Parsley làm việc còn lại. Thư viện làm việc với một trong hai jQuery hoặc Zepto và ít hơn 800 dòng dài.

Cuộn trang và Parallax

Một trang trang duy nhất với một hiệu ứng cuộn parallax được phổ biến ngày nay. Họ có thể sẽ ở trong trang một thời gian, nó là hoàn hảo cho các trang web với mật độ thông tin ít và rất nhiều hình ảnh – trang web tiếp thị, danh mục đầu tư và nhiều hơn nữa. Các plug-in nhằm mục đích để làm cho họ dễ dàng phát triển hơn.

13. Windows

Windows là một plugin cho phép bạn xây dựng trang web trang duy nhất với các phần full toàn bộ màn hình. Plugin này cung cấp cho bạn callback được gọi là khi các phần mới đi vào hiển thị và xử lý snapping, vì vậy bạn có thể dễ dàng mở rộng nó với các menu điều hướng tùy chỉnh hoặc hơn thế.

14. Cool Kitten

Cook Kitten là một framework đáp ứng cho các trang web cuộn parallax. Nó tổ chức các phần của trang web của bạn vào slide và sử dụng Waypoints jQuery plugin để phát hiện khi họ đi vào tầm nhìn, tạo ra các menu điều hướng để có được cập nhật.

15. Sticky

Sticky – Chú ý là một plugin jQuery cung cấp cho bạn khả năng thực hiện bất kỳ phần tử trên trang của bạn luôn luôn có thể nhìn thấy khi di chuyển trang. Điều này có thể tiện dụng trong trang web của bạn để trình bày một menu dính hoặc thanh chia sẻ.

16. Super Scrollorama

Super Scrollorama là một plugin jQuery cho hình ảnh động cuộn tuyệt vời. Nó cho phép bạn xác định tweens và hình ảnh động được kích hoạt khi một phần tử hiện ra trước mắt, hoặc trên điểm cuộn cụ thể.

17. Stellar.js

Stellar là một plugin jQuery cung cấp các hiệu ứng cuộn parallax đến bất kỳ phần tử cuộn. Có vẻ đối với bất kỳ nền tảng parallax hoặc các thành phần bên trong phần tử được chỉ định, và dừng lại vị trí khi cuộn phần tử. Bạn có thể kiểm soát tốc độ di chuyển của các yếu tố bằng cách sử dụng dữ liệu thuộc tính cho một hiệu ứng.

18. Scrollpath

Scrollpath là một scroll plugin, là khả năng xác định con đường cuộn tùy chỉnh của riêng bạn. Các plugin sử dụng vài cú pháp dùng cho đường vẽ, bằng cách sử dụng phương pháp moveTo, lineTo và vòng cung. Để giúp đỡ nhận được con đường đúng đắn, một lớp phủ vải với đường dẫn có thể được kích hoạt khi khởi tạo các plugin.

Hiệu ứng chữ

19. Textillate.js

Textillate.js là một plugin jQuery kết hợp sức mạnh của animate.css và lettering.js, để áp dụng hiệu ứng tiên tiến trên thành phần văn bản. Được dựa vào những hình ảnh động CSS3, mà làm cho chúng mịn ngay cả trên thiết bị di động. Có rất nhiều các hiệu ứng để lựa chọn.

20. Arctext.js

Arctext.js là một plugin jQuery cho phép bạn sắp xếp thư của một thành phần văn bản dọc theo một đường cong. Dựa trên lettering.js, nó tính toán vòng quay bên phải của mỗi thư và phân phối các chữ cái như nhau trên vòng cung tưởng tượng của bán kính nhất định, và áp dụng các CSS3 quay thích hợp.

21. Bacon

Bacon là một plugin jQuery cho phép bạn bọc văn bản xung quanh một đường cong Bút chì hoặc một dòng. Điều này cung cấp cho bạn rất nhiều điều khiển đồ họa, và được minh họa bằng trang chủ của plugin, khả năng đặt dải bacon ở giữa thiết kế của bạn.

22. Lettering.js

Lettering.js là một plugin jQuery đơn giản nhưng hiệu quả cho kiểu chữ web đẹp hơn. Những gì nó làm, được chia nội dung văn bản của một phần tử vào kéo dài riêng lẻ với số thứ tự. Dấu # dành cho class, do đó, bạn có thể tạo kiểu mỗi chữ riêng.

23. jQuery Shuffle Letters

jQuery Shuffle Letters là một trong những thử nghiệm của chúng tôi. Nó tạo ra một hiệu ứng thú vị mà làm ngẫu nhiên (randomizes) nội dung của một thành phần văn bản.

24. FitText.js

FitText.js là một plugin jQuery cho bơm phồng dành cho web. Nó tự động co giãn các văn bản của một phần tử để mất toàn bộ chiều rộng của container của nó. Điều này làm bố trí nhạy và sắc nét trên mọi thiết bị.

Lưới (Grids)

25. Gridster.js

Gridster.js là một plugin jQuery cho phép xây dựng bố trí kéo trực quan từ các yếu tố kéo dài nhiều cột. Bạn thậm chí có thể tự động thêm và loại bỏ các yếu tố từ lưới điện. Kéo một yếu tố làm cho các yêu tố khác dãn ra để sắp xếp lại, thật là tuyệt vời cho bố trí sử dụng điều khiển và bảng điều khiển.

 

26. Freetile

Freetile là một plugin cho jQuery cho phép tổ chức các nội dung trang web trong một bố cục hiệu quả, năng động và đáp ứng. Nó có thể được áp dụng cho một container và nó cố gắng sắp xếp nó là con trong một bố cục mà làm cho sử dụng tối ưu không gian màn hình, bằng cách “đóng gói” chúng và sắp xếp chặt chẽ.

27. Stalactite

Stalactite là một thư viện mà gói nội dung trang tùy thuộc vào không gian có sẵn. Phải mất một cách tiếp cận chậm dãi và sắp xếp các yếu tố liên tục với di chuyển của trang, mà làm cho một hiệu ứng thú vị.

Thanh cuộn tùy chỉnh

28. nanoScroller.js

nanoScroller.js là một plugin jQuery cung cấp một cách đơn giản tạo thanh cuộn theo kiểu Mac OS X Lion  cho trang web của bạn. Nó sử dụng đánh dấu HTML tối thiểu và sử dụng di chuyển bản địa. Plugin này hoạt động trên cả iPhone, iPad, và một số máy tính bảng Android.

29. jQuery Custom Content Scroller

jQuery Custom Content Scroller là một plugin tùy chỉnh thanh cuộn đó là hoàn toàn tùy biến với CSS. Tính năng di chuyển dọc / ngang, hỗ trợ chuột bánh (thông qua các plugin jQuery scroll), các nút di chuyển, cuộn quán tính với nới lỏng, chiều dài cuộn tự động điều chỉnh, thanh cuộn lồng nhau, chức năng scroll-to, user-defined và nhiều hơn nữa.

Nền (Backgrounds)

30. Tubular.js

Tubular.js là một plugin jQuery cho phép bạn thiết lập một video YouTube như nền của trang. Chỉ cần gắn nó vào yếu tố wrapper trang của bạn, thiết lập một số tùy chọn.

31. Backstretch

Backstretch là một jQuery plugin đơn giản cho phép bạn thêm một thay đổi kích cỡ động, hình nền slideshow có khả năng cho bất kỳ trang nào hoặc thành phần. Nó sẽ căng ra bất kỳ hình ảnh để phù hợp với trang hoặc phần tử ở mức khối, và sẽ tự động thay đổi kích thước như cửa sổ hoặc thay đổi kích thước phần tử. Hình ảnh được lấy sau khi trang của bạn được tải, vì vậy người dùng sẽ không phải chờ đợi cho hình ảnh (thường là lớn) để tải về trước khi sử dụng trang web của bạn. Đối với những người tò mò, và những người không muốn sử dụng bổ sung, đó cũng là một kỹ thuật mà có thể thiết lập một hình nền toàn màn hình hoàn toàn với CSS.

32. Supersized

Supersized là một plugin màn hình nền đầy đủ tiên tiến cho jQuery. Với nó, bạn có thể hiển thị một tập hợp các hình ảnh như một slideshow chiếm toàn bộ chiều rộng và chiều cao của trang. Điều này làm cho nó hoàn hảo cho các trang web nhiếp ảnh, danh mục đầu tư, hoặc những trang sự kiện. Các plugin đi kèm với rất nhiều tùy chọn, hỗ trợ nhiều hiệu ứng chuyển tiếp và có thể được mở rộng với chủ đề tùy chỉnh.

Trưng bày và hiệu ứng hình ảnh

33. jQuery TouchTouch

jQuery TouchTouch là một plugin nhằm mục đích đơn giản để sử dụng và làm việc trên các thiết bị di động. Nó sử dụng CSS quá trình chuyển đổi để làm cho hình ảnh động mượt mà hơn, và tải trước hình ảnh động. Ngoài ra, nó có thể được hoàn toàn thiết kế lại bằng cách sửa đổi một tập tin CSS duy nhất.

34. iPicture

iPicture là một jQuery plugin có thể tạo ra tương tác hình ảnh walkthroughs. Nó có thể che phủ chú thích và gợi ý trên đầu trang của hình ảnh, và trình bày nội dung phong phú như HTML, hình ảnh và video. Nó rất dễ dàng để tích hợp vào trang web của bạn và có thể được tùy biến và mở rộng với CSS.

35. Adipoli (Một jQuery Plugin hover ảnh)

Adipoli là một plugin jQuery để tạo phong cách hình ảnh hiệu ứng chuyển động. Với nó, bạn có thể biến hình ảnh màu đen và trắng, áp dụng popout, cắt nhỏ và hộp chuyển cảnh.

36. Swipebox

Swipebox là một plugin lightbox hỗ trợ máy tính để bàn, thiết bị di động và trình duyệt máy tính bảng. Nó hiểu được cử chỉ swipe và bàn phím điều hướng.

37. TiltShift.js

TiltShift.js là một plugin gọn gàng mà tái tạo các hiệu ứng tilt-shift (tạo ra đối tượng thực tế để xuất hiện dưới dạng thu nhỏ) sử dụng CSS3 bộ lọc hình ảnh. Tin xấu là điều này chỉ hoạt động trên Chrome và Safari vào lúc này, nhưng hỗ trợ nên dần dần trong các trình duyệt khác.

38. Threesixty.js

Threesixty.js là một plugin jQuery tạo ra tầm nhìn 360 độ có thể kéo được. Bạn phải cung cấp các plugin với đường dẫn đến một tập hợp các hình ảnh của sản phẩm của bạn (bắn từ góc độ khác nhau) và Threesixty.js sẽ lắp ráp chúng thành một cái nhìn tương tác. Bạn có thể kéo hoặc sử dụng các phím mũi tên để khám phá các đối tượng từ góc độ khác nhau.

39. Swipe.js

Swipe.js là một thanh trượt. Điều gì làm cho nó nổi bật là nó nhằm mục đích thiết bị cảm ứng. Điều này cho phép nó không chỉ hiểu những cử chỉ, nhưng cũng phản ứng chạm tương tự như một ứng dụng bản địa. Nó có ranh giới kháng và phòng chống cuộn và tương thích với các trình duyệt từ IE7 trở đi.

40. CamanJS

CamanJS là một thư viện xử lý ảnh mạnh mẽ, được xây dựng trên các phần tử canvas. Với nó, bạn có thể thao tác các điểm ảnh của một hình ảnh và đạt được một điều khiển gần như Photoshop. Nếu bạn có thể nhớ, đây là thư viện chúng tôi sử dụng một vài tháng trước để xây dựng một ứng dụng web với các bộ lọc tương tự như Instagram.

41. SpectragramJS

Spectragram là một plugin jQuery nhằm mục đích để làm việc với các API Instagram dễ dàng hơn. Nó có thể lấy feed người sử dụng, hình ảnh phổ biến, hình ảnh với cụm từ cụ thể và nhiều hơn nữa.

jQuery Plugins khác

42. jQuery Countdown

jQuery Countdown là một plugin jQuery cho thấy ngày, giờ, phút và giây còn lại cho một sự kiện, và cập nhật thời gian còn lại với mỗi giây một hình ảnh.

43. List.js

List.js là một thư viện mà nâng cao một danh sách HTML đơn giản với các tính năng tìm kiếm, phân loại và lọc các mục bên trong nó. Bạn có thể thêm, chỉnh sửa và loại bỏ các mục tự động. List.js là độc lập và không phụ thuộc vào jQuery hoặc các thư viện khác để làm việc.

44. jQuery PointPoint

jQuery PointPoint là một plugin giúp bạn thu hút sự chú ý của người sử dụng đến một phần cụ thể của trang. Nó thể hiện một mũi tên nhỏ bên cạnh con trỏ chuột. Điều này có thể hữu ích cho trỏ đến các trường bỏ lỡ trong form, các nút cần được nhấn, hoặc lỗi xác nhận rằng cần phải được cuộn vào xem.

45. Social Feed

Social Feed là một plugin jQuery mà trình bày một feed của các bản cập nhật công cộng mới nhất trên tài khoản xã hội của bạn. Nó có một thiết kế gọn gàn được xây dựng sử dụng một mẫu, mà bạn có thể dễ dàng tùy chỉnh.

46. Hook.js

Hook.js là một trải nghiệm thú vị, sẽ đem lại tính năng “kéo để làm mới” mà bạn thường thấy trong các ứng dụng điện thoại di động, vào các trang web. Bạn có thể sử dụng để cập nhật trang web di động của bạn với nội dung mới, lấy bài viết mới và nhiều hơn nữa.

47. jQuery PercentageLoader

PercentageLoader là một plugin jQuery để hiển thị một widget tiến trình (progress) 1 cách trực quan và hấp dẫn hơn. Nó sử dụng HTML5 canvas cho đồ họa phong phú với chỉ một file javascript cần thiết 10KB (minified), sử dụng các vector chứ không phải là hình ảnh để có thể dễ dàng triển khai tại các kích cỡ khác nhau.

48. Chart.js

Chart.js là một thư viện biểu đồ mới mà sử dụng phần tử canvas HTML5 và cung cấp callbacks cho IE7 / 8. Thư viện hỗ trợ 6 loại biểu đồ là động và hoàn toàn tùy biến. Chart.js không có bất kỳ phụ thuộc và có kích thước nhỏ hơn 5KB. Nói lời tạm biệt với flash!

49. Tooltipster

Tooltipster là một plugin jQuery mạnh để hiển thị tooltip. Nó hoạt động trên trình duyệt máy tính để bàn và di động, cung cấp cho bạn toàn quyền kiểm soát nội dung của phần chú thích và hỗ trợ một số chức năng callbacks để bạn có thể móc nó vào ứng dụng của bạn. Phù hợp với HTML5 và có thể style theo ý thích của riêng bạn bằng cách sử dụng CSS.

50. Toolbar.js

Toolbar.js là một plugin jQuery cho phép bạn hiển thị một menu pop-up gọn gàng. Bạn có thể chọn các hành động và các biểu tượng được thể hiện trong trình đơn và lắng nghe cho các sự kiện. Điều này là hoàn hảo để làm tăng các không gian hạn chế của một giao diện ứng dụng web di động.

51. gmaps.js

Gmaps.js là một thư viện mạnh mẽ cho phép làm việc với Google Maps dễ dàng hơn. Bạn có thể đặt dấu, nghe cho các sự kiện, thiết lập tọa độ, mức độ phóng to và nhiều hơn nữa, tất cả với một cú pháp jQuery. Và tôi khuyên bạn nên dùng nó.

Nguồn: Sưu tầm