【jQuery】CDN有り！カレンダー・ファイルアップロードなど おすすめjQueryプラグイン
こんにちは、ま。です
いろんな動きが簡単にできてWebページに花を持たせてくれたり、データの持ち回りを簡単にして見えないところで大活躍してくれる大変便利な存在であるjQueryですが、世の中にはそれを使ってさらに簡単に便利なものを作って無料で提供している方たちがいます。
大尊敬です。
というわけで今回はjQueryのプラグインをいくつかご紹介します。機会があればぜひ使ってみてください！
jQueryとは
本記事のメインではないですが一応説明しておきましょう。
jQueryとははJavaScriptのためのライブラリです。JavaScriptで書けるんだけどより簡単に書けるようにしたものですね。
今やどのサイトでも必ずと言っていいほど使われているメジャーなものですね。
新卒の頃、HTMLとJSだけでホームページ作って練習してたなか、jQueryとかいうすげぇ奴が現れて感動した記憶があります笑
おすすめプラグイン
ここからは本題のプラグインを紹介していきます。
Fileuploader
ファイルアップロード用のプラグイン。
ドラックアンドドロップでファイルをアップロードするあれが簡単にできます。
<script src="https://ucarecdn.com/libs/widget/3.x/uploadcare.lang.en.min.js"></script>
jQuery Filters
フィルタリング用プラグイン
一覧ページのフィルターに使われていて、検索ボックスに文字を入力するとリアルタイムでマッチするもの以外を消していってくれます。
下記の参考サイトはこれに限らずjQueryのいろんな使い方を紹介してくれてます。
<script src="https://cdnjs.cloudflare.com/ajax/libs/filterizr/2.2.4/jquery.filterizr.min.js" integrity="sha512-7g5NUcH79A/d1+q+cj3KTJ31mCUPkD8f58sFEc98H5015295lT+ZBKWkaMeS6Snbu3m2VdfoW4VbSo9hOAJqYw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>Slick
スライダー用のプラグイン。
スライダー系だとおそらく最も簡単で、実装のための学習コストが低く、完全レスポンシブ対応していることから人気です。
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>Owl Carousel 2
こちらもスライダー用のプラグインです。
Slickとの違いは機能的な面で設定できるオプションが多く、より自由度の高いスライダーが作成できます。
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>FullCalendar
カレンダー生成プラグイン
Googleカレンダーのように予定を入れたりラベルにしたりができます。
AmazonとかUberとかでも利用されてるらしいです。
animatedModal.js
アニメーション付きモーダル用のプラグイン。
フェードしたりしたからスワイプされたり回転したりなど、いろんな動きをするモーダルをシンプルに実装できます。
こちらに限っては、jQueryとCSSだけCDNとなっており、本体は公式サイトからDLして利用してください。
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="{PATH}/animatedModal.min.js"></script>おわりに
どのプラグインも簡単に実装できますし、見た目もデフォルトから色を変える程度で作りたいページにあったコンテンツを作成できるんじゃないかなと思います！
今回CDNで載せましたがどのプラグインもDL版が公式サイトにて配布されているので、
処理的にCDNじゃだめかなと言った場合はファイルDLして試してみてください！
jQuery関連の記事もぜひ読んでみてください。