DropKick - a jQuery plugin for beautiful dropdowns スマフォでもイケてるクールなドロップダウン実装jQueryプラグイン「DropKick」 次のようなデザインのドロップダウンが実装できます。大きめなデザインなのでスマフォでも使えます。 テーマは2種類あってホワイトとブラックから選べます マークアップとしては単なるselectなのでJSがおふでも使えるというものです 関連エントリ 超かっこいいmarquee2.0を実現するjQueryプラグイン「fMarquee」 テキストにグラデーションをかけられるjQueryプラグイン「True Gradient Text」 ブロックサイズ内に画像を綺麗に収めるjQueryプラグイン「CJ Object Scaler」

jQuery 3 State Switch Plugin ３つの状態を保持できるフォームエレメント実装jQueryプラグイン「jQuery 3 State Switch」。 フォーム要素といえばcheckboxやradio等がありますが、どちらもcheckedかそうでないかの２つの状態を保持させることが出来ます このプラグインを使えば３つの状態を保持させることができます。状態はクリックで切り替えます。 選択肢が３つあるような場合に活用することができそうです クリックで状態が切り替わります 関連エントリ 異なるサイズの画像を並べて瞬時にサイズを揃えられるjQueryプラグイン「MyThumbnail」 小さくで可愛いグラフが描けるjQueryプラグイン「Piety」 レイアウトに関する強力なjQueryプラグイン６つ 超かっこいいmarquee2.0を実現するjQueryプラグイン「fMar

パスワード入力欄に必須！キーボードのCAPS LOCKがONかどうかを調べられるjQueryプラグイン 2011年07月05日- Caps Lock jQuery Plug-In キーボードのCAPS LOCKがONかどうかを調べられるjQueryプラグイン パスワードの入力の際なんかにCAPS LOCKがONになっていると正しいパスワードを入れたつもりがちゃんとはいってないなんていうことも結構ありますね。 そのような問題を解決するのがこのプラグインです。jQueryでその状態をチェックし、アラート等を表示することが出来ます 例えば次のように設定すれば、input type="password" の場合でCAPS LOCKがONの場合にalertをあげられます。 デモページはこちら 関連エントリ 独自デザインselectボックス実装時に使えそうなjQueryプラグイン「EasySelect

モーダルウインドウを設置する必要最小限のカスタマイズを備えた超軽量のjQueryのプラグインを紹介します。 デモページ：サインアップフォーム leanModalの主な特徴 モーダルウインドウが簡単に実装できます。 超軽量（780バイト）です。 幅と高さをカスタマイズできます。 画像は使用しません。 1ページに複数のモーダルボックスを設置できます。 ログインフォーム、サインアップフォーム、アラートパネルなども可能です。 オーバーレイはスタイルシートで簡単にカスタマイズできます。 非対応 スーパーシンプルなため、下記には対応していません。 ギャラリー機能 iframeコンテンツの表示 AJAXコンテンツの表示 IE6 leanModalの実装 Step 1 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src

jQueryによるフォームデータ取得方法のまとめです。 フォームデータの取得で分かりにくいのは、セレクトボックス・ラジオボタン・チェックボックスの3種類ではないかと思われます。本エントリーではこの3種類にターゲットを絞り、動作サンプルを用いて解説します。「$」は「jQuery」で記述しています。 2012.06.19追記：テキストフィールド・テキストエリアの取得方法も追加しました。 2014.05.11追記：チェックボックスの取得方法をattr()からprop()に変更しました。 ネットで検索したところ、まとまった記事がなかったので自作しました。なお、本エントリーに掲載している方法以外にも色々なやり方があると思いますので、一例として参照して頂ければ幸いです。 １．セレクトボックスの値を変更したときに取得 セレクトボックスの値を変更したときに取得するには、changeイベントとval()を組

Win Menu | jQuery Plugins WindowsのメニューバーっぽいUIを実現できるjQueryプラグイン「Win Menu」 WindowsというかMacにもある誰もが使い慣れたメニューをサイト上で実現できます。 誰もが使い慣れているということで使い方やサイトの性質次第では大きくサイトの使い勝手をあげられそうです メニューの定義はmenuタグで階層的に表現するため、あとから見てもとても分かりやすいものになります。 menu自体は非推奨の要素らしいですが、多くのブラウザが対応しているみたいです。ここら辺こだわりがあるかたはULなどに修正してもよいでしょう。 jQueryがあれば何でもできちゃいますね 関連エントリ フォーム要素をクールにするためのjQueryプラグイン集 上下左右どこでも設置できるスライドコンテンツ実装jQueryプラグイン「jQuery Slick」 簡

