【2019年版】jQueryプラグイン78選。種類別一覧まとめ

JavaScriptをより簡単に実装するためのライブラリであるjQuery。

いまやjQueryはさまざまなフレームワークの基礎となっています。

今回は、jQueryのプラグインをジャンル別に78個ご紹介します。

フォーム作成用プラグイン

1. jQuery formBuilder

1. formbuilder_online

jQuery formBuilderというプラグインを使うと、ドラッグ・アンド・ドロップの操作のみでフォームを作成できます。HTMLタグも簡単に挿入できます。要素を選定すると、自動的に順番が決定され、インターネット上で変えられません。XMLとJSONのデータにも対応しています。

jQuery formBuilder

2. Submitter

2. fengyuanchen_github_io_submitter

Submitterとは、簡単に連絡フォームを作成できるプラグインです。SubmitterのWebサイトに表示されているコードの通りに転載すると、変更なしで実施できます。「お名前」「メールアドレス」「コメント欄」の項目3個しかないのに、コードを編集すると、項目をより増やせます。

Submitter

3. Stretchy

3. leaverou_github_io_stretchy

Stretchyとは、記入項目に文字を打つと、項目のサイズが大きくなったり、小さくなったりするプラグインのことです。このプラグインは、ユーザーの注目を引きたい場合に使います。JavaScriptを使わず、HTMLでコードを修正できます。

Stretchy

4. Maximum Characters

4. max-char-limit-warning

Maximum Charactersとは、文字制限を超えるユーザーに警告を表示させるプラグインです。

クレジットカード情報の入力などの他のデータベースとの連携が必要なときも使えます。文字数の誤りに早めに気付ければ、UXも向上するでしょう。

Maximum Characters

5. jQuery MultiSelect

5. New-Multiselect

jQuery MultiSelectとは、複数選択のドロップダウンメニューをチェックボックスに変更するプラグインのこと。コードのファイルサイズは8kbと軽量なため、データの負荷が少ないです。UI側はCSSでカスタマイズできます。

jQuery MultiSelect

6. Textbox Revision Tracker

6. textbox-revision-tracker

Textbox Revision Trackerとは、HTMLの修正を管理できるプラグインです。Textbook Revision Trackerは、バージョン管理にも対応しています。記入項目に記入された情報も修正できます。

Textbox Revision Tracker

7. Card

7. card

Cardとは、クレジットカード情報の入力フォームを追加できるプラグインです。コードはたったの一行。カードの情報を入力することにより、アニメーションでカードのイメージが表示されます。しかし、カードの絵柄はMastercard、Visa、Discover、American Expressの4社しかないのでご注意を。新たに作るなら、カードの選択肢とロゴをCSSで作らなければなりません。

Card

8. Bootstrap 3 Contact Form with Google’s reCaptcha

8. bootstrap3-contact-form

reCAPTCHAとは、ボットによるクリック詐欺を防ぐために、チェックボックスをクリックすることや、ユーザーからのアクションを求めているシステムです。reCAPTCHAのボタンを押さないと、メッセージがサイトの送信先に送信されないため、スパムが減ります。このプラグインは、Bootstrapの技術も用いています。

Bootstrap 3 Contact Form with Google’s reCaptcha

9. Bootstrap Maxlength

9. bootstrap-maxlength

Bootstrap-Maxlengthとは、HTML5のmaxlengthという要素を活用し、記入項目の文字制限を注意するプラグインのこと。Bootstrap-Maxlengthに、Twitterが使っている、文字制限の表示仕様が挿入されています。Maxlengthにおいて、行の長さによる改行などのカスタマイズできる要素はいくつかあります。

Bootstrap-Maxlength

10. Mobiscroll Forms

10. Mobiscroll-Forms

Mobiscroll Formsとは、パソコンやタブレット端末、複数のOSなどに対応しているフォーム作成のプラグインのこと。フォームの見た目を自由にカスタマイズできます。ボタンとスタイリングをカスタマイズできます。

Mobiscroll Forms

11. Multipicker

 

