EditableGrid - Make your HTML tables editable 値をそのまま編集できてソート可なテーブルを簡単実装できるJSライブラリ「EditableGrid」。 ベタ書きのテーブルタグや、XMLを読み込んでテーブルにすることも可能です。 カラムに型を定義することが出来て、編集時は単純なテキストエリアはもちろんですが、ドロップダウンメニューから選べるようにすることも出来ます。 テーブルヘッダーをクリックすればソートされます。 １から実装しようとするとかなり大変そうですが、ライブラリで比較的簡単に複雑でリッチなテーブルが実現出来ますね。 関連エントリ jQueryベースの多機能グリッドテーブル「DataTables」 jQueryでリッチなグリッドを実装「jqGrid」

クロスブラウザ対応、各パネルのブックマークやスクリプトのオフ時も配慮されたアクセシブルで超軽量・超高性能のコンテンツスライダーのスクリプトを紹介します。 Sudo Slider jQuery Plugin デモページ Sudo Sliderの主な特長 リスト要素で簡単にスライダーを実装。 AJAXで画像やHTMLをロード。 スクリプトのオフ時でもコンテンツが可能。 マルチプルなスライダーにも対応。 標準的なスライドからフェードまで多彩な表示を用意。 各パネルへの直接リンクが可能（ブックマーク可）、ブラウザの「前へ」「次へ」をサポート。 パネル内は画像、テキスト、動画、フォームなどさまざまなHTMLコンテンツを表示可能。 自動再生でスライドショーも可能。 ループ再生も可能。 セットアップは簡単で、カスタマイズも簡単。 IE6+, Fx, Chrome, Safari, Opなど主要ブラウザの

25 Creative Single Page Websites With Awesome JavaScript Effects 一見の価値ありな、1ページのJSサイト集がまとまってます。 1ページとはいえ、JSでページを1ページ内でスクロールするのでコンテンツは複数ページと同等です。 アイデアが秀逸なものが多くて感心するものが多いです MelissaHie ページがパネル風に分かれていて、ページ全体がダイナミックに移動するサイト DanteStyle 横にズラッとページが配置されていてアニメーションで切り替わる Webleeddesign ページが縦にスクロールされるのですが、そのアニメーションがなかなか秀逸です。 Howarths ページをめくる風のUIが実現されてます。 他にも色々あるので真似してみるのもよさそうですね。

fontScaler marcup 特定ブロックの文字のみ拡大縮小できる便利機能実装jQueryプラグイン「fontScaler」。 次のように、特定のブロックを $(element).fontScaler() のように初期化するとボタンがあらわれ、拡大縮小が簡単になるプラグインがあるようです。 フォントを大きくするボタンをおしたところ。結構大きくなって読みやすくなりました。 次のように、段階を追って拡大、縮小ができるようにする機能もあります。 これはありそうでなかった気がします。 全体に適用するとデザインが崩れてしまって嫌だ、という方も、記事部分だけならデザインは崩れない＆可読性を上げることができるので便利ですね。 関連エントリ 5分で実装可能なページの文字サイズ変更＋クッキーに保存サンプル フォントサイズの変更をJavaScriptによって検地する方法

並列に配置されたナビゲーションの現在位置を明示したハイライトをアニメーションで移動させるスクリプトをCSS-Trickから紹介します。 jQuery MagicLine Navigation デモページ 現在位置を明示するサインは、ライン（キャプチャ：上）と背景（同：下）の2種類が用意されています。 また、背景は各ラベルでカラーが異なります。 ナビゲーションの実装はリスト要素をdiv要素で内包したシンプルなものとなっています。 HTML <textarea name="code" class="html" cols="60" rows="5"> <div class="nav-wrap"> <ul class="group" id="example-one"> <li class="current_page_item"><a href="#">Home</a></li> <li><a hr

jQuery Horizontal Menu Style 05 (Dark Green) クールにアニメーションする水平ドロップダウンメニュー実装jQueryライブラリ。 次のようなデザインでカーソルを変えるとアニメーションしながらフォーカスし、ドロップダウンメニューを表示させたりすることが出来るメニューのダウンロードが可能です。 ドロップダウンが表示される部分 メニューのカラーは全部で６種類から選べます 関連エントリ ナビゲーションメニューを1歩進んだものに引き上げるjQueryチュートリアル集 クールにアニメーションする色合い様々なjQueryメニューサンプル色々 縦に長〜いドロップダウンメニューを使いやすくするjQueryサンプル「Long Dropdowns」

