CategoryjQueryプラグイン

セレクトボックスを使いやすくカスタマイズするjQueryプラグイン「Chosen」

Chosen

フォームなどでよく使われるセレクトボックスですが、デフォルトのままで使うことが多いと思います。

そのセレクトボックスをもっと使いやすくカスタマイズしてくれるjQueryプラグインがこの「Chosen」です。

セレクトボックスをプルダウンすると検索窓が表示され、そこからインスタンス検索が可能になります。選択する項目が増えるほど効力を発揮できそうですね。

動作は次のサンプルを見ていただいた方がわかりやすいと思います。

セレクトボックスを使いやすくカスタマイズするjQueryプラグイン「Chosen」のサンプル


見た目もスタイリッシュになり、検索窓からリアルタイムに絞り込みできるのが嬉しいですね。

→「セレクトボックスを使いやすくカスタマイズするjQueryプラグイン「Chosen」」の続きを読む

モーダルをフルスクリーンで表示させるjQueryプラグイン「animatedModal.js」

モーダルウィンドウというと、クリックするとポップアップで小窓が開いてそこにコンテンツが表示されるというイメージがありますが、このjQueryプラグイン「animatedModal.js」を使うと、小窓ではなくフルスクリーンでモーダルウィンドウが表示されます。

動きもにゅるっと、気持ちいい動きになっています。

フルスクリーンで表示されるので、モーダルで表示させたいコンテンツが多い時などに重宝しそうです。

サンプルを作ってみました。

⇒ モーダルをフルスクリーンで表示させるjQueryプラグイン「animatedModal.js」サンプル


動きは、サンプルを見ていただけるとわかると思います。

→「モーダルをフルスクリーンで表示させるjQueryプラグイン「animatedModal.js」」の続きを読む

ルーレット風なものが作れるjQueryプラグイン「Roulette.js 」

Roulette.js

Roulette.jsは、画像をルーレット(スロット)のように回転させることができるjQueryプラグインです。

画像を数字に変更すれば、ビンゴっぽいのも作れるかも。

みてもらうのが一番早いと思うので、サンプルをご覧ください。

→ ルーレット風なものが作れるjQueryプラグイン「Roulette.js 」サンプル


シンプルでおしゃれな感じなので[START]で回転し始めます。[STOP]で少しずつスピードが落ちながら、回転が止まります。

ググっても日本語の解説がなかったので、ちょっと気合いれて使い方を解説しますね。

→「ルーレット風なものが作れるjQueryプラグイン「Roulette.js 」」の続きを読む

スマホページでクリックすると横から現れるメニュー用jQueryプラグイン「Drawer Slide Menu」

Drawer Slide Menu | jQuery plugin for responsive menu

Facebookなどスマホページでメニューアイコンをクリックすると、横からメニューがにゅるっと出てくるのがあります。これをドロワー(ナビゲーションドロワー)というそうです。

drawerというのは、英語で引き出しという意味。意味をきくと納得ですね〜。

そのドロワーを簡単に実装できるのがこのjQueryプラグイン「Drawer Slide Menu」です。設置の仕方も簡単です。

サンプルを作りましたので、ご覧いただけるとわかりやすいと思います。スマホからもPCからも動作が確認できます。

⇒ スマホページでクリックすると横から現れるメニュー用jQueryプラグイン「Drawer Slide Menu」サンプル


使い方も簡単。すぐに使えて動作も快適です。jQueryプラグイン「Drawer Slide Menu」の使い方は続きをご覧下さい。

→「スマホページでクリックすると横から現れるメニュー用jQueryプラグイン「Drawer Slide Menu」」の続きを読む

フォームの日付入力に便利。カレンダーで日付ピッカー「Rome」

Rome

お問い合わせや申込フォームなどで、日付を入力してもらうことも多いと思います。そんなときに、カレンダーで日付をピックしてもらうようにすると大変便利ですよね。

そんなときに便利なのが、このカレンダーライブラリー「Rome」です。

サンプルを作ってみました。

フォームの日付入力に便利。カレンダーで日付ピッカー「Rome」サンプル


日付だけでなく、時間との組み合わせ、または時間のみの入力も可能です。構成は2ファイルのみで、jQueryがなくても動きます。

使用方法は続きをどうぞ。

→「フォームの日付入力に便利。カレンダーで日付ピッカー「Rome」」の続きを読む

アコーディオン表示の「続きを読む」が簡単に実装できるjQueryプラグイン『jTruncSubstr』

文章が長くなってしまったときなど、「続きを読む」などで文章を省略させて途中まで表示させたい場合があります。

