クールで高機能な次世代検索ボックスを作成できる「VisualSearch.js」:phpspot開発日誌
DocumentCloud's VisualSearch.js クールで高機能な次世代検索ボックスを作成できる「VisualSearch.js」 検索ボックスというとどのサイトも<input type="text">があってCSSで修飾されていたりオートコンプリートが付いていたりするものですが、今回紹介する検索ボックスはそれらをもうちょっと進化させたものになっています。検索条件など細かくをいれてもらうような場合、フォームが巨大になってしまったりしますが、その心配はありません。１つの検索ボックスで完結します。 検索ボックスがあります 入力するとフィルタの候補が現れます Enterで補完されます 条件を入れていきます ×ボタンで条件は消せますし、条件の上でクリックすればそのままオートコンプリートが走ります 日付の指定なども検索ボックス上で完結させられます こうした検索ボックスが合わないサイトも
特定要素内の文字をタイプライター風にアニメーションさせるjQueryプラグイン「TypeWriter」:phpspot開発日誌
特定要素内の文字をタイプライター風にアニメーションさせるjQueryプラグイン「TypeWriter」 2011年02月10日- TypeWriter 特定要素内の文字をタイプライター風にアニメーションさせるjQueryプラグイン「TypeWriter」 １文字１文字をスピードを指定してアニメーション表示させられるので、１つのエフェクトとして使えそうです。 アニメーション終了後のコールバック等も可能で、アニメーション後に次のアニメーションを開始したりといったことが可能。 １から実装すると微妙に大変そうな機能も、たった１行で実現することが可能です。 単に文字をメッセージとして表示するよりも、動きがある方がインパクトがありますので、伝えたいメッセージがある場合に導入してみてもよいかも。 関連エントリ サイトの使い方をその場でアニメーションしてチョートリアルさせられる凄いjQueryプラグイン「
[JS]jQueryのプラグイン100選 -2010年総集編
2010年に紹介したものを中心としたjQueryのプラグイン100+α選です。 今年は、アニメーションのエフェクトやレイアウト、後半は背景画像関連のプラグインが特に目立っていたように思います。 [ad#ad-2] コンテンツスライダー・カルーセル関連 ギャラリー・画像拡大関連 ナビゲーション関連 タブ関連 パネル・ボックス関連 ツールチップ関連 レイアウト関連 背景画像関連 その他UI関連 アニメーション関連 スクロール・ドラッグなど操作関連 テーブル・リスト・データ関連 フォーム関連 コンテンツ生成 その他 コンテンツスライダー・カルーセル関連
30近いウィジェットがセットになったjQueryプラグイン集「Wijmo」:phpspot開発日誌
Wijmo - jQuery UI Widgets 30近いウィジェットがセットになったjQueryプラグイン集「Wijmo」。 jQueryといえばプラグインによって様々なことが出来るのはご存じだと思いますが、Wijmoはこれ1個で30ものウィジェットが実装できるパックです。 UIのデザインをそろえたいような場合に使えそうです。 アコーディオン カレンダー 各種グラフ コンボボックス オーバーレイ 独自フォームデザイン グリッド リスト まだまだあります・・・。 よくここまでそろえたなという品ぞろえですね。 関連エントリ YoutubeやUstream等の動画埋め込みが超簡単になるjQueryプラグイン「jquery.mb.mediaEmbedder」 jQueryでYoutube埋め込みビデオをブロックの幅に合わせるコード 再生ボタン等も変更できちゃうYoutube操作jQueryプラ
コンテンツの概要を好きな高さできっちりピクセル指定できデザインを崩させないjQueryプラグイン「DivGrow」:phpspot開発日誌
コンテンツの概要を好きな高さできっちりピクセル指定できデザインを崩させないjQueryプラグイン「DivGrow」 2010年10月29日- DivGrow jQuery Plugin ? Easily make your DIV containers expandable & collapsable (with animation) HibboBlog コンテンツの概要を好きな高さできっちりピクセル指定できデザインを崩させないjQueryプラグイン「DivGrow」。 ブログの記事の概要なんかを次のように画像の横に表示させるとして、このプラグインを使うことでピッチリと画像の高さをあわせてデザインをスッキリさせることが可能です。 通常こういうことをやろうとすると結構めんどくさいですがjQueryプラグインなので高さを渡してあげるだけで綺麗にそろいます。 で、「Show More」という部分
写真を効果的に見せるjQueryプラグイン集「7 Awesome JQuery Photo Plugins for Developers」
TOP > WebDesign > 写真を効果的に見せるjQueryプラグイン集「7 Awesome JQuery Photo Plugins for Developers」 様々なサイトで利用されている高機能なjavascriptライブラリjQuery。扱いやすく多くのプラグインがでていることもあり、定番のライブラリとなっていますが、今日紹介するのはそのなかでも、写真を効果的に見せるjQueryプラグイン集「7 Awesome JQuery Photo Plugins for Developers」。 2.Thumbnails Navigation Gallery with JQuery – Demo CSSとjQueryを上手く使って、写真を効果的に見せることができるプラグインがあつめられています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。
雑誌の誌面のような段組みレイアウトを簡単に作成できるjQuery プラグイン 「jQuery Masonry」 | WEBサイト制作 WEBシステム開発 | HAPPY*TRAP
We’re getting things ready Loading your experience… This won’t take long.
jQueryとAjaxで作るスムーズページング (1/3)
Googleの検索結果のように、長いリスト項目を複数のページに分割して表示することを「ページング」（Paging）と言います。ページング処理では下部にナビゲーションリンクを配置し、クリックされた番号のページを表示しますが、ページ全体をリロードして切り替えるには時間がかかります。そこで今回は、スムーズにページングさせるためにAjaxを利用して更新が必要な部分のみを外部ファイルから読み込んで書き換え、ユーザーのストレスを軽減する方法を紹介しましょう。 データのHTMLを用意する 今回は、数が多い商品情報のリストを複数のページに分割して表示するサンプルを作成します。はじめにAjaxで読み込むコンテンツデータを用意します。Ajaxは、XMLやJSON（JavaScript Object Notation）、テキストなどさまざまデータを扱えますが、今回はもっとも手軽なHTMLを使いましょう。コンテン
ページのフッターに常に便利リンクを固定で表示するためのjQueryプラグイン「jQuery Fubar」:phpspot開発日誌
jQuery Fubar ? How To Create A Website Toolbar From Scratch And Add Widgets To It | AddyOsmani.com | Where Web Businesses Grow ページのフッターに常に便利リンクを固定で表示するためのjQueryプラグイン「jQuery Fubar」。 ページフッターに、ツールバーなどでソーシャルサイトへの投稿リンクなどが表示されていると便利なだけでなく、ソーシャルによって情報が広まる可能性も高めてくれます。 そういうツールバーを簡単に実装するためのjQueryプラグインがチュートリアルとともに公開されました。 実装された画面は次のようになっており、なかなかクールな上、ガクガク動かずに固定なので目障りにもなりません。 同じような物を実装したい場合があった際に覚えておくとすぐに実装でき
ナビゲーションメニューを1歩進んだものに引き上げるjQueryチュートリアル集:phpspot開発日誌
25 jQuery Tutorials for Improved Navigation Menus ナビゲーションメニューを1歩進んだものに引き上げるjQueryチュートリアル集が紹介されています。 How to Make a Smooth Animated Menu with jQuery アニメーションする、おしゃれなメニュー Create an Apple Style Menu and Improve it via jQuery Apple風のクールなメニュー。アニメーションしつつ、アイコンも表示してくれなかなかクール Create a Slick Tabbed Content Area Using CSS and jQuery 少ないスペースにタブを設置してメニューにしている例。アニメーションもあり。 Using jQuery for Background Image Animat
[JS]これ最強かものツールチップスクリプト -BeautyTips
シンプルなツールチップも簡単に実装できるだけなく、デザインのカスタマイズが可能で、対応トリガーも豊富なツールチップのスクリプト「BeautyTips」を紹介します。 BeautyTips demo BeautyTipsは機能が豊富というだけでなく、テキストや画像、AJAXコンテンツの表示、ツールチップの表示位置の自動補正など基本性能もしっかりと抑えられており、フォームエレメントへの表示、ツールチップ元の変更なども可能です。 ツールチップはcanvasで描かれており、画像は必要ありません。 対応ブラウザはIE6.x+, Fx3.x, Op8+, Safari3.xとのことで、canvas非対応ブラウザにはExplorerCanvasが使用されています。また、IE6のz-indexへの対応にbgiframe、ホバー処理にhoverIntentが使用されています。 ※Chrome 1, Fx2で
[JS]jQueryのプラグイン33+1選 -2009年1月
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 Ajaxify さまざまなAJAXコンテンツを実装。 Agile Carousel パネルをダイナミックにスライド。 Start/S
jQueryのプラグイン100選 -2008年総集編 | コリス
seekAttention 注目箇所だけハイライトのアニメーションで強調。 スクロール・ドラッグなど操作関連のjQueryのプラグイン
[JS]シンプルなjQueryのプラグインが揃っている -Aquaron | コリス
Aquaronは、ナビゲーション、フロートしたエレメントの操作、クッキー・文字列の操作、エレメントの装飾などのシンプルなjQueryのプラグインを配布しているサイトです。
[JS]いろいろな表示形式に対応しているツールチップ -clueTip
clueTipは、jQueryのプラグインで、いろいろな表示形式に対応しているツールチップのスクリプトです。 jQuery clueTip Plugin clueTipの形状は、大別すると「Default Style」「jTip Theme」「Rounded Corners Theme」の３つがあり、ノーマルにツールチップが表示されるものから、AJAX対応、クローズボタン付き、サイズ・位置の指定、ホバー・クリックのトリガー変更などがあります。 デモページ clueTipは下記からダウンロードで、動作にはjquery.jsが必要です。 clueTip - flexible, enhanced tooltip
jQueryでweb制作をする時にキープしておきたい30リストまとめ*ホームページを作る人のネタ帳
jQuery公式サイト まずはｊQueryJavaScriptライブラリの入手。 jQueryの簡単な説明 Re：zapa氏 今更ですが、jQueryにはまりました ドキュメントとリファレンス 公式ドキュメントサイト（英語） jQuery 1.2 ドキュメント日本語訳 jQuery リファレンス 色々とデモがついているのでわかりやすい。 jQuery入門 (ver 1.2.1) jQueryの入門サイト。 こちらもサンプルデモが多く有り、わかりやすいです。 jQuery 開発者向けメモ - 基本・サンプル サンプルがたくさん有ります。すこし高度。 中級編 jQueryのパフォーマンス最適化に関するTips 軽量jQueryをもっと高パフォーマンスにする為のヒント。 [JS]jQuery 1.2リリース&変更点など jQueryを1.2以前から使っているユーザー向けのエントリ。 HTML/J
[JS]デザイナーのためのjQueryのチュートリアル
Web Design Wallのエントリー「jQuery Tutorials for Designers」から、JavaScriptのライブラリ「jQuery」が視覚的にどのように動作するかデモと共に解説してる10のチュートリアルを紹介します。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA*IDEA 〜 とあるサービス運営者が学んだことをまとめるブログ
はじめてのjQuery