けSERAせらせらせら: ＪａｖａＳｃｒｉｐｔ

ラベル ＪａｖａＳｃｒｉｐｔ の投稿を表示しています。すべての投稿を表示

金曜日, 6月 25, 2010

jQueryのプラグイン33+1選

simpleSli.de
フレキシブルでシンプルで軽量なコンテンツスライダーの決定版。

Lightbox_me
DOM要素を指定して拡大表示できるLightbox。

jQuery modalBox
画像やAJAXに対応したドラッグで移動も可能なオープンソースのモーダルボックス。

jQuery.popeye 2.0
モーダルウインドウを使用しないインライン型の画像拡大スクリプト。

Zoomooz.js
ページ内のあらゆる箇所をアニメーションでズーム表示。

Cloud Zoom
さまざまなスタイルで画像を拡大表示。

Featured Image Zoomer
マウスの動きに合わせて、画像の一部を拡大表示。

Micro Image Gallery
小さいスペースにも設置できる画像ギャラリー。
キャプチャは実物大。

jbgallery 2.0 BETA
背景をダイナミックにギャラリーとして活用。

jqFancyTransitions
短冊状のアニメーションでスライドする画像ギャラリー。

Coin Slider
ユニークなエフェクトで画像を切り替えるギャラリー。

jCoverflip
クリックでもドラッグでも動作するカバーフリップ。

jSquares
グリッド状に画像を配置して、キャプションを表示。

jQuery.spritely
任意の要素や背景をアニメーション。

Circulate
円の軌跡とイージングを使用してあらゆる要素をアニメーション。

Shadow Motion Effect in 5 Lines
残像っぽく不透明度をアニメーション。

AjaxScroll
垂直・水平に対応したAJAXコンテンツのスクロール。

prettyLoader
AJAXコンテンツを読み込む時のローダー。

Loading Dots
ローディングの「….」をアニメーション。

Spinner
カスタマイズが簡単なシンプルなローダー。

BubbleUp
アイコンをふんわりと拡大。

Slick Drop down Menu with Easing Effect
滑らかなアニメーションを備えたドロップダウン。

Dynamic Page / Replacing Content
JavaScriptがオフでも遷移するタブコンテンツ。

TTabs
タブになる要素を自由に指定できるタブコンテンツ。

Pajinate
長いリストやコンテンツをフレキシブルにページネーション化。

Easy List Splitter
リストを水平・垂直に自由に配置。

Narrative Select
セレクトボックスをスタイリッシュに。

jConfirmAction
confirmボックスをキュートにデザイン。

HoverAttribute
ホバーでテキストリンクのhrefやtitleのデータを表示。

AutoTabIndex
設定した文字数を超えると、自動で次の入力欄へ移動。

The Footer Plugin
コンテンツの量が少なくてもフッタをブラウザの下部に表示。

Griddy
ページにグリッドを表示し、サイズを自動で算出。

jHTML-Ipsum
CSSやJavaScriptのテスト・確認用にHTMLのあらゆる要素を自動で生成。

スムーズページスクローラー

土曜日, 6月 12, 2010

jQueryでいい感じのコンテンツスライダーを作成するチュートリアルとサンプル

Create a Custom Content Slider with jQuery

jQueryでいい感じのコンテンツスライダーを作成するチュートリアルとサンプル。
次のように、左側にボタンがあって押すと右側のコンテンツがアニメーションで切り替わるコンテンツスライダーの実装チュートリアルとサンプルが公開されています。

サイドバー等に仕込むことで少ないスペースで多くの情報を格納することが出来る上になかなかクールな印象を与えられそうですね。
簡易チュートリアル的なコンテンツを載せる場合なんかに使えそうです。

関連エントリ

火曜日, 6月 08, 2010

とても洗練されたＵＩの日付ピッカー＆カレンダー集

Beautiful datepickers and calendars for web developers

とても洗練されたＵＩの日付ピッカー＆カレンダー集のエントリが紹介されていましたのでピックアップ。
日付入力も便利だけでなく、クールに行えます。

datepicker
シンプルだけどクールなカレンダー

jquery datepicker
From〜Toが指定できるカレンダー

Calendar
立体的でクールなＵＩ

jPint
iPhoneっぽいＵＩ

全部見る

これで自前でGoogleカレンダーを持てる！jQuery＆PHPで実現されたプログラム

Plugins | jQuery Plugins

これで自前でGoogleカレンダーを持てる！jQuery＆PHPで実現されたプログラム。
なかなかリッチなUIとGoogleカレンダーばりの操作性を持つ便利なスクリプトになっています。
Googleカレンダーに登録するのもよいのですが、ちょっと外部に流したくないこととかも結構あるので、自前で構築したいというニーズもあるのではないでしょうか。

タイムライン上をドラッグ＆ドロップして予定を入れられます。ポップアップがでるので予定を入れます。日本語もOK

見ての通りUIもなかなかいい感じです。
スケジュール管理等に活用できますね。

もう一つ簡単なもの

jquery-week-calendar - Project Hosting on Google Code

日曜日, 5月 30, 2010

【JavaScript Tips】使えるときはReverse Loopを使うといいらしい…

// Forward loopよりも…
var i = 0;
while ( i < length ) {
i++;
}
// Reverse loopの方が速い！
var i = length;
while (i--) {
/* iを操作する必要がありません。 */
}

水曜日, 5月 26, 2010

IEにも対応！ブラウザ上でローカルにストレージを作るJavaScriptライブラリ「jStorage」

jStorage - simple JavaScript plugin to store data locally

IEにも対応！ブラウザ上でローカルにストレージを作るJavaScriptライブラリ「jStorage」。
基本はHTML5のストレージを使いますが、対応していないブラウザは、例えばIEではuserDataを使ってデータを格納します。
ライブラリ内でクロスブラウザ対応はしてくれるので、利用者はただ jStorageのメソッドを呼び出すだけでストレージを利用できます。

ブラウザごとのサポートと、ストレージサイズは以下。IE6,7 が 128KBと、比較的小さいですが、それなりに大きなデータを保持できることが分かります。

基本とするフレームワークライブラリは、jQueryや、Prototypeなど自由に選択することができます。
利用するのも超シンプルに使えて便利です。

次のように、key, value の形で使えます。

$.jStorage.set(key, value); // データの設定

value = $.jStorage.get(key); // データの取得
value = $.jStorage.get(key, "default value"); // デフォルト値を決めてのgetも使えます

単にお手軽に使えるので、それだけで便利と言えますね。
また、サーバ側にデータを保存する場合、ユーザボリュームが大きいサイトになるとそれだけで負担になってしまう部分もあり、こういうところでまかなえるものについては対応していくことでパフォーマンス向上やサーバリソースの節約に繋がりそうです。