2010年の間に見ておきたいjQueryプラグイン12 – creamu
jQueryのプラグインをチェックしておきたい。 そんなときにおすすめなのが、『12 Helpful jQuery Plugins to Check Before Ending April 2010』。2010年の間に見ておきたいjQueryプラグイン集です。 いい感じのものがまとまっているので、いくつかご紹介しますね。 jQuery ajaxContactForm plugin フォームのバリデータ。背景色を変えることでシンプルにアラートしてくれる。MITライセンス Image Puzzle Using jQuery 画像のパズルゲームを作れるプラグイン jQuery Mega Menu jQueryを使った、見た目も動作もクールなドロップダウン型メガメニュー JCoverflip Macのカバーフローのようなギャラリーインターフェースを作れるプラグイン jQuery Bubble Po
サイトのデザインをカンタンにカスタマイズできるjQueryのWYSIWYGサイトエディター「stiqr」
ブログやサイトのデザインで、画像が横にはみ出しているとカッコよく感じたりすること、ありますよね。 しかし、それを実現するには割と高度なCSSの知識が必要になってきます。 今回は、それをカンタンに実現できてしまう機能を実装出来るjQueryプラグインをご紹介。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! 「stiqr」は、HTMLサイトだけでなく、WordPressやBlogger、Tumblrを、カンタンにWYSIWYGサイトエディターで編集出来るようにしてしまうjQueryプラグイン。 ２行のコードをテンプレートに追加し、アカウントを設定するだけで利用可能になってしまいます。 ビフォーアフター ↑このようなデザイン変更を、ページを開いた状態でカンタンにおこなうことができます。 → サンプルペ
jQueryで作るiTunesライクなスライダー – creamu
手動で切り替えられるフォトスライダーを作りたい。 そんなときにおすすめなのが、『How to Create a Simple iTunes-like Slider』。jQueryで作るiTunesライクなスライダーです。 右に表示される矢印アイコンをクリックすることで、サムネイルと写真が切り替わる動きになっています。なかなか気持ちのいい動きですね。 jquery.jsとmocha.jsというのを使っていて、ソースはとてもクリーンになっています。 デモは以下から。 Demo View It Online 一度見てみてください。 How to Create a Simple iTunes-like Slider tuts+ネットワークのサイトが、それぞれデザインリニューアルされていますね。細部の改善を図ったとのことですが、よりメリハリのある、すっきりとしたデザインになっていると思います。 さて
複数選択が可能でスタイリッシュなドロップダウンメニュー実装用「jQuery MultiSelect Plugin」:phpspot開発日誌
複数選択が可能でスタイリッシュなドロップダウンメニュー実装用「jQuery MultiSelect Plugin」 2010年02月04日- jQuery MultiSelect Plugin/Widget with ThemeRoller Support | Eric Hynds - Website Developer 複数選択が可能でスタイリッシュなドロップダウンメニュー実装用「jQuery MultiSelect Plugin」が公開されています。 デザインもいいのですが、こうした機能は標準のHTMLではないので、こうしたUIが必要な局面は助かりそうですね。 選択すると、何個selectしたかという表示や、クリックの際のイベントハンドラも設定できます。 すべて選択、すべて解除もついてて細かいところにも気が利いてますね。 毎度ですが、必要なJS/CSSを読み込んだら次のように実装は１行
Gears+jQueryでローカルからドラッグ&ドロップによる画像のアップロードを可能にするPlupload
デスクトップなどのローカル上から ブラウザに画像をドラッグ&ドロップし、 アップロードを可能にするPlupload をご紹介します。GoogleGearsと jQueryで実現しているようです。 実装にはGearsAPIが必要になります。 Drag files here.とあるところに、デスクトップから画像をドラッグ&ドロップすると画像を認識し、アップロードする事が可能です。 CMS向けに作成したとの事です。もちろんデスクトップ上に限らず、ローカル上のどこからでもアップロード可能。また、複数の画像をまとめてドラッグ&ドロップでアップロードする事も出来ます。これ、WPに入れられないかな・・・ GoogleGearsAPI Pluploadを使うにはGoogleGearsAPIが必要です。gears_init.jsはGoogleから無料でダウンロード可能ですよ。 Gears以外にMSのSilv
ツールチップの機能、デザイン選びたい放題のjQueryのツールチッププラグイン３０まとめ:phpspot開発日誌
ツールチップの機能、デザイン選びたい放題のjQueryのツールチッププラグイン３０まとめ 2010年01月26日- 30 Stylish jQuery Tooltip Plugins ツールチップの機能、デザイン選びたい放題のjQueryのツールチッププラグインが３０種類もまとまったエントリのご紹介です。 jQueryだけでこれだけあるというのは驚きなのですが、ツールチップに迷った時とかのために参考に出来そうです。 個人的には、cssでデザインできてエレメントに属性を振っておくと自動で出てくるタイプのものがいいなぁと思います。あとはアニメーション効果などもカッコいいものがいいですね
自由な位置にalert表示できるjQueryプラグイン「Feedback UI Plugin」:phpspot開発日誌
Feedback UI Plugin 自由な位置にalert表示できるjQueryプラグイン「Feedback UI Plugin」のご紹介。 Feedback UI Plugin を使うと、$(element).feedback('メッセージ'); のようにするだけで、対象のエレメントの側に次のようなalertメッセージを表示することができます。 左、右のどちらかに表示するかという点も決めれる他、cssのクラス名を指定してカスタマイズすることもできます。 フォームのバリデーションに特化しているわけでなく、特定のエレメントに対して行えるので、ユーザビリティの向上に色々な部分に柔軟に使うことができそうです。
ブラウザが落ちてもフォーム内容が消えないようにするjQueryプラグイン「jQuery autosave」:phpspot開発日誌
ブラウザが落ちてもフォーム内容が消えないようにするjQueryプラグイン「jQuery autosave」 2010年01月19日- rikrikrik.com - jQuery autosave plug-in ブラウザが落ちてもフォーム内容が消えないようにするjQueryプラグイン「jQuery autosave」。 データを編集中にフォームに書き込んでいて、ブログ記事などが消えたりするとても悲しい気持ちになりますが、このプラグインを使えばデータをブラウザのクッキーに保存してくれて、次にアクセスした時にリストアできるという素晴らしいプラグインです。 クッキー保存のため、サーバに保存する必要はないですし、手軽に使うことができそうです（ブラウザごとにクッキーに依存した文字数制限などは存在すると思います） こういうことを１からやろうとすると結構大変ですが、毎度のことながら、jQueryプラグ
ユーザーの進捗を明示する「プログレストラッカー」詳解
オンラインストアでの注文やフォームなどで、ユーザーの進捗を明示するプログレストラッカーの概要や特長、実装例、よくある間違いなどをSmashing Magazineから紹介します。 Progress Trackers in Web Design: Examples and Best Practices 以下はそのポイントを意訳したものです。 1. プログレストラッカーとは？ 2. プログレストラッカーとパンくずの相違点 3. プログレストラッカーの活用 4. プログレストラッカーのベストプラクティス 5. プログレストラッカーの実装 6. プログレストラッカーのよくある間違い 7. プログレストラッカーのショーケース 1. プログレストラッカーとは？ プログレストラッカーとは進捗を明示するもので、複数のステップがあるプロセスを完了するためにユーザーの手助けとなるものです。 オンラインのプロダ
[JS]Twitterのように残りの文字数をカウント表示するスクリプト -charCount
TwitterのUIのように、入力できるテキストの残りの文字数をカウントして表示するスクリプトをcss globeから紹介します。 Simplest Twitter-like dynamic character count for textareas and input fields デモページ 上記デモページではデフォルト版とカスタム版の二種類があり、デフォルト版は残りの文字数をカウントして表示し、カスタム版は設定した残りの文字数を超えると表示が強調されるようになっています。 スクリプトのオプションでは入力可能な文字数、強調表示する文字数の設定と、カウンターを配置する要素やクラス名やテキストデータを設定できます。 charCountはjQueryのプラグインのため、実装にはjquery.jsが必要です。
大量のリストから目当てのものを瞬時に探せるようになるjQueryプラグイン「LiveFilter」:phpspot開発日誌
大量のリストから目当てのものを瞬時に探せるようになるjQueryプラグイン「LiveFilter」 2010年01月20日- jQuery Plugin: LiveFilter 1.0.1 | Mike Merritt | Digital Inferno 大量のリストから目当てのものを瞬時に探せるようになるjQueryプラグイン「LiveFilter」。 １ページ内にリストが多く表示されていると探すのが大変ですが、LiveFilterを使えば瞬時に対象を探すことができます。 インプットボックスに検索したい文字列を入れると、一気に対象が絞り込まれ、好みのものがすぐに見つかるでしょう。 そんなの、グーグルツールバーやページ内検索を使えばいいじゃないか、という方もいると思いますが、それらの存在が知らない初心者の方に向けたページの場合は威力を発揮しそうです。 パソコン中級者や上級者の方に向けても、
動きの洗練されたjQueryのスライドギャラリー – creamu
かっこいいスライドギャラリーを実装したい。 そんなときにおすすめなのが、『GalleryView』。動きの洗練されたjQueryのスライドギャラリーです。 キャプションを付けられたり、画像だけフェードイン&アウトで切り替えたり、いろいろなタイプがありますね。しかも動きがかなり気持ちいいです。 デモは以下から。 Default Implementation Panels Only – Lightbox style gallery ソースもシンプルになっていますね。 ぜひ見てみてください。 GalleryView: A jQuery Content Gallery Plugin アバターを見てきました。迫力があって感動しましたね。
フィードバック用の簡単なフォームをサイドからスライドさせるjQueryプラグイン・contactable
Feedbackボタンをクリックするとサイド からフォームのパネルをスライドさせる jQueryプラグイン・contactableをご紹介 致します。情報元は去年の記事ですが、 自分が使いたかったのでメモ的にエントリ。 ユーザーにも優しいのでお勧めです。 わざわざページ移動せずともパッと送信出来るのでユーザビリティにも繋がりそうです。何より、インストールして使うので日本語に出来るのは大きいですね。テキストを日本語に直したデモをご用意しました。 デモ ※メールはダミーにしているので実際に送信は出来ません。 フォームテキストを日本語に変えるには梱包されているjquery.contactable.packed.jsの中を変更します。ちょっと横長なので探し難いですが。。デモでは以下のように変更しました。 (function($){$.fn.contactable=function(options)
[JS]ニューリリースされたjQuery 1.4のチェックしておきたいサイト
2010年1月14日、jQueryの最新版1.4がリリースされました。 本家のサイトをはじめ、新機能のサンプルコードや1.3.2との後方互換について紹介します。 jQuery 1.4 Released jQuery 1.4のダウンロードとリリース情報 jQuery 1.4のダウンロードや詳細な情報は、下記ページをご覧ください。 jQuery 1.4 Released – The 14 Days of jQuery 性能は1.3.2と比較して、上のキャプチャのようにほとんどの面でパフォーマンスがより改善されたものとのことです。 jQuery 1.4 API チートシート jQuery 1.4に対応したチートシートです。 PDF版とPNG版も用意されています。
ナビゲーションメニューを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
第13回 今すぐできる！ユーザビリティを向上させるフォーム操作実践（5）デザインされたチェックボックスを実装する | gihyo.jp
もっと便利に！jQueryでラクラクサイト制作（実践サンプル付き） 第13回今すぐできる！ユーザビリティを向上させるフォーム操作実践（5）デザインされたチェックボックスを実装する 今回は選択不能とチェックボックスなどをデザイン 前回は疑似セレクトボックスの利用によって、セレクトのデザインを変更する方法をご紹介しました。今回は似たようなこととして、チェックボックスとラジオボタンのデザインを変更する方法をご紹介します。 それと今回はその前に、disabledを利用して、フォームの入力を制限する方法と、それをJavaScriptによって、切り替える方法をご紹介します。 まずは完成サンプルをみてください。 選択不能状態にしておくには、HTMLに「disabled="disabled"」を入れるとできます（次のサンプル参照）。しかし、それを選択可能状態にするにはJavaScriptで操作するしか
ビフォーアフターをわかりやすく表現できるjQueryプラグイン「Before/After」:phpspot開発日誌
jQuery Before/After Plugin ビフォーアフターをわかりやすく表現できるjQueryプラグイン「Before/After」が公開されてます。 このプラグインを実装すると中央にツマミが現れます。修正前・修正後という形でインタラクティブに見分けることができます。 ドラッグで移動すると、画像が切り替わります。 面白いですね。いざ実装するとなるとかなり大変そうですが、jQueryプラグインなので次のように１行というところが素晴らしいです。 $(function(){ $('#container').beforeAfter(); }); 関連エントリ そのまま編集が可能なテーブル実装用jQueryプラグイン「Zentable」 複雑な数式を出力したい際に使えるjQueryプラグイン「jsLaTeX」
フォーム要素にうっすらデフォルト値を入れてヒント表示できる「jQuery Form Tips」:phpspot開発日誌
PHPからTwitterを簡単に操作できるPEARパッケージ「Services_Twitter」がアッ... 次の記事 ≫：PHP関数の挙動をちょっと調べたいときに助かる「PHP Functions Online」 jQuery Form Tips Plugin フォーム要素にうっすらデフォルト値を入れてヒント表示できる「jQuery Form Tips」 フォームにデフォルト値を入れておくことで利用者が何をいれていいのか、というのが直感的にわかり、かつスペースもとらないのでよく使われる手法ですが、実装も超簡単にやりたいですね。 jQuery Form Tips を使えば、フォーム要素の title 属性に値を入れておくだけでヒントを自動表示できます。 <p> <label for="i1">Field1</label><br /> <input type="text" name="i1"
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]セレクトボックスをアクセシブルでスタイリッシュにするスクリプト -Stylish Select
クールで動きが気持ちいいjQueryのツールチッププラグイン – creamu