25 jQuery Plugins for Navigation ナビゲーションのUIはこれで完璧かもなjQueryプラグイン集。 階層メニュー、タブ、ツリーやページャにいたるまで、ナビゲーション部分に使えるjQueryプラグイン集25種がまとまっていました。 jQuery (mb)Menu クールなアイコン付階層メニュー BDC Drilldown Menu (iPod Style) iPod風ドリルダウンメニュー jBreadCrumb 動くパンくずリスト Treeview そのまんまツリービュー jQuery Full Width Navigation Widthを指定のサイズにあわせる jQuery Nested Tabs タブ内タブというネストが可能なプラグイン FastFind Menu クールなメニュー実装 jQuery Pagination Pagerを実装 全部見る 最近

Coda Popup Bubbles | jQuery for Designers - Tutorials and screencasts 滑らかにアニメーションして美しいポップアップを作成するチュートリアル。 Downloadにカーソルを合わせると、フェードインしつつ次のようなポップアップが表示されるものを作成していくチュートリアルです。 jQueryとCSSを用いて実装しているようですが、jQueryによって比較的簡単に実装されている様子。 ページのレイアウトを崩さずにヒントを表示できるポップアップですが、こうしたエフェクトがよりヒントを強調できるので覚えておいてよさそうですね。 関連エントリ LightBox風に角丸で可愛く画像をポップアップしてくれる「Facebox」 Windows9Xなテーマの同一ウィンドウ内ポップアップ窓作成JavaScriptサンプル「Bride of Wi

Simpletip - A simple jQuery tooltip plugin ツールチップを作るのならこれかもという多機能jQueryプラグイン「Simpletip」 色々なツールチップライブラリがありますが、Simpletipはカスタマイズ性に富んだツールチップライブラリとなっています。 基本 単純なツールチップ クリックで閉じるツールチップ ちょっとリンクが切れちゃってますが、画像なんかも埋めこみ可能。特定のHTMLを埋められるみたい。 ポジション マウスの左、右、上、下、に表示というポジショニングが可能。以下は左の例 他にもabsoluteで位置指定をしたりもできます。 エフェクト ツールチップの文字がアニメーションしつつズームイン フェードインなんかの機能もあるみたい。 関連エントリ JavaScriptを使わずCSSのみでシンプルなツールチップ実装 カスタマイズの自由度が

57 Free Image Gallery, Slideshow And Lightbox Solutions | 1stwebdesigner - Love In Design 画像ギャラリーを作る際に使えるFlashやJavaScriptを活用したライブラリ＆サンプル集が公開されていました。 3Dを使った物や、ＵＩ的に面白い物が色々あって、ちょっとしたサプライズを持った画像ギャラリーなんかを作るのに活用できそう。 3D Curve Wall スムーズかつ立体的に動作する感じで次世代を感じさせる Spiral Carrousel XML 使いにくいけど立体的で面白い動作をします Polaroid Gallery 机の上に置いた写真をマウスで移動できる面白いＵＩ TiltViewer マウスの動きによってギャラリーが傾くという面白いＵＩ。デザインや動きが秀逸。 Galleriffic Sl

Ultra versatile slider for websites 色々使えそうな、かっこよくアニメーションするスライダー実装JSライブラリ。 ウィジェット風に設置できそうなJSライブラリが紹介されています。 デモページ 次のように、divで大きく囲って中身にリストを定義して、リスト内をスライドさせるという、他の多くのライブラリで同じように実装されているようになっていて使いやすい。 <div id="slider-stage"> <ul id="myList"> <li >Box 1</li> <li >Box 2</li> <li >Box 3</li> <li >Box 4</li> <li >Box 5</li> <li >Box 6</li> </ul> </div> 次へ、前へリンクも<a>タグにidをふるだけみたいです。 <div id="slider-buttons">

STEP1. エクセルとかからCSV (TSV)をコピーしてを貼り付け STEP2. オプションを選択して変換 細かい設定 列目までをTHEADとする。(0でTHEADなし) TBODYの行目までをTHとする。 TBODY THに深度を埋め込んだクラス名を追加する。(1〜) クラス名： " + n" ひとつめのTHに深度クラスを追加しない。(lv1を追加しない) n列ごとにTRにクラス名を追加する。(0〜) クラス名： 列数　　： クラス名に列数を追加する。(nrow0, nrow1,,)

DojoCampus Blog Archive Dojo Zoomer? 選択範囲をドラッグ＆拡大して写真の部分的な拡大ができるJSウィジェット「Dojo Zoomer」 次の図で、左に表示されている画像の選択範囲を指定すると右に拡大されるというもの。 デモ なかなか面白いですね。部分的にここをもうちょっと見たいというようなＵＩのニーズに応えてくれそうです。 関連エントリ とても大きい画像を地図アプリ風にドラッグ＆ドロップして見る 虫眼鏡を使って画像をズームする感じのUIライブラリ「TJPzoom」