<textarea name="code" class="html" cols="60" rows="5"> <div class="slidegrid"> <div class="cell bigcell">Big Cell 1</div> <div class="cell">Cell 2</div> <div class="cell">Cell 3</div> <div class="cell">Cell 4</div> </textarea>

jQueryで実装するアニメーション機能をよりスムーズにするプラグイン「hoverFlow」を紹介します。 demo 上記ページの「The Problem」のナビゲーションで、マウスを何回も上下に往復してみてください。 マウスを止めても、アニメーションが継続されてしまいます。 これを解消するために「.stop()」を使用したスタディがありますが、アニメーションがぎこちないものになっています。 そこで上記の問題を全て解決し、プラグインとしてリリースしたのが「hoverFlow」です。 ファイル容量も1KB（圧縮時）と軽量となっています。

jQueryでアニメーション機能を実装する際に使用する「.animate()」のスタディをCSS-Tricksから紹介します。 Fully Executing jQuery Animations Without Queuing demo デモでは、マウスのホバーをトリガーにアニメーションが始まり、そのアニメーションを止める際に「.stop()」または同様の機能をもつものをそれぞれ比較しています。 ゴールは、三つに並んだバーがそれぞれ期待通りによりスムーズに動くことです。 最もスムーズに動作するのは、デモページの下にあるグリーンのデモで下記のように記述しています。 JavaScript <textarea name="code" class="js" cols="60" rows="5"> $("#animate-test div").hover(function(){ $(this).fi

またまた登場！凄くリッチなWEBアプリ作成フレームワーク「Ajax.org Platform」 2009年12月16日- またまた登場！凄くリッチなWEBアプリ作成フレームワーク「Ajax.org Platform」。 Ext.js ばりにきれいなUIと多機能さで今後が期待されるJSフレームワークです。 次のような綺麗でリッチなインターネットアプリケーションが作れます。 デモページには多数のコンポーネントが掲載されていて色々できることがわかります。 GoogleMapや、各種UIパーツの他、３Dグラフなんかも面白いです。 JavaScript でクネクネ動く3Dグラフです。 以下のページを参照してください。 Ajax.org - The real-time collaborative application platform

The documentation below is for version 1.5.1; see the release notes for the changes from previous versions. Download version 1.5.1 Demos Minimal vertical splitter: Demonstrates minimal code/markup needed to create a splitter. All the styles are included in the HTML file for this example. Vertical splitter: Vertical splitter with fixed height and fluid width. Horizontal splitter: Horizontal splitte

ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄いです。 普通、高さの違うボックス要素を float とかで並べると次のような、どう見ても見れない崩れたデザインになってしまいます。 が、今回紹介するjQuery Masonry を使うと、次のように、綺麗にテトリスっぽく整列できてしまいます。 ↓↓↓↓↓↓↓↓↓↓ これを実現するのに必要なJavaScript コードは以下のように数行。これで実現可能です。 $('#primary').masonry({ columnWidth: 100, itemSelector: '.box' }); この仕組みを使ってブログ等を表示するともっと面白いことになります。 新聞っぽくなりましたね。 ブラウザ幅を変える事でいろいろな見え方になるのも面白いです。 以下のエントリを参照してください。 jQuery Masonry ? B

スライド、フェード、ティッカーと三種類のモードが選択できる超軽量のコンテンツスライダーのスクリプトを紹介します。 bxSlider demo 各コンテンツはdiv, li, p要素でそれぞれ実装されており、スクリプトのオフ時にはそのまま表示されるようになっています。 スクリプトのオプションでは、三種類のモードの選択、オートとマニュアル、スピードなどが調整できます。 bxSliderはjQueryのプラグインのため、実装にはjquery.jsが必要です。

JavaScriptやCSSを使用して、スクロールした際にパネルを追従させるチュートリアルをCSS-Tricksから紹介します。 Scroll/Follow Sidebar, Multiple Techniques demo チュートリアルでは、JavaScriptで実装したアニメーション版、CSSで実装した版２つの計３種類が紹介されています。 サイドバーのリストをクリックすると、追従のパターンを変更できます。 実装はシンプルで、div要素でコンテンツとサイドバーを配置し、サイドバーには「position: fixed;」を指定します。 CSS <textarea name="code" class="css" cols="60" rows="5"> #page-wrap { width: 600px; margin: 15px auto; position: relative; } #s

Determines whether a tooltip appears when hovering over the image. The tooltip text will be taken from the longdesc attribute value; if there is no longdesc attribute then no tooltip will show regardless of this setting.