[B! form][jquery] bascinetのブックマーク

[JS]フォームのselect要素をHTMLの変更無しで、ミニマルに美しく使いやすくするスクリプト -Minimalect

フォームのselect要素をHTMLには手を加えずに、美しいミニマルなデザインを適用し、使いやすさもアップさせるjQueryのプラグインを紹介します。デザインのテーマも用意されており、オリジナルのテーマをスタイルシートベースでつくることもできます。 Minimalect Minimalectの特徴 Minimalectのデモ Minimalectの使い方 Minimalectの特徴 select要素を洗練されたデザインに置き換えます。 optgroupsのサポート。フィルタリングのサポート。キーボードナビゲーション。テーマのサポート。 Minimalectのデモ HTMLの変更は無しで、select要素を美しく、そして使いやすくしたデモがあります。まずは、一つ目。

bascinet 2013/06/05

リンク

チェックボックスやinput要素などのフォーム周りのユーザビリティを少しだけ向上できる地味に便利なjQueryコードいくつか - かちびと.net

フォームで利用するjQueryのスニペットコードをいくつか。どれも既出だと思うのでおさらいという事で。とはいえ、所詮はスニペットですので実際に導入する際は動作をしっかりと検証する事を強く推奨します。フォーム周りのjQueryスニペットです。自分用のメモも兼ねて。フォーム関係は色々面倒なので参考にならない事もあるかと思います。「ふーん」程度にご覧頂くと丁度いいと思います。 Placeholder属性を、非対応ブラウザでは表示/非表示に便利なHTML5のPlaceholder属性をオールドブラウザでは表示/非表示として対応します。 if(!$.support.placeholder) { var active = document.activeElement; $(':text').focus(function () { if ($(this).attr('placeholde

bascinet 2012/07/04

リンク

次世代の検索フォームを作成するjQuery＆CSS3サンプル:phpspot開発日誌

Creating “Next Level” Search Form Using jQuery & CSS3 ? Webstuffshare ? Learn and share. The simplest harmony. 次世代の検索フォームを作成するjQuery＆CSS3サンプル。 CSS3をフルに使って、面白い検索フォームを作るチュートリアルです。アイデアの応用で面白いインタフェースが作れそうですボタンがあってクリックするとアニメーションしながら伸びて検索フォームになりますボタンをクリックすると立体的にキューブっぽく回転して検索入力ボックスが現れますこれを見ると、ああなんかまた色々と出来て数年後にはどうなっていっちゃうんだろう、ついていけるんだろうかなという不安すら覚えてしまいますね。関連エントリページめくりを実現するためのjQueryプラグイン集高機能なカルーセルを実装

bascinet 2012/02/10

リンク

[JS]フォームの入力欄にラベルをくっきりうっすら表示するスクリプト

フォームの入力欄にラベルを通常時にくっきり、フォーカス時にうっすらとアニメーションで表示するスクリプトを紹介します。 jQuery FormLabels Plugin デモページスクリプトの特徴クロスブラウザ対応。ラベルをアニメーションで表示。多数のオプションと旧式ブラウザへの配慮。フォームのマークアップを変更しないシンプルさ。フォームのラベルはinput要素と同じスタイルが可能。パスワードのラベルはアスタリスク（*）ではなく、テキストで表示。スクリプトのデモデモページではいくつかのデモがありますが、デフォルト版のものをキャプチャで紹介します。デモページ入力時には入力したテキストが反映されます。スクリプトの仕様以下のフォームの要素に対応しています。 input[type='text'] input[type='em ail'] input[type='passwor

bascinet 2010/07/09

リンク