IDEA * IDEAドットインストール代表のライフハックブログ
カートが目立たず、いい感じにスライドしてくれるショッピングカートの仕組み:phpspot開発日誌
Ajaxed Sliding Shopping Cart With jQuery カートが目立たず、いい感じにスライドしてくれるショッピングカートの仕組みが公開されています。 実際の動作を見るにはデモページを参照するのがよいかもしれません。 デモページ これは新しい動きですね 関連エントリ 超かっこいいJavaScriptショッピングカート「simpleCart(js)」 PHP製のショッピングカートシステムいろいろ
jQuery用のGUIコンポーネントプロジェクト「mbideasproject」がすごい:phpspot開発日誌
mbideasproject - Project Hosting on Google Code jQuery用のGUIコンポーネントプロジェクト「mbideasproject」がすごいです。 以下、プロジェクトのホームページもOSっぽいインタフェース上でアニメーションしてかっこいいのですが、構成されるコンポーネントが色々とあるみたい。 mbContainers | デモ OSのようなウィンドウ管理システムが作れるようです このページの上でそれぞれ動作を確認することが出来ます。 mbMenu | デモ かなりリッチなメニュー実装用ライブラリ 右クリックのコンテキストメニューもいじれます mbImgNavigator | デモ 画面に収まりきらない画像をドラッグ＆ドロップでGoogleMapぽく見れるコンポーネント。サムネイル付き mbTabset | デモ mbTooltip | デモ よく
タブ、ツールチップなどクールなＵＩコンポーネント実装jQueryプラグイン「jQuery TOOLS」:phpspot開発日誌
タブ、ツールチップなどクールなＵＩコンポーネント実装jQueryプラグイン「jQuery TOOLS」 2009年06月16日- jQuery TOOLS - The missing UI library for the Web タブ、ツールチップなどクールなＵＩコンポーネント実装jQueryプラグイン「jQuery TOOLS」。 同様のライブラリは他にあるかもしれませんが、アニメーションや見た目の点で非常に洗練されていて覚えておく価値アリなものになってます。 Expose 該当部分だけを目立たせることが出来る ↓↓クリックするとクリックした位置以外がグレー表示になります Tooltip イカしたスタイルがかかったツールチップ Tab 綺麗なタブUI Overlay LightBox風のページ内ウィンドウ実装 Scrollable 少ないスペースでコンテンツをスクロールするウィジェット実
無限に回転するカルーセルＵＩ実現用jQueryプラグイン実装チュートリアル:phpspot開発日誌
jQuery Infinite Carousel | jQuery for Designers - Tutorials and screencasts 無限に回転するカルーセルＵＩ実現用jQueryプラグイン実装チュートリアル 次のような、最後のアイテムに移動しても、最初に戻る無限に回転するカルーセルを作成していくチュートリアルが公開されています。 スクリーンキャストで、作成の過程についても紹介されていて、分かりやすい。 単純に誰かの開発環境を覗くという意味でも勉強になりそう。 更に、図入りで、仕組み・コードについて紹介する形のチュートリアルになっています。 関連エントリ ナビゲーションメニューを1歩進んだものに引き上げるjQueryチュートリアル集 jQueryやPHPを使った便利な仕組みのチュートリアル集 jQueryクライアントとPHPサーバ間をJSONで結ぶチュートリアル
[JS]設置が簡単なパネルをスライド表示させるスクリプト -Slide box
divで実装したパネルをページの上部から、スムーズなアニメーションでスライド表示させるスクリプト「Slide box」を紹介します。
PHPとAjaxを使ったリアルタイム値チェック機能付きコンタクトフォーム「LightForm」:phpspot開発日誌
Web-kreation - LightForm ::: Free Ajax/PHP Contact Form PHPとAjaxを使ったリアルタイム値チェック機能付きコンタクトフォーム「LightForm」。 クールなフォームのＵＩに加えて、入力値がおかしい場合のリアルタイムエラー表示を行ってくれるPHPとAjaxのプログラムが入手できます。 UIがクールなフォームになってます 入力チェックの機能。 たとえば、名前を１文字入力して次にいくと、最低で３文字必要だというエラーが次のように表示されます。 メールアドレスが間違っている場合もちゃんとチェックしてくれます メンテナンスされていない点には注意ですが、なかなか使えるプログラムなので改変してサイト構築に活用すれば手間を大幅に削減できそうです。 関連エントリ JavaScriptでHTMLフォームの劇的ビフォアアフター「Jqtransform
jQueryやPHPを使った便利な仕組みのチュートリアル集:phpspot開発日誌
9lessons: jQuery and Ajax best 9lessons. jQueryやPHPを使った便利な仕組みのチュートリアル集。 9lessonsというサイトがあって色々便利な仕組みのチュートリアルが公開されています。 Twitter Like More Button with jQuery and Ajax. 「もっと読む」をajaxで実現するサンプル Exactly Twitter like Follow and Remove buttons with jQuery and Ajax Twitter風のフォロー、削除ボタンを実現するサンプル Delete a Record with animation fade-out effect using jQuery and Ajax. 行を削除してフェードアウトアニメーションをさせるサンプル jQuery Username Av
入力ボックスでクリックすると消えるデフォルト値を簡単実装「ToggleVal」:phpspot開発日誌
ToggleVal :: jQuery Plugins by Aaron Kuzemchak 入力ボックスでクリックすると消えるデフォルト値を簡単実装「ToggleVal」。 入力ボックスにデフォルトでヒント値を入れておいてクリックすると消えるあの分かりやすいインタフェース。 実際に実装するとなると、ちょっと面倒ですが、ToggleValを使えば、メソッドを1回呼び出すだけで簡単に実装できます ↓↓↓↓クリックで消える↓↓↓↓ jQueryプラグインなので、以下のように使いやすくなっています。 $("input[name='name']").toggleVal( { option } ); 実装したくなった時、ちょっと面倒でまた今度、とならないようにこれを覚えておけばよさそう。
わずか2KBで直感的に使えるタブインタフェース実装用jQueryプラグイン「idTabs」:phpspot開発日誌
idTabs わずか2KBで直感的に使えるタブインタフェース実装用jQueryプラグイン「idTabs」 以下のようなHTMLを簡単にタブ化できるみたいです <ul class="idTabs"> <li><a href="#aaa">Tab 1</a></li> <li><a href="#bbb">Tab 2</a></li> </ul> <div id="aaa">This is tab 1</div> <div id="bbb">This is tab 2</div> UL要素の中にリストを定義してあるのがタブ部分で、<div>部分が該当ページ部分です。 1ページ内に全部のデータを収めることも出来るところもいいですね。 関連エントリ タブ機能付きパーソナライズドホームページ『Netvibes』 多数のタブをグループ化して管理できる「TooManyTabs」
CSSでクールにデザインされた階層ドロップダウンボックス実装jQueryプラグイン「mcDropdown」:phpspot開発日誌
Giva Labs - mcDropdown jQuery Plug-in | Giva CSSでクールにデザインされた階層ドロップダウンボックス実装jQueryプラグイン「mcDropdown」。 一見なんの変哲もないドロップダウンですが、「▼」のボタンをクリックして驚き。 次のようなCSSでスタイルされたカッコいいドロップダウンが出現します。 階層が深いメニューであっても、普通のcomboボックスに比べて非常に分かりやすく作ることが出来ます。 CSSでレイアウトを調整できるというのはいいですね。 しかも、このドロップダウン、自由入力にも対応しており、「a」を入力したところ、補完候補をサジェストしてくれます。 JavaScriptも駆使されて実現されたこの機能ですが、うまく使えばサイトのナビゲーションを分かりやすくすることが可能かもしれません。 ドロップダウン関連エントリ HTMLだけで
HTMLだけでは実現できないドロップダウンチェックリストの作成JavaScript:phpspot開発日誌
jQuery Dropdown Check List HTMLだけでは実現できないドロップダウンチェックリストの作成JavaScript。 複数選択式の選択リストは普通に作成することが出来ますが、チェックボックスを使ったわかりやすいＵＩの実現は難しいですね。 「jQuery Dropdown Check List」ならjQueryプラグインなので、非常に簡単に実現できます。 $("#s6").dropdownchecklist(); のように、１行で初期化できるところも素晴らしいですね。 一昔前にやっていれば、どうやってやってるんだろうと検討もつかなかったと思いますが、進化したものです。 関連エントリ JavaScriptを使ったULリストをツリー風に表示するサンプル「Simple Tree Menu」
あのFlashサイトのUIをjQueryで作る (1/5)
「見た目に美しく、ユーザーに楽しさや心地よさを与えるUIを作りたい」 そう考えたときに参考になるのが、Flashで制作されたWebサイトです。最近では、JavaScriptによるリッチなUIを持つWebサイトも増えてきていますが、長年、さまざまなUIが実験的に生み出されてきたFlashの世界には、まだまだユニークなサイトが多くあります。 たとえば、今回紹介する「ハーズ実験デザイン研究所」のWebサイトは、フルFlashで制作された“楽しい”コーポレートサイトです。同社が手がけてきた過去の作品を、時間の経過とともにゆっくりと切り換えていく様子は、まるで1本の映像作品を見ているよう。メニューのちょっとした動きひとつをとっても、ユーザーを楽しませようという意図が感じられます。 Flashサイトのような美しくて楽しいUIを、JavaScriptでも作れないか――それが今回のテーマです。 今回のお手
色々な使い方が考えられそうな「次へ」「前へ」ボタン付タブＵＩ実装ライブラリ:phpspot開発日誌
jQuery UI Tabs with Next/Previous 色々な使い方が考えられそうな「次へ」「前へ」ボタン付タブＵＩ実装ライブラリ。 ありがちな、タブＵＩにちょっと機能を付け加えて便利にしたものです。 「次へ」「前へ」ボタンがついたことで、画像を貼り付けてもよさそうですし、スライドみたいな使い方もできそう。 トップページなんかの、限られたスペースの中に沢山の情報を埋め込むのもよいかもしれません。 デモページ jQueryベースなので使い勝手も良さそうですね。 関連エントリ 多数のタブをグループ化して管理できる「TooManyTabs」 超クールなタブインタフェースをjQueryで作成するチュートリアル フィールド間を自動でタブ移動してくれる入力補助JSライブラリ「Autotab」 タブ式のスライドウィジェットを簡単作成できるjS「jFlow」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]簡単に設置ができるmp3プレイヤーのスクリプト -jPlayer
JavaScriptでHTMLフォームの劇的ビフォアアフター「Jqtransform」:phpspot開発日誌
IDEA * IDEA
スムーズなスライドショーを実現するスクリプト: Recently Ajax