11. MultipickerMultipickerは日付や曜日、番号、その他などを選択するためのラジオボタンやチェックボックスを取り付けるためのjQueryプラグいいんです。択一選択、複数選択のいずれにも対応しています。

Multipicker

12. Contact Form to Google Spreadsheet

12. Contact-Form-to-Google-Spre

Contact Form to Google Spreadsheetとは、HTMLとCSS3によるお問い合わせフォームをGoogle Spreadsheetに実装するためのプラグインのこと。フォームを設定するときに、フォームにreCAPTCHAも挿入できます。

Google Spreadsheetに連携しているため、Google Spreadsheetをデータベースとして使い、新しい情報が直接に記入されます。

Contact Form to Google Spreadsheet

13. Dirrty13. Dirrty

Dirrtyとは、記入項目が編集されたかどうかを判断するプラグインのことです。Dirrtyを使うと、項目のデータを保存することができ、フォーム内のイベントも発生できます。これによって、システム上では、ユーザーは再度記入しなければいけないのかが分かります。

Dirrty

14. jquery.inputmask

14. Inputmask

jquery.inputmaskは、フォームの入力エリアに例文(マスク)を表示するするjQueryプラグインです。「何を入力したらいいの?」という疑問を解決し、入力を補助します。お問い合わせやアンケート、投票などに使用すると、とても効果的です。構築も簡単なのでおすすめです。

Inputmask

15. Formbase

15. formbase

Formbaseとは、閲覧者のデバイス頻繁に使われている記入項目をベースに連絡フォームを作成できるプラグインです。実装できるフォームの種類は、テキストエリア、チェックボックス、ラジオボタンです。

Formbase

16. Form Designer

16. Form-Designer

Form-Designerとは、ログインフォームや、お問い合わせフォーム、コメント欄などを作成すできるツールのこと。Form-Designerのシステムによって、コーディングの知識が必要ないです。必要に応じて、HTMLやCSSのコードも反映されます。49個ほどのフォントが入り、簡単に調整できます。

Form Designer

17. Choices.js

17. Choices

jQuery非依存のプラグインの中でももっとも人気がる Choices.js 。ドロップダウン内で「現在選択中の要素」の色だけ変更する、なんてことができます。ホバーした要素に「.is-highlighted」クラスが付与されるという仕組みです。

Choices.js

18. Addel

18. Addel

Addelは、動的なフォーム設計に使うjQueryプラグインです。入力・選択項目の数をユーザーが自ら増やせるような機能のために作ります。

Addel

19. Timon

19. Timon

Timonは、ユーザーのフォーム記入項目をステップ別に分けて表示させたいときに便利です。大量の入力項目が並んでいるよりは心理的負担を軽減できるのでおすすめ。有料のjQueryプラグインです。レスポンシブデザインに対応している他、オプションとデザインが多彩で、簡単にカスタマイズできます。

Timon

20. Contact Tabs

20. Contact-Tabs

タッチタブとは、サイトの右側か左側にあるボタンを押したらフォームが表示されるウィジェットのこと。Contact Tabsとは、タッチタブを作成するためのツールのこと。フォーム12種と記入確認の機能があり、フォームによく使われている項目を自由に組み合わせます。

Contact Tabs

21. Simple Contact Form

21. Simple-Contact-Form

問い合わせフォームを構築するためのプラグイン。AJAXとは、セキュリティのために使われている、ウェブブラウザ内で非同期通信を行いながらインターフェイスの構築を行うプログラミング手法のこと。Simple Contact Formというプラグインは、AJAXの技術を用いています。

Simple Contact Form

22. Form Recover

22. Form-Recover

間違った情報の送信や予期せぬエラーのために、何千もの注文や重要なメッセージを紛失していると言われています。Form Recoverを使えば、ユーザー側のクラッシュや、ページからの離脱があっても、データを保存できるプラグインです。また、ユーザーが誤って情報を記入すると、自動的に保存されたフォームのデータがあるため、ユーザーはフォームに戻り、記入された情報を再度記入できます。