その「続きを読む」が簡単に実装できて、リンクをクリックすると、残りの文章がアコーディオン式に表示されたり、非表示にしたりの動作を簡単に実装することができるのが、このjQueryプラグイン『jTruncSubstr』。

このjQueryプラグインは、『jTruncate』というjQueryプラグインをもとに日本語でもスムーズに使えるようにしてあります。ちなみに『jTruncate』は日本語ではダメ・・。

その動作はサンプルを見て頂いた方が早いと思います。

⇒ アコーディオン表示の「続きを読む」が簡単に実装できるjQueryプラグイン『jTruncSubstr』


使い方は続きをご覧下さい。

→「アコーディオン表示の「続きを読む」が簡単に実装できるjQueryプラグイン『jTruncSubstr』」の続きを読む

audioタグをスマホフレンドリーでレスポンシブにカスタマイズする「Audio Player: Responsive and Touch-Friendly」jQueryプラグイン

Audio Player: Responsive and Touch-Friendly

サイト上で音楽を流したいという場合に便利なjQueryオーディオプレーヤー用のプラグインです。

今や、スマホやタブレットなどタッチパネルでウェブをみるのは当たり前。

当然、レスポンシブでタッチフレンドリーなオーディオプレイヤーも必要になる場合がでてくるはずです。

HTML5から新しく追加された<audio>タグを使えば、サイト上で音楽を鳴らすのは簡単ですが、下のような感じでちょっと味気ない。

スクリーンショット 2014-10-15 10.48.47

それを、レスポンシブでタッチフレンドリーでお洒落にと三拍子あわせてくれるjQueryプラグインがこの「Audio Player: Responsive and Touch-Friendly」です。

サンプルを作ってみました。ぜひスマホでも確認してみて下さい。

⇒ audioタグをスマホフレンドリーでレスポンシブにカスタマイズする「Audio Player: Responsive and Touch-Friendly」jQueryプラグインサンプル


サンプルではコントロールバーをページの上部に設置していますが、下に設置してあげるとスマホとかだといい感じかなと思います。

設置方法も簡単なので、おすすめです。

→「audioタグをスマホフレンドリーでレスポンシブにカスタマイズする「Audio Player: Responsive and Touch-Friendly」jQueryプラグイン」の続きを読む

スクロールしても固定されるメニューが作れるjQueryプラグイン「stickUp」

jQueryプラグイン「stickUp」はページの上部にメニューを固定して表示させることができるjQueryプラグインです。

ワンページスクロールサイトのみならず、縦長にコンテンツがあるページにメニューを固定させて表示させておくというのは、最近よく使われる手法です。

サンプルを作ってみましたので、みてもらうとわかりやすいと思います。

⇒ スクロールしても固定されるメニューが作れるjQueryプラグイン「stickUp」サンプル


設置の仕方も簡単にできる便利なjQueryプラグインです。

→「スクロールしても固定されるメニューが作れるjQueryプラグイン「stickUp」」の続きを読む

スマホでもデスクトップでも使える横スクロールスライダー『Portfoliojs』jQueryギャラリープラグイン

Portfoliojs

今回は、デスクトップでもタブレットでもスマホにでも使えるイメージスライダー『Portfoliojs』を紹介します。

このjQueryギャラリープラグイン『Portfoliojs』の特徴は、スマホやタブレット上で指でスワイプして次の画像にスライドできる点。もちろんマウスでもキーボードでもスライドすることができます。

サンプルを作ってみました。見て頂いたほうが分かりやすいと思います。

レスポンシブデザインにぴったりな横スクロールスライダー『Portfoliojs』サンプル


スマホでみてみると、Facebookのタイムライン上でアルバム画像をみた感じに似てますね。狭い画面を有効に活用できるのでとても便利です。

→「スマホでもデスクトップでも使える横スクロールスライダー『Portfoliojs』jQueryギャラリープラグイン」の続きを読む

窓ガラス越しに雨を降らせるリアルなアニメーション『rainyday.js』

『rainyday.js』は、まるでガラス越しの風景に雨が降ってきたかのようなエフェクトを出すJavaScriptです。HTML5のcanvas機能が使われています。

とてもリアルなので見入ってしまうほど。サンプルを作ってみました。

【サンプル】
窓ガラス越しに雨を降らせるアニメーション『rainyday.js』

・Internet Explorer 8 以降
・Firefox 23 以降
・Google Chrome 27 以降
・Safari 5.1
などのモダンブラウザで動きます。

この『rainyday.js』の使用方法は続きをご覧下さい。

→「窓ガラス越しに雨を降らせるリアルなアニメーション『rainyday.js』」の続きを読む