seekAttention 注目箇所だけハイライトのアニメーションで強調。 スクロール・ドラッグなど操作関連のjQueryのプラグイン
jQueryのプラグイン100選 -2008年総集編 | コリス
seekAttention 注目箇所だけハイライトのアニメーションで強調。 スクロール・ドラッグなど操作関連のjQueryのプラグイン
JSON/XMLデータを簡単に編集する·JSON Editor MOONGIFT
Ajaxを使う上でよく使われるのがJSONやXML形式だ。最近では特に冗長性がなく、JavaScriptでそのまま使える分、JSONが好まれる傾向にある。しかしコンピュータ上は読みやすくとも、人向けのフォーマットとは言えそうにない。 例えばデバッグの際にJSONフォーマットをチェックする必要があった場合、その解析は非常に面倒だ。そこで使ってみたいのがJSON Editorだ。 JSON EditorはAdobe AIR製のフリーウェアで、JSONやXMLの内容をパースして表示、編集できるソフトウェアだ。 JSON Editorを使うと、出力されたJSONをそのまま貼付けてReadボタンを押せばテーブル形式に並べ替えて表示してくれる。これで階層がどれくらい深いのか、希望した通りにデータが並んでいるのかといった情報が簡単に分かるようになる。 多彩なショートカットキーがある 逆にデータを作成して
複数階層のドロップダウンメニューを作成するサンプル:phpspot開発日誌
JavaScript Dropdown Menu with Multi Levels - Web Development Blog 複数階層のドロップダウンメニューを作成するサンプル JavaScript Dropdown Menu Demo ul と li の階層構造によって作られていて、初期化は次のように簡単に行えます var menu=new menu.dd("menu"); menu.init("menu","menuhover"); これはなかなか良さそう。 関連エントリ デザイン性に優れたCSSメニュー集 綺麗で立体感のあるサイトメニュー素材 使えるCSSメニューいろいろ アニメーションするドロップダウンメニュー作成ＪＳ「Sliding JavaScript Dropdown Menu」 Flash製のドロップダウンメニューを作成するWEBツール
もうこれで十分。HTML上でテーブルを表示するなら·Sigma Grid MOONGIFT
業務システムを構築する際に、一覧表を表示するという処理は多い。そしてそのデータを並べ替えたり、チェックボックスを入れたりしたいというニーズも多く発生する。場合によってはカラムを並べ替えたり、一括更新したいなんて言われることもある。 ソートも並べ替えもページネーションも全部こみこみ それを一つ一つ実装していては非常に工数がかかってしまう。そこで使いたいのがこのSigma Gridだ。 Sigma Gridはテーブルの表示とソート、データ編集などを可能にする超豪華ライブラリだ。LGPLライセンスの下に公開されているオープンソース・ソフトウェアだ。 Sigma Gridはデータの表示に際してJSONでデータを渡す必要がある。そのため既存のシステムにそのまま組み込むのは難しいかもしれない。だがその変更してもあまりあるメリットを享受できるに違いない。 画像表示とクリックアクションの例 まずカラムごと
Prototype.jsを用いたUIライブラリ·Prototype UI MOONGIFT
Webアプリケーションを構築する上で、優れた操作性をもったUIは欠かすことができない。まるでデスクトップアプリケーションのようなインタフェースを持ったソフトウェアが数多く存在している。 Prototype.jsを使ったUIライブラリ そんなUIを構築するライブラリは数多いが、そのためだけのツールが多く、柔軟性にかけるものが多い。そこで優れたJavaScriptライブラリであるPrototype.jsをベースにしたPrototype UIを使ってみよう。 Prototype UIはPrototype.jsとScript.aculo.usを使ってWebアプリケーションにふさわしいインタフェースを提供してくれるJavaScriptライブラリだ。 Prototype.jsがベースという点において好き嫌いが分かれる所かもしれない。とは言え、Railsで標準で組み込まれていることもあり、利用されている
jQuery TreeView, Flexigrid を Rails で使ってみた - yuumi3のお仕事日記
訳あって、jQuery プラグインの TreeView, Flexigrid を Ruby on Rails + jRails で使ってみました。以下の画像のように左のツーリー(TreeView)で選択したディレクトリー内のファイル一覧が 右側の テーブル(Flexgrid) に表示されます。 使っているソフトなど jQuery jQuery Flexigrid for jQuery クールなグリッド(テーブル)の表示 jQuery plugin: Treeview ツーリー表示 jRails - jQuery on Rails Railsのlink_to_remote等のAjax機能を jQueryで使えるようにするプラグイン nickfessel.com - Put Flexigrid on Rails Flexigrid用 Ruby on Railsのコード例 今回作ったコード 実際
ASCII.jp：Web制作会社が作った！超使えるJavaScriptライブラリ
「Webサイトを作るときに本当によく使う機能を、自分で作らずにさくっと実装したい」――。そんなワガママな願望をかなえてくれる JavaScriptライブラリが登場した。ミツエーリンクスが今月オープンソースとして公開した「MJL（MITSUE-LINKS JavaScript Library）」は、Webサイト制作に必須の“最小限の機能”に絞ったJavaScriptライブラリだ。 昨今相次いで公開されている、リッチなUIを実現するJavaScript/Ajaxライブラリとは異なり、MJLの機能はとてもシンプルだ。もともとWeb制作会社であるミツエーリンクスが「自社標準ライブラリ」として作成したものだけあって、汎用性・実用性を重視したライブラリになっている。 具体的な機能は以下の6つ。確かにどれもよく使いそうなものばかりだ。 画像のロールオーバー Flashオブジェクト埋め込みの機能拡張 新規
より良いフォーム作りの参考になるフォームのサンプル＆ライブラリ集:phpspot開発日誌
16 Free Ajax Contact Forms - For A Better User Experience Contact forms are the most common bridges between readers & site owners whether it is a blog or an e-commerce site. より良いフォーム作りの参考になるフォームのサンプル＆ライブラリ集。 JavaScript, Ajax等を使い、バリデーションやフォーム入力のしやすさなどについて考えられたフォーム集がまとまってました。 LightForm - Demo - ファンシーなフォームデザインにクールな入力チェック Proto Form - 入力チェック機能や現在位置強調機能 jQuery - Ajax Contact Form (Tutorial & Files) - D
魅力的なウェブサイトを作成するために知っておくと便利な9つのスクリプト - GIGAZINE
個人的なウェブサイト作成や仕事としてウェブサイトを作成している人だけでなく、何かのサイトを発注して作ってもらう際などにこういうのを知っておくと、かなりはっきりと具体的なイメージを相手に伝えやすくなるので、スムーズにコミュニケーションできるはずです。あるいはクライアントにこれらのリソースの存在を認知してもらうことで、話が進めやすくなるかもしれません。 というわけで、魅力的なウェブサイトを作成するために知っておくと便利な無料の各種スクリプトは以下から。 Woork: Useful resources and tutorials for developing stunning web sites 1. ModalBox http://www.wildbit.com/labs/modalbox/ Web2.0スタイルのダイアログボックスなどを表示させることができます。Mac OS Xのダイアログボ
ナビゲーション実装に使える、Ajaxライブラリ/サンプル集:phpspot開発日誌
35 Easy to use Free Ajax/Javascript Navigation Solutions : Speckyboy - Web Design, Web Development and Graphic Design Resources 35 Easy to use Free Ajax/Javascript Navigation Solutions ナビゲーション実装に使える、Ajaxライブラリ/サンプル集。 便利そうなナビゲーションパーツが多数紹介されていて参考になります。 Outlook Navigation Bar jQuery suckerFish Tree with Checkbox Nodes Tabbed Search Bar Sliding Tabs Floating window with tabs 続きを見る クールで分かりやすいサイト作りに役立てまし
MOONGIFT: � クールな登場をするフローティングウィンドウ「Sexy LightBox 2」:オープンソースを毎日紹介
※ 画像は公式サイトデモより 一年くらい前から写真の拡大にJavaScriptが使われるようになってきた。クリックするとその場で拡大表示してくれる類のソフトウェアだ。そして最近ではさらに一歩進んで、ログインウィンドウや説明用のダイアログもJavaScriptで表示するものが出てきた。 角丸のデザインが格好いいフローティングウィンドウ ちょっとしたコンテンツや、FAQなどはポップアップで表示してあげると画面の切り替えもなく使えて便利だ。そしてこちらもその一つだ。 今回紹介するオープンソース・ソフトウェアはSexy LightBox 2、フローティングウィンドウライブラリだ。 Sexy LightBox 2はクリックすると上からウィンドウがスライドしてきて、コンテンツを表示してくれる。角丸になっていえ、デザインも格好良い。背景はグレーアウトの他に、自分で指定した色を使うこともできる。 別なサイ
jQuery 関連記事まとめ - Cyokodog::Diary
はてブだと埋もれるのでこちらに書き足してきます。 jQuery 基本機能 本家 jQuery.com リファレンス jQuery 日本語リファレンス jQuery 開発者向けメモ jQuery リファレンス- openspc2 jQuery 1.2.6 リファレンス - StackTrace チートシート HTML/CSS, jQuery, WordPressなどウェブ制作者のためのチートシート集 - coliss スライド・関連情報 はじめての jQuery jQueryのプレゼンVIDEO - JAM LOG 第1回 Silverlight vs. jQuery＋ASP.NET AJAX - @IT チュートリアル jQuery 入門 - openspc2 jQuery を使って Ajax 開発を単純化する - IBM jQueryの魔法 - All About jQuery ではじめ
写真を立体的にきれいにならべてディスプレイできる「Showcase」:phpspot開発日誌
Prototype extension: Showcase 写真を立体的にきれいにならべてディスプレイできる「Showcase」。 次のように写真をきれいに並べることが可能。中心以外の写真をクリックで、クリックした写真が中央にくるようなＵＩになってます。 横方向だけじゃなくて、縦方向や、斜めにしたりすることも可能。 縦方向のものはブログのサイドバーなんかに設置すると面白いかもしれないですね。 関連エントリ JavaScript製の画像スライダー・ギャラリーいろいろ カルーセルやページャ機能がついたYUI 2.6.0がリリース 画像を3Ｄ回転するJS「3D Image Carousel」
[JS]jQueryのプラグイン33 1選 -2008年10月 | コリス
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 ListNav リストの高機能なナビゲーションを作成。 Scroll your HTML ホイールにも対応した高機能なスクロールする
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Site Under Maintenance
Site Under Maintenance
JavaScriptでカレンダーを実現するための38のスクリプト | IDEA*IDEA
ちょっとした説明に便利なTooltipsのスクリプトいろいろ | IDEA*IDEA
シンプルに使えるJS製WYSIWYGエディタ「widgEditor」:phpspot開発日誌
JSでクールなWYSIWYGエディタを実装「FreeRichTextEditor」:phpspot開発日誌