Form Recover

23. Forms Plus

23. Forms-Plus

Forms Plusとは、フォームのフレームワークを作成できるプラグインのこと。CSSを通して、日付/時刻ピッカー、カラーピッカー、スライダ、キャプチャフィールド、スピナー、なと多くの機能をカスタマイズできます。

Forms Plus

24. Prosto Forms

24. Prosto-Forms

Presto Formsとは、フォームを作成できる、多くのJavaScriptライブラリに対応しているプラグインのことです。Presto Formsでは、いくつかの種類のフォームを作成でき、スマートフォンにも対応しています。フォームの種類は30個あり、フォームの項目のどれも追加したり、削除したりできます。

Prosto Forms

25. Simple Subscription Popup

25. Simple-Subscription-Popup

Simple Signup Formとは、メールリストのためにユーザーの個人情報を収集できる、サインアップフォームを作成するプラグインのことです。カスタマイズも可能。MailChimpやほかのメールデータベースに対応しています。

Simple Subscription Popup

26. Foggle

26. FogglejQuery Foggleは、ユーザーの入力に基づいてインタラクティブなアクションを返す機能を実装できるプラグインです。JavaScriptを書いて同じ機能を実現することはできますが、プラグインを使えばコードはたった一行で済みます。

Foggle

27. Easy Forms

27. Easy-Forms-1

Easy Formsとは、複数のカテゴリーのフォームを作成できるツールのこと。Easy Formsにおいて、ドラッグ・アンド・ドロップで構築ができます。そのうえ、複数の段階用のフォームや、テンプレート、テーマ、アナリティクスなど、さまざまな機能があります。

Easy Forms

コーディングを補助するプラグイン

28. Searchable Option List

28. searchable-option-list

Searchable Option List (SOL)とは、HTMLによるセレクト要素の見た目をカスタマイズできるプラグインのことです。チェックボックスを挿入し、マウスをドラッグすると、複数の項目を選定できます。

Searchable Option List

29. SmartSelect

30. smartselect

SmartSelectとは、Webサイトにおけるコードを見つけて編集できるプラグインのこと。SmartSelectを使うと、コードがセクションで分かれているため、指定している要素がすぐに分かります。Bootstrapとの互換性もあります。

SmartSelect

30. Conditionize.js

31. Conditionize

Conditionize.jsとは、記入項目にメッセージを表示することと、ユーザーが入力された情報によって項目を非表示できるプラグインのことです。このプラグインがデータ属性を使い、マークアップ言語に要素を残すため、JavaScriptを使わなくても、項目を表示しないようにできます。

Conditionize.js

31. Hierarchy Select

32. Hierarchy-Select

階層的なselectボックスを実装できるBootstrapプラグイン。Live Hierarchyによって、簡単にコードで要素を調べたり、変更したりできます。コードを見つけやすくなるには、自動的記入の機能が導入されています。

Hierarchy Select

32. File Input

33. File-Input-1

ボタンはブラウザによって少しずつ見え方が変わります。このプラグインは、記入項目のUXを統一したいと願った開発者によって作られました。File Inputを通して、全ブラウザにも対応できるファイルアップロードのボタンに統一できます。

File Input

33. JSON Manager

34. JSON-Manager

JSON Managerとは、JavaScriptおよびJSONの要素をHTMLのフォームに変更し、またはその逆もできるプラグインのことです。JSONをHTMLに変更すると、コードを修正し、変更できます。コードの編集が終わってから、JSONに切り替え、サイトに再度記入できます。

JSON Manager

34. jQueryLined TextArea

35. TextArea

JQuery LinedTextAreaはtextareaに行数を自動付与するスクリプトです。jQueryに依存しています。用途はシンプルですがいい機能です。

TextArea

35. Parsley

36. Parsley

Parsley.jsとは、JavaScriptによってフォームの記入を確認できるプラグインのこと。UIとUXを重視にしているため、見た目をカスタマイズできます。複数のフォームにも挿入できます。

Parsley

36. Pep

37. Pep-1

