IDEA * IDEAドットインストール代表のライフハックブログ
jQuery Roundabout
Roundabout is a jQuery plugin that converts a structure of static HTML elements into a highly customizable turntable-like interactive area. (And now, not just turntables, but many shapes!) In its simplest configuration, Roundabout works with ordered- and unordered-lists, however after some quick configuration, Roundabout can work with an set of nested elements. Requirements & Add-Ons Requires jQue
[Ajax][UI]画像スライダー・郵便番号検索・バリデーション « vanillate
画像をインラインフレームなどを使わずにスライドさせたり、郵便番号を入力するだけで（ボタンを押さずに）住所の入力補助ができたり、データを送信するまえにエラーチェックを行ったりといったインターフェイスが、当たり前に利用されるようになってきました。 利用側としては、使いやすい方に慣れていく傾向にあるので、私も取り入れるために調べてみた際のまとめです。 こういう処理の実装を行う時って、時間がない、仕上げの時が多いので、比較的に簡単に導入できそうなものを中心に、ご紹介します。 jQueryTOOLS デモ スライダー、ツールチップなどが簡単に実装できるライブラリ 1. Tabs（タブでDIV内容を切り替え） 2. Tooltips（ロールオーバーなどでヘルプ表示） 3. Overlay（同一ページ内で新しいウィンドウを表示） 4. Expose（クリックされた要素以外を暗転） 5. Scr
jQueryでブロック要素の高さを揃えてみる - 徒書
ブロックレベル要素の高さを揃えるheightLine.js[to-R]を見て不満に思ったのは、高さを揃える要素を取得するために固定のclass名を使っていることでした。これだと既存のHTML文書に適用するためには、script要素を加えるだけでなく、それ用のclass名も書き加えなければなりません。どうせJavaScriptを使うのであれば、既存のHTMLの構造を生かしつつスクリプト側で目的の要素を取得できたほうがいいのではと思いました。 というわけでまたも自分なりに書き換えてみるシリーズなのですが、今回は要素取得の柔軟さに着目してjQueryを使ってみることにしました。 できたものは以下です。 jquery.flatheights.js 動作サンプル jQueryの$関数ではCSSセレクタの書式で要素を取得できるので、例えば「"box1"というclass名を持つ要素」を集めるのであれば
[JS]画像やテキストをフォーカスした際に不透明度をコントロールするスクリプト -Opacity Focus
画像やテキストをフォーカスした際に、不透明度をコントロールするスクリプトをdavid walsh blogから紹介します。 <textarea name="code" class="js" cols="60" rows="5"> $(document).ready(function() { //area 1 $('.fade-area-1').children().hover(function() { $(this).siblings().stop().fadeTo(500,0.5); }, function() { $(this).siblings().stop().fadeTo(500,1); }); //area 2 $('.fade-area-2').children().hover(function() { $(this).siblings().stop().fadeTo(500
Using Opacity to Show Focus with jQuery Example
When you hover over an image below, every image except the one you are hovering over will fade out. Example 1: Images
Webデザイナーのための美しいjQueryプラグイン22 – creamu
Tutorial9で、Webデザイナーのための美しいjQueryプラグインが紹介されています。 ざっといくつかご紹介。 » jQuery.popeye – an inline lightbox alternative lightboxをギャラリーのようなインターフェースに代替したjQuery.popeye » jPlayer – jQuery mp3 player plugin jQueryで作るmp3ミュージックプレーヤー » jQuery form plugin jQueryで非同期通信のフォームを実装 » easyDrag jQuery plugin 簡単にコンテンツをドラッグ&ドロップできるようにするプラグイン » jQuery accordion plugin – vertical 垂直方向のアコーディオンメニュー » Switch stylesheets with jQuery
スタイリッシュなフォームを作るときに見るべきエントリまとめ
Form Design フォームデザイン さてさて、最近のwebの入力フォームは本当に凝ってるところが多くて、ただただ関心するばかり。 そんなわけで今回は、焦点を『フォーム』に限定し、スタイル抜群なフォームUIを勉強してみたい。 流れ的には インスピレーションデザイン集CSSによるフォームの変更方法JavaScriptによるフォームデザインという感じでお送りいたします。 インスピレーション まずは、スタイリッシュなフォーム。 これらは、webデザイン全体がフォームデザインとなっているまとめです。 まさにバインダー。 webの入力フォームを街頭アンケート用紙のように仕上げたデザイン。かっこいい。 くしゃくしゃっとしたような紙の一部にフォームが設置されている。 こちらもメモに名前を書くかのごとく。 深海に光がさす感じのイメージ。 シンプルイズベストなレイアウト設計がなされている。 １，２，３，
[JS]CSSスプライトにスライドやフェードのアニメーションを加えるスクリプト -SpriteMenu
一枚の画像で作成するCSSスプライトに、スライドやフェードのアニメーションを加えるスクリプト「SpriteMenu」を紹介します。 SpriteMenu demo SpriteMenu デモでは、イージングを使用したスライドとフェードのアニメーションが紹介されています。 使用している画像はどちらも同じで、下記のようになっています。 CSSスプライト用の画像（クリックで拡大） ナビゲーションはリスト要素で実装されており、スクリプトのオプションではナビゲーションのサイズ、アニメーションのエフェクト、スピード、イージングなどを変更できます。 SpriteMenuはjQueryのプラグインのため、実装にはjquery.jsが必要です。
これは注目！jQueryでExtばりにリッチなＵＩが実装できる「jQuery Ribbon」:phpspot開発日誌
これは注目！jQueryでExtばりにリッチなＵＩが実装できる「jQuery Ribbon」 2009年05月28日- jQuery Ribbon - Home これは注目！jQueryでExtばりにリッチなＵＩが実装できる「jQuery Ribbon」。 利用すれば、コントロールのグルーピングや、ドロップダウンメニュー、階層リストなどのリッチなコンポーネントが実装できるみたい。 jQuery Ribbonを使ったリッチなＵＩ。Windows7っぽいデザインのＵＩがJavaScriptで。 アイコン付きのかっこいいメニュー 表示しているＵＩのテーマを選べる アイコンつきリスト アイテムのグルーピング ドロップダウンメニュー ちょっとこれは素晴らしいですね・・・。jQueryの優位性がますます高くなってしまいましたね。 関連エントリ ナビゲーションのUIはこれで完璧かもなjQueryプラグイ
デザイナー・コーダー必見！使えるform関連jQueryプラグインの数々 | バシャログ。
こんばんは、最近ホルモン焼きにハマっているishidaです。 WEBサイト制作時、formは必ずといってもいいぐらい存在します。 お問い合わせフォームや会員登録フォームなどがすぐに思いつきますよね。 デザインをがっつりフォーム部分で作り込んでも、CSSのみでは、 実現できなかったりすることもよくあります。 そんなクセのあるformを、よりリッチに！かつ操作性を向上！できるjQueryプラグインの数々をご紹介します。 デザイナーの方は、フォームのデザインの参考に。 コーダーの方は、ページ作成時間の短縮に手助けになればと思います。 jQuery plugin: Validation フォームの入力チェック（バリデーション）が簡単にできるプラグイン。 エラーメッセージはlocalizationディレクトリ内に18言語用意されています。 日本語用は別途作成し、使用することが可能です。 jQuery
jQuery GalleryView - by Jack Anderson
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
魅力的なウェブサイトを作成するために知っておくと便利な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のダイアログボ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
マウスオーバーをデザインする | DesignWalker
[JS]ちょい見せコンテンツを雑誌のようにペロッとめくるスクリプト -Animating Page Peel