時間に追われる制作者にとって、迅速に設置できる高機能なプラグイン程ありがたいものはありません。
今回は秒単位で設置可能な高機能プラグインをご紹介します。
実際に最低何秒で設置可能か頑張って測ってみました。
※前提として基本のマークアップとCSSは完了しているものとします。
設置サンプルサイトを見ながら読んでみてください。
bxSlider
▼ダウンロードと設置サンプルはこちら
▼英語が苦手な方はこちらを参考にしてください
レスポンシブ対応の高機能スライダーが秒速設置できてしまいます。
！設置スタート！
❶プラグインのCSSを読み込みます 12秒
❷ｊQueryライブラリとプラグインのｊQueryを読み込みこみます 18秒
❸bxSlider用のクラスをHTMLに付与します 5秒
❹bxSliderを呼び出すスクリプトを設置します 7秒
（オプション）機能の拡張設定をします 10秒（最短）
トータル 42秒/52秒（オプション込）
bxSliderは設置がとても簡単なスライダーです。オプションも豊富で、スマートホンのフリックに対応させることも簡単にできます。オプションの設置は④で設置した bxSliderを呼び出すスクリプトに、オプション指定を追記するだけです。
オプションは膨大な量があるので、設置前に一通り実装したいものを選んでおくとよいでしょう。
▼オプションはこちら
簡単で高機能なbxSlider、ぜひお試しください。設置には1分かかりません！
.customSelect()
▼ダウンロードと設置サンプルはこちら
http://adam.co/lab/jquery/customselect/
▼英語が苦手な方はこちらを参考にしてください
http://zxcvbnmnbvcxz.com/form-improvement-2-8/
フォームのセレクトボックスをカスタマイズしたいときに重宝！秒速でカスタマイズし、おしゃれなスタイルに変身させることができます。
！設置スタート！
❶ｊQueryライブラリとプラグインのｊQueryを読み込みこみます 18秒
❷Selectタグに任意のクラスを付与します 5秒
❸.customSelect()を呼び出すスクリプトを設置します 7秒
❹CSS調整をします 10秒（最短）
トータル 40秒
こちらも1分かからずにセレクトボックスの外観を変更できます。ポイントは④のCSS調整箇所をあらかじめある程度決定しておくことです。
- について、配布サイトにあるように、以下のようにCSSを設定することができます。
.customSelect {
/*セレクトボックスに適用したいスタイルを入れる */
}
.customSelect.customSelectHover {
/*セレクトボックスホバー時のスタイルを入れる */
}
.customSelect.customSelectOpen {
/*セレクトボックスが開いた時のスタイルを入れる*/
}
.customSelect.customSelectFocus {
/* セレクトボックスが選択されているときのスタイルを入れる */
}
.customSelectInner {
/* セレクトボックスの中のスタイル、すなわち矢印のスタイルなどなどを背景画像として指定 */
}
筆者は.customSelectInneの箇所のみをカスタマイズすることが多いので、④の作業は10秒ほどで済みます。
ｔile.js
▼ダウンロードと設置サンプルはこちら
https://urin.github.io/jquery.tile.js/
▼英語が苦手な方はこちらを参考にしてください
横並びのボックスの高さをそろえるよく使う機会のありそうなプラグインです。
このプラグインは行ごとに高さをそろえることも、すべてのボックスの高さをそろえることも可能です。
そして設置がとても簡単です。
！設置スタート！
❶ｊQueryライブラリとプラグインのｊQueryを読み込みこみます 15秒
❷ｔjs用のクラスをHTMLに付与します 10秒（最短）
❸ｔjsを呼び出すスクリプトを設置します 5秒
❹（オプション）行ごとに高さをそろえる場合一行当たりのカラム数を設定します。 2秒（最短）
トータル 30秒/32秒（オプション込）
速い！ 設置時間30秒台のプラグインです。
②に関しては、コーディング時にすべてのボックスにあらかじめ共通クラスを付けておくとよいです。そうすれば改めてクラスを付ける必要がありません。
④については③で設置した
$(クラス名).tile();
を
$(クラス名).tile(カラム数);
とするだけです。
簡単ですね。
このプラグインはとても軽量です。ぜひダウンロードしてスクリプトを見てみてください。
納期が間近なのにまだスライダーが残っている！
突然セレクトボックスをカスタマイズしてほしいとクライアントから要望が来た！
納品しようと思ったらボックスの高さがばらばらだった！
そんな追い詰められたときに、この3つのプラグインが助けてくれるでしょう。
以上、秒速設置が可能な使えるプラグイン3選でした。
- 1694 views
- キム