Pepというプラグインを使うと、DOM要素をドラッグできるオブジェクトに変更できます。DOM (Document Object Model) とは、ドキュメントを構成するオブジェクトにアクセスする方法のことです。

Pep

37. Dragarrange

38. Dragarrange 40. Rich-Functional-List

Dragarrangeとは、ドラッグするだけでDOMの順番を変えられるプラグインのことです。CSSを使う必要がなく、コーディングの定義を呼び出すだけで完成できます。

Dragarrange

38. Table-dragger

39. Table-dragger

TableDraggerは、テーブルの列や行をドラッグ&ドロップで入れ替えられるライブラリです。セルの広さを調整でき、行と列の順番まで変更できます。

Table-dragger

39. Rich Functional List

40. Rich-Functional-List

Rich Functional Listとは、jQueryのカード型のデザインをWebサイトに挿入できるプラグインのこと。複数の端末と他のjQueryプラグインにも対応しています。カード型のUIでWebアプリケーションを作るのに最適。

Rich Functional List

デザイン実装のプラグイン

40. Popselect

42. jquer_in_popSelect

PopSelectは、クリック可能な要素にフォーカスすると要素がホビングするという機能を実装します。直感的な操作性を実現。

PopSelect

41. jQuery Toggle Candlestick

43. candlestick

jQuery Toggle Candlestickとは、チェックボックスをトグルスィッチに変更するプラグインのこと。複数のスタイルを選定できます。jQueryとBootstrapの環境が必要です。IE、Safari、Firefox、Opera、Chromeのブラウザに対応しています。

jQuery Toggle Candlesitck

42. Gridster.js

45. Gridster

Gridsterとは、ドラッグ・アンド・ドロップ操作でサイトを作成できるプラグインのこと。簡単にコラムの数を増やしたり、他の機能を減らしたりできます。コラムの位置を変更でき、自由にレイアウトを変えられます。

Gridster.js

43. Onebyone Slider

46. Onebyone-Slider

OneByOne Sliderとは、CSS3を活用しているスライダーのプラグインのこと。スマートフォンやタブレット端末など、各デバイスに対応しているため、どんな端末を使っても正確に表示されます。

Onebyone Slider

44. TableDnD

47. TableDnD

TableDnDとは、行の順位も変更できるプラグインのことです。すでにコードがHTMLとして挿入されているとき、TableDnDのコードを入れると、ドラッグが可能になります。

TableDnD

45. Nestable

48. Nestable

Nestableとは、ウィジェットの一覧表を作成できるプラグインのこと。ドラッグ機能を搭載しているため、ユーザーが自由にウィジェットの順番とウィジェットの段階を調整できます。

Nestable

46. jDashboard

49. Dashboard

jDashboardとは、ウィジェットのエリアを作成できる、ドラッグ・アンド・ドロップの機能を採用しているプラグインのこと。エリアの作成が完成したら、MySQLかHTML5として保存されます。ユーザーが自由にエリアを動かしたり、閉じたりできます。

jDashboard

47. jQuery Azexo Composer WYSIWYG

50. jQuery-Azexo-Composer-WYSIW-1

jQuery Azexo Composer WYSIWYGとは、HTMLとBootstrapとJavaScriptによるドラッグ・アンド・ドロップでページを作成できるプラグインのこと。コンテンツスライダーや、CSS3かJavaScriptのアニメーションなど、カスタマイズ性が高いです。Bootstrapからの要素を挿入できます。

jQuery Azexo Composer WYSIWYG

48. LobiPanel

51. LobiPanel-1

LobiPanelとは、Bootstrapパンネルを作成できるプラグインのこと。パネルのサイズなどの要素を変更できます。また、URLを設定し、URL先のコンテンツをパンネルに読み込めます。ユーザーもパンネルをドラッグしたり、閉めたりすることなど、自由にパンネルを使えます。

LobiPanel

ファイルのアップロードのプラグイン

49. Fileuploader

52. Fileuploader-1