The Sexy Curls jQuery Plugin by Elliott Kember サイトに驚き！のページめくり効果をつけられるjQueryプラグイン。 実装すると、次のように、ページの右上にめくれそうな部分が現れます。 ぺらーんと、めくっていくと画像が見えてしまうという驚きのＵＩが実現可能です 実装方法は簡単です。 1. まず必要なソースを読み込み <script type="text/javascript" src="turn/jquery1.3min.js"></script> <script type="text/javascript" src="turn/jqueryui.js"></script> <script type="text/javascript" src="turn/turn.js"></script> <script type="text/javascr

Tracking Clicks, Building a Clickmap with PHP and jQuery これは面白！PHPとjQueryでクリックした位置が分かるクリックマップ作成。 デモとソースコードが公開されていて、自分でも設置できるのがありがたいです。 以下、サンプル画像のチョイスも面白いのですが、クリックした位置もなかなかすごいことになってます。 ↓↓クリックマップ化↓↓ 画像のクリック位置解析だけではなく、当然ですがサイトのクリック解析に使えそうですね。 関連エントリ クリック位置のヒートマップを作成できるオープンソースやサービス色々

jQuery plugin - Easy Image or Content Slider | Css Globe This is my first jQuery plugin. I wrote several jQuery scripts but never made a real plugin just because I was I afraid of it's complexity. コンテンツを滑らかにスライドさせるjQueryプラグイン。 各種デモが以下で閲覧できます。 Default non-styled image slider Non-styled vertical image slider Non-styled vertical content slider マークアップが次のようにシンプルに記述できる点も導入の敷居が低くていいかんじです。 <div id="slider

Best Ever 65 mooTools Plugins and Demos, is it Better than jQuery? : Speckyboy - Web Design, Web Development and Graphic Design Resources jQueryよりも便利？mooToolsの便利プラグイン集。 mooToolsにも多数の便利プラグインが存在しますね。 SmoothScroll スクロールをスムーズにする MultipleSelect 複数選択ウィジェット Typewriter Effect タイプライタ風のエフェクトがつけられる MooColumns レイアウト用ライブラリ News ticker with horizontal scrolling 水平ティッカー MooScroll 独自スクロールバー Show/hide a nice Login

Below are quite a few examples of how you can add a clueTip to your page, using a wide range of options. Keep in mind that there is nothing magical about the HTML markup. You can use any jQuery selector you want to attach your clueTips. For example, if you want to attach clueTips to all links with a class of "peanuts," you would simply write in your jQuery code: $('a.peanuts').cluetip();. Default

Easiest Tooltip and Image Preview Using jQuery シンプルなテキストのツールチップ ボックスにテキストを表示するツールチップです。ボックスはマウスに追従します。 デモ：テキスト <textarea name="code" class="html" cols="60" rows="5"> <a href="http://cssglobe.com" class="tooltip" title="Web Standards Magazine">Roll over for tooltip</a> </textarea>

CSS Stacked Bar Graphs | The Wojo Group CSSでスタックされた棒グラフを作成するサンプル 単一の棒グラフではなく、次のように、2重に積み重なったグラフの作成サンプルがダウンロード可能。 アクセス解析のユニークxＰＶとかそういう用途で使えそうですね。 関連エントリ フリーのグラフスクリプト１０個 Prototypeベースのグラフ描画用JSライブラリ「ProtoChart」 CSSだけで円グラフを表示するサンプル フリーでクールなグラフのアイコン jQueryベースの滑らかなグラフ描画ライブラリ「Flot」

Interface Design Inspiration - 36 Clean Comment Form designs 斬新なコメントフォームデザイン集 よくデザインされたコメントフォームのサンプル集。ここまでやるかというものもあって見ているだけでも面白い上参考になります。 関連エントリ ロゴデザインの際に参考にできるリソース集 2008年のCSSベストデザインサイト集 ウェブデザイン用超便利ツール集 Web2.0デザインジェネレーターいろいろ-２００８年８月 デザイン性に優れたCSSメニュー集

Scanning Folders with PHP - NETTUTS フォルダに画像ファイルを入れるだけでクールなギャラリーが自動で出来るPHPスクリプト作成チュートリアルが公開。 次のようなクールなギャラリーがチュートリアルと共に、ソースコード公開されています。 写真をクリックするとタイトルが微妙にアニメーションするところもよいですね。 関連エントリ JavaScript製の画像スライダー・ギャラリーいろいろ 壁に画像を貼ったようなUIの画像ギャラリー「PostcardViewer」 超絶クールなMacスタイル写真ギャラリー「PhotoFlip」 サクサク動く画像ギャラリー作成JSライブラリ「noobSlide」

Project Slimey ブラウザ上でPowerPoint風プレゼンテーションが作れるオープンソース「Project Slimey」。 次のようなPowerPoint風プレゼンが作れます。 スライド上のエレメントは自由にドラッグ＆ドロップで移動。 画像や文書の挿入、リストなんかも自由に挿入可能です。 こうしたサービスはありますが、ダウンロード版ということで色々カスタマイズも出来ますね。 関連エントリ ブラウザ上で動作するプレゼン資料を簡単に作れる「Slider.js」 ブラウザ上でPowerPointプレゼン作成「Preezo」 オンラインで動作するPowerPoint風プレゼンテーションアプリ13選