ドラッグ操作でコンテンツをスクロール出来るようになります。

↑スクロールバーがiPhone風に表示されます。

↑ドラッグできない部分を作る事も可能です。

使い方

ドラッグしたい要素に以下の一文を追加するだけでドラッグが出来るようになるようです。

$("#overscroll").overscroll();

スマートフォンの普及によって、ブラウザの操作感も少し変わってきた気がします。
これからはタッチパネルが主流になり、PC向けサイトもこういったドラッグ対応は必須になるかもしれないですね。

興味のある方は下のリンクからどうぞ。

画像にマウスオーバーするとビフォー・アフター が比較できるjQueryプラグイン「uCompare」

使用前、使用後みたいな感じに2枚の画像を比較できるjQueryプラグインです。
ショッピングサイトなんかに使えそうですね。

デモでは東日本大震災の前後での
GoogleMapの画像を比較したりしています。
画像を見ると心苦しくなってしまうのですが、使い方次第では有用な使い方ができそうでした。

興味のある方は下のリンクからどうぞ。

HTMLベースのプレゼンツールは当サイトでも何度かご紹介しているのですが、アニメーションがカッコ良かったのとデザインが素敵だったのでご紹介。

deck.jsを使うとモダンなHTMLでプレゼンテーションが出来るようになります。

サイト自体がこのライブラリで実装されており、キーボードの矢印キーやマウスクリックに対応しておりサクサク動くようになっています。

触ってみると、エフェクトがいい感じに気持ちよくてちょっと次のプレゼンで使ってみたくなりました。

ドキュメントも豊富に揃っているので、カスタマイズも割と簡単にできそうです。

興味のある方は下のリンクからどうぞ。

吹出し型ツールチップを設置できるjQuery「grumble.js」が面白そうだったのでご紹介します。

これを使うと、漫画風の吹き出しを自由に表示する事が出来るようになります。

吹出しには背景画像が指定されているので、
CSSを変更してオリジナルの吹出しにする事も簡単そうでした。

使い方

以下のようなスクリプトを追加する事で表示する事ができました。

$('h1').grumble({
	text: 'ここにメッセージを入れます!',
	angle: 85,
	distance: 100,
	showAfter: 500
});

オプションの説明

• text:表示する文章
• angle:角度
• distance:距離
• showAfter:指定した秒数後に表示（ミリ秒）

オプショには他にもコールバック処理なんかもありました。
詳細&ダウンロードは下のリンクからどうぞ！

クレジットカードの入力フォーマットをチェック出来るjQueryプラグイン「Smart Validate」

以下のようなコードで簡単にチェックが出来るようになりました。

