selectボックスを超カッコよくするjQueryプラグイン「Chosen」:phpspot開発日誌
Chosen - a JavaScript plugin for jQuery and Prototype - makes select boxes better selectボックスを超カッコよくするjQueryプラグイン「Chosen」 味気ないselectのデザインをゴージャスかつ多機能に変えてくれるプラグインです。 左が普通のselect。これをカスタマイズして右のイメージに。インクリメンタル検索ができるので項目数が多くてもOK タグ選択っぽいインタフェースにすることも出来ます 選択時のイメージ。カッコいい。 BootStrapライクなデザインなので組み込んでしまっても違和感ないかもですね 関連エントリ 中身が画像のselectボックスを作るjQueryプラグイン デザインがよくて複数連動可能なselectボックス作成jQueryプラグイン カッコいいselectボックスを作成でき
Formalize CSS - Teach your forms some manners!
Break the cycle of inconsistent form defaults, style forms with impunity! Feel free to ping me on Twitter A Familiar Tale We've all been there. You are nearly done with a beautiful site design, only to arrive at the task we all dread – form styling. Depending on operating system and browser, default form elements can look okay or horribly disfigured. Cargo cult adherents say that styling form ele
[JS]IEでフォームのselect要素の中身が省略されてしまうのを解消するスクリプト -ieSelectWidth
IEでフォームのselect要素にwidthを指定した際、はみ出した箇所が省略されてしまうのを解消するスクリプトを紹介します。 Internet Explorer Select Width Bug Workaround デモページ 対応ブラウザは2010年6月17日の時点でIE6, 7, 8で、スクリプトを使用すると他のブラウザ（Firefox, Chrome, Safari, Opera）と同様に省略されずに表示されるようになります。 ※IE6には別途bgiframe Pluginが必要です。 スクリプトでは他の機能として、スクリプト側でのwidth指定、margin/padding/borderの設定も可能です。 設置は簡単で、既存のフォームにも簡単に適用できます。 jquery.jsとjq.ie-select-width.jsを外部ファイルで記述し、下記のスクリプトを記述します。 J
フォーム要素にうっすらデフォルト値を入れてヒント表示できる「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"
標準のINPUTを拡張してフォーム入力を便利にする「inputEx」:phpspot開発日誌
inputEx Documentation - Examples 標準のINPUTを拡張してフォーム入力を便利にする「inputEx」。 input 入力の際に、数値Onlyや、Validate機能、色入力機能、オートコンプリートを提供して、フォーム入力をより便利にするものです。 色入力 メールアドレスバリデーション。ＵＲＬやパスワードなんかもあり 階層型のツリーデータを入力 うまく導入してフォームのユーザビリティに役立てたいですね。 関連エントリ JavaScript製のフォームバリデータライブラリいろいろ 超クールなカレンダー型日付入力補助用JSライブラリ
AjaxMail：Ajaxを活用したフリーPHPメールフォーム
ウェブサイトを動的なページに変更したい、機能を拡張したいと思ったら、 Ajaxのツールを使って簡単に機能を拡張してみよう。 ウェブサイトを運営するとき、サイトを見たユーザーからコメントを残してもらうことがあります。 また、企業なら連絡方法としてメールの送信ができるように、メールフォームを用意していると思います。 こうしたウェブサイトのメールフォームをAjaxを使って導入することができます。
ドロップダウンリストから入力補完できるインプレイスエディタ実装ライブラリ「Proto.IPS」:phpspot開発日誌
Proto.IPS :: In-place-select controls made easy Proto.IPS is a nice little widget which can be used for in place selection. ドロップダウンリストから入力補完できるインプレイスエディタ実装ライブラリ「Proto.IPS」。 テキストをクリックしてそのまま編集できる、というのはよくみますが、ドロップダウンから入力補完できるのははじめて見ました。 Prototype.jsベースで、次のようなコードで簡単に初期化して使えます。 new Proto.IPS(element, { options: [ {text: 'Available', className: 'on'}, {text: 'Free for chat', className: 'on'}, {text: 'Aw
MOONGIFT: » 入力した直後にバリデーション「LiveValidation」:オープンソースを毎日紹介
※ 画像は公式サイトデモより 人間は面白いもので、自分の好きな情報だけを見るようにフィルタリングをかけることができる。文字が見づらいコンピュータでは特にそうだ。書いてあるにも関わらず入力エラーが起こるなんて良くあることだ。 そして、それらの入力エラーはユーザにとって非常にストレスになる。自分自身、エラー画面で面倒になって止めてしまうなんてざらだ。そうした機会損失を防ぐためにもこのライブラリを使ってみよう。 今回紹介するオープンソース・ソフトウェアはLiveValidation、その場で行う入力チェックライブラリだ。 LiveValidationはJavaScriptベースの入力チェックライブラリで、特徴は何といってもその場で入力エラーをチェックできることにある。フォーム送信時にまとめてチェックすることもできる。いずれにせよエラーがあった際にはデータは送信されないのでユーザビリティは高い。
[JS]リアルタイムにテキスト入力のチェックができるライブラリ -LiveValidation
LiveValidationは、フォームに入力したテキストをリアルタイムにチェックし、認証やエラーを表示できるライブラリです。 LiveValidation デモページでは、数字やテキストのチェックから、パスワードやメールアドレスなど、たくさんの実用的なデモがありました。 デモ ページ スクリプトは、スタンドアローン版とPrototype.js版の2種類で配布されており、自分もそうしよう、と思いました。
MOONGIFT: » フォームで便利なJavaScriptライブラリ「WebForms2」:オープンソースを毎日紹介
会員登録や商品購入など、ブラウザ上で入力を行う機会は数多い。だが、その入力がとても簡単かと言われるとそうでもない事が数多い。入力エラーがある度に戻ったり、エラーと入力欄が離れていて分かりづらいといった経験はないだろうか。 そこでJavaScriptライブラリを使ってみよう。JavaScript最大の欠点とも思える、ブラウザ互換性もきっちり確保されている。 今回紹介するオープンソース・ソフトウェアはWebForms2、クロスブラウザに対応したフォーム向けJavaScriptライブラリだ。 WebForms2はフォームの入力チェックや、ボタンによる追加入力など、便利な機能をJavaScriptで提供している。各行に対して削除ボタンをつける事で、ユーザビリティの高い画面が構成できるようになる。ダイナミックに追加入力させる際には最低/最大数も指定可能だ。他にも画像読み込み中の判定もできる。 そして
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
リアルタイムフォームバリデーション jQuery.validation.js :: 5509
selectボックスをシンプルなプルダウンに拡張するjQuery.selectable.js :: 5509
http://youmos.com/news/jsvalidate