DocumentCloud's VisualSearch.js クールで高機能な次世代検索ボックスを作成できる「VisualSearch.js」 検索ボックスというとどのサイトも<input type="text">があってCSSで修飾されていたりオートコンプリートが付いていたりするものですが、今回紹介する検索ボックスはそれらをもうちょっと進化させたものになっています。検索条件など細かくをいれてもらうような場合、フォームが巨大になってしまったりしますが、その心配はありません。１つの検索ボックスで完結します。 検索ボックスがあります 入力するとフィルタの候補が現れます Enterで補完されます 条件を入れていきます ×ボタンで条件は消せますし、条件の上でクリックすればそのままオートコンプリートが走ります 日付の指定なども検索ボックス上で完結させられます こうした検索ボックスが合わないサイトも

独自デザインselectボックス実装時に使えそうなjQueryプラグイン「EasySelectBox」 2011年06月20日- Easy Select Box | Codefleet 独自デザインselectボックス実装時に使えそうなjQueryプラグイン「EasySelectBox」 独自デザインのselectというとちょっと面倒に感じてしまいますが、簡単に独自デザインにすることができます。 IEやSafari等でも動くようクロスブラウザ設計がありがたい作りです デザインの変更は次のようなCSSスプライト画像を変更すればよいだけです 初期化も非常に簡単に行えます $('#status').easySelectBox(); 関連エントリ レイアウトに関する強力なjQueryプラグイン６つ 簡単なコードでリンク先をサムネイルプレビューできるjQueryプラグイン「jLinkPreview」

自動リサイズしつつ手動でサイズも切り替えられるテキストエリア実装jQueryプラグイン「Hycus Textarea」 2011年06月16日- Auto-growing and re-sizable textarea ? Jquery Plugin - Hycus 自動リサイズしつつ手動でサイズも切り替えられるテキストエリア実装jQueryプラグイン「Hycus Textarea」。 次のような、どんなサイトのデザインでもじゃまにならない、普通のテキストエリアの下にツマミをつけたようなテキストエリアが実装できます。 改行をうって文書が長くなろうと自動でサイズが大きくなる点も特徴。 実装は必要なライブラリを読み込んだら以下１行でOK。 対象もjQueryのセレクタで一括指定も可能。 $('#txtarea').hycustextarea(); ひょっとしてHTML5いらないんじゃないかとい

jQselectableの拡張で、しっくりきて使いやすい、控えめなマルチプルセレクト（複数選択可能なセレクトボックス）を模索中、、つまり考察だけだす おさらい ※ 仕様ではなくて、認識です セレクトボックス 一覧の中からひとつを選択させるもの（そもそも） チェックボックス 基本的には一覧である必要はなくて、複数ある項目の中から指定する項目を選択させるというもの セレクトボックスのmultiple属性 どちらもそもそもの使い方が全然違うけど、セレクトボックスにはmultiple属性があって、trueにすると（multiple属性を追加するだけやけど）、PCではShiftかCtrl(Cmd)を押しながらクリックすると複数項目が選択できる ただのmultiple select – jsdo.it – share JavaScript, HTML5 and CSS この「ShiftかCtrl(Cm

jQuery Plugins for Styling Checkbox & Radio Buttons フォーム要素をクールにするためのjQueryプラグイン集がまとまっていましたのでご紹介です。 プラグインじゃない関数ベースのものもありますが、便利に使えそうです。 未来のサイトでの多くのフォームデザインはどんな感じになっているんでしょうかね。 関連エントリ 斬新なコメントフォームデザイン集 CSSでフォームデザインをする際のチュートリアル 立体的なCSS3でデザインされた検索フォーム実装チュートリアル デザイン性に優れたクリエイティブなフォームデザインのサンプル集

Ninja UI 独特のUIを提供してくれるjQuery用のUIフレームワーク「Ninja UI」 アイコンや、ボタン、ポップアップ、レーティング、スライダーといった各種UIを提供してくれます。 UIは独特のデザインですが、それなりに汎用的に使えそうなものになっています。 他と同じUIは嫌だ、という方は使ってみるのもよいかもしれません。 関連エントリ jQuery UI のアイコンチートシート レイアウトをユーザの手によってデスクトップアプリ風に調整可能にするjQuery「UI.Layout」プラグイン selectボックス利用時に選択肢を複数選べるUIを提供してくれるjQueryプラグイン「selectList」

jQuery Smooth Animated Search Field Freebie | The Finished Box カーソルを合わせると拡大するかっこいい検索窓作成jQueryサンプル。 通常はグレーで目立たないように表示されていて、クリックするとハイライトされ検索窓が大きくなるものが実装できます。 小気味よくアニメーションする部分もいいです。 プログラム一式のダウンロードが可能なので再利用できます。 関連エントリ jQueryベースの画像スライダー３０まとめ iPhone/iPad用サイト作成時に使えるスワイプイベント実装jQueryプラグイン「TouchSwipe」 背景画像を自動リサイズしてうまくフィットさせられるjQueryプラグイン「Backstretch」