$('.cc-container').ccvalidate({ onvalidate: function(isValid) {
    if (!isValid) {
        alert('クレジットカードのフォーマットを正しく入力してください。');
        return false;
    }
}

ドロップダウンもいい感じにカスタマイズされています。
実際にカードが有効かどうかのチェックはできませんが、商品を購入する前にこういったチェックがあれば親切ですよね。

興味のある方は下のリンクからどうぞ。

jQueryを使ったポップアッププラグインの使い方を教える必要があったのですが、他にも知らない人がいるかもなのでブログでご紹介。

このスクリプトを実行すると簡単にポップアップウインドウが作れるようになりますよ。
ウインドウのサイズや位置などもパラメータで指定するだけです。

※モーダルウインドウでは無く、新しいウインドウを開くポップアップの方です

使い方

1.jQueryをダウンロード
まずは、jQueryが必要になります。公式サイトから最新版をダウンロードしてきます。

2.プラグインをダウンロード

次にプラグインのサイトからjquery.popupwindow.jsをダウンロードします。

2.JSを読み込み

ダウンロードしたjQueryとpopupwindow.jsを読み込みます。

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.popupwindow.js"></script>

3.プラグインを有効にします。

以下のコードをHEAD内のjquery.popupwindow.jsを読み込んだ後ろに記述してください。

$(function()
{
	$(".popupwindow").popupwindow();
});

4.リンクを設定

ポップアップさせたいリンクに「 class=”popupwindow”」を設定します。
以上で設定は完了です。

リンクの書き方

デフォルトの場合

Example 1

rel要素にオプション　その１

Example 1

縦:400,横:400で開きます。

rel要素にオプション　その２

Example 2

以下の設定が追加されています。

• width:550px、height:750pxで開く
• ツールバーを使用する
• スクロールバーを表示する
• ステータスバーを使用する
• リサイズ不可
• 左から50px,上から100px

あらかじめ定義した設定を利用する

あらかじめ定義した設定を利用します。複数ページで同内容を使用する場合に便利です。

JS

var profiles =
{

	window800:
	{
		height:800,
		width:800,
		status:1
	},

};
$(function()
{
	$(".popupwindow").popupwindow(profiles);
});

HTML

Example 1

その他の例

JS

var profiles =
{

	window200:
	{
		height:200,
		width:200,
		status:1,
		resizable:0
	},

};
$(function()
{
	$(".popupwindow").popupwindow(profiles);
});

HTML

Example 2

オプションで設定可能な値

オプションで設定可能な値です。以下の値を参考に。数値は適時変更してください。

height:600, // 高さを指定します。
width:600, // 横幅を指定します。
toolbar:0, // ツールバーを表示させるかどうかを指定します。1：表示、0：非表示.
scrollbars:0, // スクロールバーを表示させるかどうかを指定します：1：表示、0：非表示.
status:0, // ステータスバーを表示させるかどうかを指定します：1：表示、0：非表示.
resizable:1, // リサイズ可能にするかどうかを指定します。1：リサイズ可能、0：リサイズ不可
left:0, // 画面の左から何pxに表示するかを指定します。
top:0, // 画面のTOPから何pxに表示するかを指定します。
center:0, // センターに表示するかどうかを指定します。1 ：センター、0：指定なし. topとleftよりもこちらが優先されます。
createnew:1 // 新しいウインドウを開くかどうかを指定します。1：新しいウインドウ、0：同じウインドウ.

以上、jQueryで簡単にポップアップが出来る「jQuery PopUpWinodow」の使い方でした。

知ってる人も居るかもしれませんが、スワイプが出来るようになるjQueryプラグインをまとめてみました。
画像ギャラリー専用のものから、ページ全体をスワイプで区切るものまで色々ありますよ。

参考になれば幸いです。

jQuery Touchwipe

iPhone、iPad、Android用にスワイプでスライドショーを移動できます。

スワイプした時のイベントが簡単に取得できるので、画像切替意外にも色々使えそう。
PCの場合には、アンカーテキストで画像の切替ができます。

サイズも1kB程度なので、モバイル端末に優しいですね。

PhotoSwipe

jQuery Mobile対応の全画面イメージギャラリー。
写真を大きく表示させて、ツールバーで操作するタイプです。

jquery.flickslide.js

スマートフォンサイトにフリック・スワイプ実装できるjQueryスライダプラグイン。
横向きも考慮されているので、業務案件でも使えそうです。

jQuery.flickable

iPhoneやAndroidのようにマウスのフリック操作でスクロールできるようにするjQueryプラグイン。
ページの一部だけをフリックできるようにしたり、iPhoneのホーム画面のようにページ区切りをつける事もできます。

flickGal

iPhoneでフリックギャラリーを実装するjQueryプラグイン。

jCarouse

iPhone SafariでCarousel風のUIを実現するjQuery Plugin

色々ありますね。他にもあったらぜひコメントで教えてください！

※2011/06/20　追記
flicksimpleというものをコメントで教えてもらいました！

flicksimple

iPhone、Androidだけでなく、PCのブラウザ上でも動作するのが特徴のようですね！
情報ありがとうございます。

無限にドラッグできるインターフェイスをjQueryで作れる「Infinite Drag」

全体をドラッグで移動できるようになっており、タイル毎にHTMLを設定できるようになっています。

各タイルには自由にHTMLを設定したりできるので
フォームを表示したり、画像にしたり、何でもOKのようです。

移動方向を横だけに限定したりもできました。

使い方によっては面白いものができそうですね。
ポートフォリオとかに良いかも。

興味のある方は下のリンクからどうぞ。

これは便利そう。いつか使うかもしれないので、メモ的にエントリーです。

「jQuery-URL-Parser」を使うと、URLを分解して簡単に値を取得できますよ。
使い方はこんな感じです。

var url = $.url('http://example.com/folder/index.php?item=value');
url.param('item');
 

こうするとクエリーのitemの値”value”が取得できるというわけです。
他にもホスト名やディレクトリ,#以降のアンカーの値も取得できますよ。
これはいいかも。

詳細＆ダウンロードは以下からどうぞ。

iPhoneの通知バッジ風のUIを作れるjQueryプラグイン「Badger」が良さそうです。

↑画面のように、divの右上の方に
アイコンと数値を表示してくれます。

↑NEWマークにした所。

何かを告知したいときに便利ですね。

使ってみたい方は下のリンクからどうぞ。