Fileuploaderとは、HTML5を用いている、ドラッグ・アンド・ドロップでファイルをアップロードするためのツールのこと。複数のファイルを同時にアップすることや、すでにアップしていたファイルを修正することなど、いくつかの機能があります。しかし、ユーザーが大きなファイルや多くのファイルをアップロードできないようにも設定できます。写真の場合、画像を加工できます。

Fileuploader

50. Drop Uploader

53. Drop-Uploader

Drop Uploaderとは、普通の記入項目をファイルのアップロードに対応できるようになるためのプラグインのこと。フォームのHTMLを編集しなくても、プラグインのファイルをアップロードする次第に完成します。そして、同時に複数のファイルをアップロードできます。

Drop Uploader

51. DropArea

54. DropArea

Dropareaは、画像のドラッグアンドドロップによるファイルアップロードのUIを作るライブラリです。 ファイルアップロードをより快適にします。

DropArea

52. jQuery File Uploader

55. jQuery-File-Uploader

jQuery File Uploaderとは、AJAXの技術を採用しているファイルアップローダーのこと。このプラグインを使うには、JavaScriptとjQueryの知識が必要です。このプラグインが最新のブラウザに対応しているのに、古いブラウザへの対応が不可能と。このプラグインは、フロントエンドとバックエンドの開発に挿入しやすいうえ、軽量のプラグインになるために開発されました。

jQuery File Uploader

53. FileAPI

56. FileAPI

Webブラウザの操作からローカルファイルにアクセスでき流ようにする機能。セキュリティの問題を解決するFile APIの登場で、画像のアップロード方法が一気に変わった。というのを使用し、ローカルファイルを読み込むことができるようになった。

FileAPI

記入内容チェックができるバリデードプラグイン

54. Form Validation

57. formvalidation_io

FormValidationを使用すると、タブ、折りたたみ可能なパネル、アコーディオンなど、ウィザードのようなインターフェイスを検証できます。

Form Validation

55. Bootstrap Validator

58. 1000hz_github_io_bootstrap-validator

記入内容のバリデードができます。jQueryにも対応。エラーメッセージのバリエーションも変更できます。

Bootstrap Validator

56. Guardian

59. guardian

Guardianは、Webサイトの入力フォームにバリデーション機能を実装するできるjQueryプラグインです。フォーム内が空白の時や間違った情報を入力している時には、「submit」ボタンを押す前にエラーメッセージを表示させられます。

Guardian

57. Validatrix

60. validatrix

 

Validatrixは実装方法がとてもシンプル。必須項目の場合、「.required」というコードを記入すると、バリデードフォームが作成されます。そして、どんな要素でも、プラグインのスピードを最適化するには、<div>を入れる必要があります。

Validatrix

58. AttrValidate

61. AttrValidate

AttrValidateとは、記入されたテキストが合っているかどうかを確認できるjQueryのプラグインです。

AttrValidate

59. Spider

62. Spider

Spiderとは、ユーザーのメールアドレスを確認できるためのプラグインのこと。コード記入や、郵便番号、クレジットカードの確認などにも使用できます。クレジットカードや郵便番号などの数字を確認できます。ボタンなどのフォームの見た目をカスタマイズできます。

Spider

60. Validatr

63. Validatr

HTML5で使えるjQueryのプラグインであるValidatrを紹介します。このプラグインを使えば、HTML5上の入力要素をチェックをしれくれます。フォームにおかしな値を入力するとエラーが表示されるという便利なプラグインです。

Validatr

61. Smoke

64. Smoke

Bootstrapと組み合わせると、簡単にエラーメッセージやプログレスバーなどの便利機能が使えるようになるプラグインです。アラートやフルスクリーンなど、他6機能も含まれており、簡単なコードで実装できます。

Smoke

メニュー作成のプラグイン

62. SmartMenu

65. SmartMenu-2

SmartMenuを使えば、異なるサブメニューを持つ複数のメニューを作れますカスタマイズ性が高く、色やアニメーション、メニュの形などを調整できます。ブラウザや端末への対応も幅広いです。

SmartMenu

63. Select.js

