フォームに何か文字を入力すると、指定の文字位置まで自動でスクロールしてくれるjQueryプラグイン「Mini Help System」をご紹介。 ヘルプテキストやWebアプリケーションのユーザガイドなどに使えそう。 リアルタイムに検索が出来るため、必要な情報に簡単にアクセスが可能になります。 検索した用語はハイライト表示さ​れるためユーザビリティにも優れています。 興味のある方は下のリンクからどうぞ！

こちらもあわせてどうぞ Warning: count(): Parameter must be an array or an object that implements Countable in /home/xs691953/verygoodtown.com/public_html/blog.verygoodtown.com/wordpress/wp-content/plugins/post-plugin-library/common_functions.php on line 174 None Found

Intro.jsを使うと、サイトの紹介したい機能をハイライトで見せる事が出来るため 始めてサイトを訪れたユーザーに分かりやすく伝える事が出来るようになる。 マウスで次へ次へと移動できるしキーボードでも操作可能だ。 他のライブラリにも依存しないので、既存のサイトに簡単に組み込み可能なのも特徴。 ダウンロード、デモは下のリンクからどうぞ！ Intro.js

レスポンシブに対応したクールなカレンダーライブリーを見つけたのでご紹介。 jQueryプラグインなので、簡単に組み込む事が出来ますよ。 ↑画面のようなカレンダーを表示します。 jQeury UIのようにフォームをクリックした際に表示したりする他に、 常に表示させて置くことも簡単に出来ました。 これはかなり使えそうです。 使い方も簡単でjQueryとPickadate.jsを読み込んだ後に、以下の処理を追加するだけでした。 $('.datepicker').pickadate(); オプションがすごく豊富 オプション設定が非常に豊富で、細かな気遣いが感じられます。 ↑年と月をプルダウンで選択する事も $( '.datepicker' ).pickadate({ monthSelector: true, yearSelector: true }) ↑指定した範囲のみ選択する事も可能です。 $(

「Sequence」はスライドの仕方に特徴があるjQueryプラグインです。 写真１枚をただスライドするのではなく、複数の写真を配置してモーションに動きをつける事が出来るようになります。 見た方が早いので、こちらのデモを見てください。 HTMLのマークアップはliタグの中にHTMlを書いていくようになっているので、 簡単に構築が可能です。 タッチ操作にも対応しているので、iPhone/Androidでも操作が可能です。 左右のキーボード対応や次/前ボタンの表示、トランジションの種類と、自動再生など20以上のオプションが用意されているのも魅力です。 興味のある方は下のリンクからどうぞ！

これを使うと、漫画風の吹き出しを自由に表示する事が出来るようになります。 吹出しには背景画像が指定されているので、 CSSを変更してオリジナルの吹出しにする事も簡単そうでした。 使い方 以下のようなスクリプトを追加する事で表示する事ができました。 $('h1').grumble({ text: 'ここにメッセージを入れます!', angle: 85, distance: 100, showAfter: 500 }); オプションの説明 text:表示する文章 angle:角度 distance:距離 showAfter:指定した秒数後に表示（ミリ秒） オプショには他にもコールバック処理なんかもありました。 詳細&ダウンロードは下のリンクからどうぞ！

jQueryを使ったポップアッププラグインの使い方を教える必要があったのですが、他にも知らない人がいるかもなのでブログでご紹介。 このスクリプトを実行すると簡単にポップアップウインドウが作れるようになりますよ。 ウインドウのサイズや位置などもパラメータで指定するだけです。 ※モーダルウインドウでは無く、新しいウインドウを開くポップアップの方です 1.jQueryをダウンロード まずは、jQueryが必要になります。公式サイトから最新版をダウンロードしてきます。 2.プラグインをダウンロード 次にプラグインのサイトからjquery.popupwindow.jsをダウンロードします。 2.JSを読み込み ダウンロードしたjQueryとpopupwindow.jsを読み込みます。 <script type="text/javascript" src="jquery.min.js"></scrip

PHPやjQueryのチュートリアルを毎日紹介しているTutorialzineというサイトから、Googleのサイト内検索をjQueryでかっこ良くする方法が掲載されていたのでご紹介します。 Google AJAX Search APIを使用して、独自のデザインで検索結果を表示していますよ。 サンプルもあるので、検索対象のURLを自分のサイトにするだけで簡単に設置できるようになっています。 検索フォーム ↑検索フォームはHTML5で作られています。 右下のアイコンで画像検索や動画検索が切り替えられます。かわいいですね。 ↑検索結果の様子 デモではGoogleのロゴが表示されていませんが、実際に使用する際にはロゴの掲載は必要かと思います。 詳細&使ってみたい方は下のリンクからどうぞ。

最近スマートフォン対応やタブレット対応の案件が増えてきて、スワイプに対応させたいと言われる事が結構多いです。 知ってる人も居るかもしれませんが、スワイプが出来るようになるjQueryプラグインをまとめてみました。 画像ギャラリー専用のものから、ページ全体をスワイプで区切るものまで色々ありますよ。 参考になれば幸いです。 jQuery Touchwipe iPhone、iPad、Android用にスワイプでスライドショーを移動できます。 スワイプした時のイベントが簡単に取得できるので、画像切替意外にも色々使えそう。 PCの場合には、アンカーテキストで画像の切替ができます。 サイズも1kB程度なので、モバイル端末に優しいですね。 PhotoSwipe jQuery Mobile対応の全画面イメージギャラリー。 写真を大きく表示させて、ツールバーで操作するタイプです。 jquery.flicks

「jQuery-URL-Parser」を使うと、URLを分解して簡単に値を取得できますよ。 使い方はこんな感じです。 var url = $.url('http://example.com/folder/index.php?item=value'); url.param('item'); こうするとクエリーのitemの値”value”が取得できるというわけです。 他にもホスト名やディレクトリ,#以降のアンカーの値も取得できますよ。 これはいいかも。 詳細＆ダウンロードは以下からどうぞ。

JavaScriptの使い方から、セレクターの使い方、プラグインの作り方などが詳細に説明されていますよ。 これから勉強する人からバリバリ使っている人まで、ひと通り読んでおくと良さそうです。 var foo = 'hello'; var sayHello = function() { console.log(foo); }; sayHello(); // logs 'hello' console.log(foo); // also logs 'hello' ↑スコープの使い方 $('p').click(function() { console.log('click'); }); ↑イベントの使い方 (function($){ $.fn.showLinkLocation = function() { return this.filter('a').each(function(){ $(this

キーボードで動かす全画面スライドショーが作れるjQueryプラグイン「Jquery.ascensor.js」が良さそうだったのでご紹介。 マップを作成して、次のページの座標を指定する作りになっています。 プレゼンを作る際に、便利そう。 ブラウザ上でスムーズにとスワイプされるのは見ていて気持ちいいです。 動作デモ 使い方 jQueryとscrollToプラグイン、Ascensorプラグインの３つを読み込みます。 <script src="jquery.min.js" type="text/javascript"></script> <script src="jquery.scrollTo.js" type="text/javascript"></script> <script src="jquery.ascensor.js" type="text/javascript"></script>

Gmail風にドラッグ&ドロップでファイルアップロードが出来るjQueryプラグイン「jQuery HTML5 Uploader」が良さそうだったのでご紹介。 HTML5対応ブラウザであれば、ローカルにあるファイルをドラッグするだけでアップロード出来るようになります。 ドラッグ時には複数ファイルを指定できるので、よく添付ファイルを送信するフォームにはおすすめの機能です。 ↑デモの様子。破れた穴の画像にドラッグするとアップされます。 ファイルアップロード中には個々のファイルごとにプログレスバーによる進捗表示も可能です。 使い方 使用するにはライブラリを読み込んで、ファイル送信先のURLを指定すれば良いようです。 ■ JSの読み込み <script type="text/javascript" src="jquery.min.js"></script> <script type="text/j

料金表や一覧を表示する際に欠かせないテーブルコーディングで、検索や並び替え、ページング、グラフ表示など色々なものがあったので、探しやすいようにjQueryプラグインをまとめてみました！ jQuery Visualize HTML5とjQueryを使ってテーブルの値をグラフで表示する事が出来ます。 jquery.csv2table.js エクセルなどで作ったCSVファイルを読み込み、クロスブラウザなテーブル表示を行うjQueryプラグイン。 行の絞り込みや文字列検索などかなり高機能になっています。 jExpand 表、画像、リスト、図やその他の要素を折りたたみ表示する事ができます。 Fixed Header Tables ヘッダーを固定して表示します。Excelでは良く使いますね。 縦に長い表を使う場合に非常に便利です。 treeTable テーブルの中にツリー構造を実装できます。 Flex

テキストにマウスオーバーした際に、エフェクトで遊べる「Lettering.js」面白かったのでご紹介。 jQueryプラグインとして実装されており、テキストをカラフルにしたり、文字をなめらかにスライドさせたりする演出をしてくれます。 デモ デザインブログのCodropsにて、Lettering.jsを使ったサンプルが紹介されています。 テキストにマウスオーバーすると、タイポグラフィが切り替わる演出が作り込まれています。 デモ チュートリアル 公式サイトに色々なギャラリーあり プラグインの公式サイトには、実際に使用しているサイトが紹介されています。 テキストを雪のように降らせたりするサイトがあって面白かったです。 Happy Holidays from Typek アイデアしだいで色々使えそうですね。 ダウンロードは下のリンクからどうぞ。

「PaRSS」はRSSフィードを取得して動的に表示してくれるプラグインです。 Webサイトとは別にブログを持っている方に良さそうですね。 使い方 HTML JavaScript $("#feed").PaRSS( "http://www.your-blog.com/feed", // feed url 5, // 取得するアイテムの数 (optional) "M jS g:i a", // 日付のフォーマット (optional) true // descriptions (optional) ); 日付のフォーマットはPHPで使える形式であればほぼ使用できるようです。 見た目の変更方法 RSSは<li>タグで出力されるようですが、項目毎にclassが割り振られているようで、CSSをカスタマイズするだけで見た目の変更が可能です。 出力されるHTML ・タイトルが囲まれるタグ ・日付が囲まれ

「Sammy.js」はURLによって処理を振り分ける事ができるJavaScriptの軽量フレームワークです。 #以降のアドレスを利用してURLルーティングを実装されており、 簡潔に記述することを目指したフレームワークとなっています。 RubyのSinatraというフレームワークにインスパイアされたみたいですね。 わずか16KBしかないのですが、外部ファイルの読み込みやリダイレクト処理などがサポートされており、手軽に使う事ができます。 使い方 jQueryを読み込んだ後に、sammy.jsを読み込みます。 <script src="jquery.js" type="text/javascript"></script> <script src="sammy.js" type="text/javascript"></script> URLに対して実行するアクションを設定します。 JavaScri

jQueryでスマートフォン向けのアプリケーションを作成する際に使えそうなライブラリ「Aristo」を見つけたのでご紹介。 設置もクロスブラウザ対応非常に簡単にできるようになっています。 ボタン、アイコン、モーダルウインドウ、スライダー、アコーディオンメニュー、タブ、プログレスバーなどおよそ使いそうなデザインはひと通り用意されています。 HTML5向けのサイトに良さそうですね。 ダウンロードは下のリンクからどうぞ。

「Easy Notification」はcookieでアラート表示を制御できるjQueryプラグインです。 サイトの更新情報や、新着メッセージなどユーザーに注意を向けさせたいメッセージを表示する際に使えそうなプラグインをご紹介。 指定のdiv内に表示し、閉じる用のリンクが表示されます。 以下のようなコードで動作するようです。 $.easyNotification({ cookieEnable: true, text: 'Your custom text', parent: '#someElement' }); デモ サイトでは、様々なプラグインを有料で販売もしているようですね。 オプションの設定方法など詳しくはサイトをご覧ください。