けSERAせらせらせら: 素材集

ラベル 素材集 の投稿を表示しています。すべての投稿を表示

木曜日, 9月 02, 2010

jQuery プラグイン集

[JS]jQueryのプラグイン33+1選 -2010年7・8月

[JS]jQueryのプラグイン33+1選 -2010年5・6月

[JS]jQueryのプラグイン33+1選 -2010年3・4月

[JS]jQueryのプラグイン33+1選 -2010年1・2月

[JS]jQueryのプラグイン33+1選 -2009年9月

[JS]jQueryのプラグイン33+1選 -2009年8月

[JS]jQueryのプラグイン33+1選 -2009年7月

[JS]jQueryのプラグイン33+1選 -2009年6月

[JS]jQueryのプラグイン33+1選 -2009年5月

[JS]jQueryのプラグイン33+1選 -2009年4月

[JS]jQueryのプラグイン33+1選 -2009年3月

Tags cloud

.net 3d studio max accessibility acrobat actionscript adwords after effects air aix ajax algebra analytics android apache aperture api apple apt aptana arduino ascii asp awk bash bazaar blackberry blender blog blogger blueprint bpmn browsers BSD buzz C C# C++ cakephp capistrano ccTLDs cctrl characters chrome cinema 4d cisco cli clojure cloudControl coda code codeigniter codes coldfusion colors communication computing connectors couchdb css css3 dashboard ddos debian delicious delphi derivates design digg django dojo dom dreamweaver drupal drush eclipse ejb electronics emacs encore espresso ExpressionEngine F# facebook fastboot fedora final cut firebug firefox fireworks flash flex flickr fonts fortran FourSquare freehand ftp fun FW-1 FW/1 gawk gdb gimp git gmail google grails hacmp hardware haskell history hping html html5 ie IEEE 802.11 illustrator imovie inDesign integrals interfaces internet internet explorer ip iPad iPhone iphoto iPod ipsec ipv6 java javascript joomla jquery kde keyboard konqueror kubuntu laplace latex lightroom linkedin linux lorem ipsum mac macspeech dictate magento malware maps markdown marketing math mathematica matlab media mediawiki mercurial microcontroller microformats microsoft mobile mod_rewrite mongodb mootools movable type msn mutt mysql nawk ncat nessus netcat networking nmap nosql objective-C openbsd opengl openssh openwrt oracle perl phone photography photoshop php poster postgresql powershell premiere probability prototype pygame python quality R rambler reddit redis redmine regexp remember the milk research reverse-engineering rgb router rpm ruby ruby on rails safari scala scriptaculous scrum search security sed seo services sftp shell shopify silverlight social software engineering soundbooth sql sqlite ssh stumbleupon subversion svn symfony tags tcp tcp/ip tcpdump terminations textmate textpattern thunderbird tidy trigonometry twitter typefaces typo3 typography ubuntu ucd unicode unix urpmi usability UX vb vbscript vi vim visual basic visual C# visual F# visual studio voip W3C wave web WebGL windows wireless wlan wordpress world of warcraft wow wxWidgets xcode xen xhtml xml xpath xss yahoo yandex youtube yui yum zen zend zypp

月曜日, 6月 28, 2010

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

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

関連エントリ

水曜日, 5月 26, 2010

色々と使えそうなグラフや図が描けるビジュアリゼーションライブラリ集

色々と使えそうなデータのビジュアリゼーションライブラリ集が２２個まとまったエントリのご紹介です。
FlashからPHPで描画するものや、APIを叩いて表示するものなど、既知の物も含まれていると思いますが、多数のグラフ作成用の仕組みが紹介されています。

Fly Charts
マウス位置によって情報がポップアップされたり、タブでデータを区切ったり出来るFlash製のＵＩをしたユニークなグラフ描画ライブラリです。
単純に描画されるグラフ自体もデザイン性があっていい感じですね。

Fusion Charts
こちらもFlash型のグラフ描画コンポーネントです。デモページを見ればその多機能さが分かります。

Axiis
Flexで作られたデータビジュアリゼーション用フレームワーク。

Stlye Chart
色々な種類のユニークなデータビジュアリゼーションが実現できるライブラリ。

Jfree Chart
こちらはJavaで動作するチャート作成ライブラリ。なかなか多機能のようです。

Omni Potent
小さくてかわいらしいグラフを描画するためのjQueryプラグインです。小さくてもダイジェストとしての情報を付加できます。

他にも、多数ビジュアリゼーション用のライブラリなどが紹介されています。

リンク先は以下のエントリを参照してください。
22 Awesome Visualization Libraries: Charts and Diagrams | Onextrapixel - Showcasing Web Treats Without Hitch

データの様々なヴィジュアリゼーションが可能なFlexライブラリ「birdeye」

birdeye - Project Hosting on Google Code

データの様々なヴィジュアリゼーションが可能なFlexライブラリ「birdeye」というものがGoogle codeにて公開されています。
ライブラリはActionScriptベース。
デモページを見ればその多機能さについてうかがい知ることができます。

少々クセのあるデザインですが、サクっとデータのビジュアリゼーション機能を実装したい際に活用出来るかもしれませんね。

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も使えます

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