66. Select

JavaScriptおよびCSSのライブラリを用いているプルダウンメニューの作成に役立つプラグインです。

Select.js

64. jQuery Nice Select

67. jquery-nice-select

jQuery Nice Selectとは、nativeのドロップダウンリストのセレクト要素をカスタマイズできるプラグインのこと。上記画像のようなリストになり、CSSによる調整もできるため、対応性が高いプラグインです。

jQuery Nice Select

検索窓のプラグイン

65. Advanced Search Form

68. advanced-search-form

Advanced Search Formとは、検索窓を設置できるjQueryプラグインです。頻繁に検索されているキーワードや、よく読まれている記事など、複数のサジェストを表示させられる他、フィルタリングオプションとクイックリンクもつけられます。

Advanced Search Form

66. Animated Search Filter Plugin

69. search-filter

Animated Search Filter Pluginとは、ユーザーがキーワードを記入するうちに、アニメーションによってサジェストが表示されたり、表示されなくなるプラグインのこと。このプラグインは、コードを記入すると、ページのどこでも表示され、検索フィルターも導入できます。

Animated Search Filter Plugin

67. Real-Time Search in JavaScript

70. real-time-search-in-javascript

Real-Time Search in JavaScriptとは、文字ろリアルタイミング検索してハイライトを当てるプラグインのこと。

Real-Time Search in JavaScript

68. Character and Word Counter

78. Character-and-Word-Counter

Character and Word Counterは、ワード数を検知するプラグインのです。記入制限を設定できます。エラーメッセージのカスタマイズもできます。

Character and Word Counter

オートコンプリート用のプラグイン

69. Horsey

71. horsey

Horseyとは、オートコンプリートを作成するためのプラグインです。Romeという日程の管理プラグインや、Insigniaというタグ修正のプラグインなどと連携できます。

Horsey

70. jQueryflexdatalist

72. projects_sergiodinislopes_pt_flexdatalist

オートコンプリート機能が実装できるプラグイン。さらにタグ入力機能も付いています。

jQueryflexdatalist

71. Cleave.js

73. Cleave

オートコンプリート機能は上手に使えばUXの改善に役立てます。例えば金額を入力するとき、0が3つつくごとにカンマを入れるなどといったことができます。

Cleave.js

72. superplaceholder.js

74. kushagragour_in_lab_superplaceholderjs

フォームに入力してほしい文字列を事前に指定できるjQueryプラグインです。ログインIDがメールアドレスなら「email」と示しておく、といったことができます。

superplaceholder.js

その他のプラグイン

73. pickList75. pickList

pickListとは、一覧表から要素を選べるインターフェイスを作成できるプラグインのことです。

pickList

74. jquery.auto-translate

76. jquery.auto-translate

jquery.auto-translateとは、GoogleやYahooなどの翻訳サービスを引用して、記入項目やサイト内の文章を翻訳するプラグインです。

jquery.auto-translate

75. SmartWizard

77. SmartWizard

Smart WizardはjQuery用のステップウィザードプラグインです。Bootstrapにも対応しています。支払い画面や個人情報入力画面などが実装できます。

SmartWizard

76. OrderNow

79. OrderNow

OrderNowとは、請求書とユーザーからの注文を管理するためのプラグインです。レスポンシブに対応しています。カートの各段階において、プロジェクトの各段階用のコードをURLに設置しているため、各ユーザーをトラッキングできます。

OrderNow

77. WizardPro

80. WizardPro

WizardProとは、Webサイトのウィザードを作成できるプラグインです。AJAXで構成されているため、セキュリティ性が高いです。

WizardPro

78. LobiList

81. LobiList

LobiListは、サービス内にToDoリストを作成するためのプラグインです。色を付けることなど、リストの見た目をカスタマイズできます。ドラッグ・アンド・ドロップでリストとタスクのどちらにも操作でき、リストのタスクを完成しているうちに、チェックボックスをクリックできます。

LobiList

SHARE

RELATED

  • お問い合わせ
  • お問い合わせ
  • お問い合わせ