jQuery ColorBox を フォーム入力用にカスタマイズした Ex Colorbox Form - Cyokodog :: Diary
更新履歴 2011-10-20 Ver 0.1.3 Ver 0.1.2の fastIframe パラメータ関連の不具合を修正しました。fastIframe パラメータ未定義の旧 colorbox にも対応してます。 2011-10-13 Ver 0.1.2 ColorBox1.3.18に対応しました。 2011-10-08 Ver 0.1.1 jQuery1.6.4に対応しました。 LightBox 系プラグイン の中でも人気の高い jQuery ColorBox をフォームの入力画面用にカスタマイズしてみました。仕事柄、画像の表示を主目的とする LightBox 系のプラグインを使用することはあまりないのですが、iframe に対応してるものも多く、登録系の画面が主となる業務アプリでも使えそうだなぁと思い ColorBox をベースにちょっと作ってみました。（ちなみにオリジナル の co
フォーム周りに使えるjQueryプラグイン50 – creamu
フォームをより使いやすくしたい。 そんなときに使えそうなのが、『50 jQuery Plugins for Form Functionality, Validation, Security and Customisation』。フォーム周りに使えるjQueryプラグイン集です。 バリデータやアップローダ、パスワードの安全性チェックなど、いろいろありますね。 jQuery “Highlight” Plugin フォーカスが当たっているフォームに背景画像を敷いて、ハイライトしてくれるプラグイン Autotab: jQuery Auto-Tabbing and Filtering 電話番号などのinputで、自動で次のinputにカーソルを移動してくれる jQuery NobleCount Twitterのような、あと何文字入力できる、を表示してくれる「jQuery NobleCount」 AJ
jQueryによるフォームのデザインの基礎（後編） (1/5)
（前編からの続き） 3.フォーム部品を選択するセレクター jQueryには、フォーム部品を選択する専用のフィルター（セレクターの一種）が多数あります。専用フィルターで選択できる要素は、ほとんどの場合、以前に紹介したjQueryのCSSセレクターでも選択できますが、専用フィルターを使うとより簡単です。 ■フォーム部品を選択する:input :inputは、input要素やtextarea要素、select要素、button要素など、すべてのフォーム部品を選択できるフィルターです。 次のサンプルは、いずれかのフォーム部品がフォーカスされると、フォーカスされた要素の背景色をcss()で変更します。フォーカスが外れると、再びcss()で背景色を元の色（初期値）に戻します。背景色に限らず、CSSを初期値に戻すきには、css("background",""); のように、値を設定せずにプロパティ名だけ
[JS]フォームの入力欄にラベルをくっきりうっすら表示するスクリプト
フォームの入力欄にラベルを通常時にくっきり、フォーカス時にうっすらとアニメーションで表示するスクリプトを紹介します。 jQuery FormLabels Plugin デモページ スクリプトの特徴 クロスブラウザ対応。 ラベルをアニメーションで表示。 多数のオプションと旧式ブラウザへの配慮。 フォームのマークアップを変更しないシンプルさ。 フォームのラベルはinput要素と同じスタイルが可能。 パスワードのラベルはアスタリスク（*）ではなく、テキストで表示。 スクリプトのデモ デモページではいくつかのデモがありますが、デフォルト版のものをキャプチャで紹介します。 デモページ 入力時には入力したテキストが反映されます。 スクリプトの仕様 以下のフォームの要素に対応しています。 input[type='text'] input[type='email'] input[type='passwor
[jQuery]フォームのテキストフィールドに入力例を入れておき、フォーカスと同時に消す « kawama.jp
こういうやつです。 コードはこれだけ。かなりシンプルです。 $(function(){ $('input').focus(function(){ $(this).val('').css("color","#000");; }); }); 参考にした例。 http://gihyo.jp/design/serial/01/jquery-site-production/0009?page=1 http://h2ham.seesaa.net/article/103945151.html http://txqz.net/blog/2009/05/16/2312 プラグインもありました。 http://phpspot.org/blog/archives/2009/04/toggleval.html ツール amazon商品情報ビューワー amazon商品画像ビューワー HTMLエンコード・デコード U
どんなフォームにも使えるjQueryのフォームバリデーション exValidation :: 5509
jquery.validation.jsというフォームバリデーションプラグインを公開していますが、使える場面が割と限定されてしまうような作りだったので、より幅広く使えるようにexValidationという名前で新しいjQueryプラグインとして作り直しました。伴って仕様や使い方が異なる部分も多いので、ドキュメントとして書いておきます。ただし前半のバリデーションルール周りは同じエンジンを使ってるので、ほぼ同じです。ちなみにすごい長いです。。 ルールを割り当てる際のclass名がhogeからchkhogeに代わりました。アップデートして使う場合は注意してください。 サンプル1: エラーを右上に表示 サンプル2: エラーを下に表示 トピックス ダウンロード 使い方 1. JSファイルを読み込む 2. 基本バリデーションルール 3. select, checkbox、radio、複数項目の場合 4
CSS3とjQueryでフォームを美しく装飾する方法
2014年8月22日 CSS, jQuery どんなWebサイトでも設置されているフォーム。なんの装飾もなく味気ないフォームより、デザインされたもののほうが連絡してみたくなるはずです！そんなフォームも少し手を加えるだけで素敵なデザインに変身させることができます。今回はCSS3とjQueryを使ってより美しいフォームを作成する方法を紹介します。 ↑私が10年以上利用している会計ソフト！ フォームの仕様 今回チャレンジするフォームの主な仕様です！ グラデーション・ボックスシャドウを使って立体感を表現 角丸で丸みをつける（モダンブラウザ） 対応ブラウザ: IE7△, IE8△, IE9, Firefox, Chrome, Safari フォーム制作の流れ CSS3ってなんだ？という人もひとつひとつ記述していけば意外と簡単に作れるはずです！リンクをクリックで各項目にジャンプします。 テキストボック
今日から現場で使えるjQueryのフォーム関連プラグイン15選
Webサイト制作で欠かせないのがフォーム。 これらは購入時や、お問い合わせ、ログインと言ったパーツで良く使われます。 今回はそんなフォームにスポットを当てて、なるべく使いやすく、導入しやすいものをご紹介いたします。 ただし、あくまでもjQueryプラグインのご紹介なので、よくわからないと言う方は華麗にスルーしてください。細かい導入方法までは説明しません。 機能性重視プラグイン In-Field Labels jQuery Plugin フォームの中に入っている文字がオンクリックでうっすらと消えていくプラグイン。 なかなかいい感じ。 Create a Progress Bar With Javascript | Nettuts+ demo シームレスにフォームの内容を変え、さらにどれくらい進んでいるかが％で確認できる。 overset - jVal - jQuery Form Field V
[JS]フォームの入力欄にテキストを表示するスクリプト -Textbox Hinter
設置も簡単、カスタマイズも容易、フォームのテキストボックスとテキストエリアにテキストを表示するスクリプトを紹介します。 表示するテキストにはclassを付与できます（Demo 3参照）。 jQuery Textbox Hinter Plugin デモページ 主な特長 シンプルで軽量 スクリプトの知識は不要 表示するテキストにclassを付与できる textareaにもテキスト表示が可 クロスブラウザ対応 カスタマイズが簡単 デモと実装方法 実装は簡単で、フォームの各パーツに任意のclassを与え、テキストはJavaScriptに記述します。
HTML5で作られたフォームの入力チェックができる「jQuery Tools」 | Web活メモ帳
HTML5になってFormの要素が大幅に増えました。inputのtype属性にtel、url、emailなどの値が指定できたり必須属性を設定できたりするので、使いこなせれば便利になりますね。 しかし複雑なチェックやエラー表示のデザインを変更するにはJavaScriptを使う必要があります。 「jQuery Tools」を使う事で簡単に解決する事が可能になってます。 基本的なチェックは1行コードを追加するだけでできるようになるようです。 $("#myform").validator(); エラーメッセージのカスタマイズはCSSで実装できるとの事 /* error message */ .error { height:15px; background-color:#FFFE36; border:1px solid #E1E16D; font-size:11px; color:#000; pad
あなたのWebを入力しやすくするjQueryプラグイン10選
あなたのWebを入力しやすくするjQueryプラグイン10選：CSSの書き方も分かるjQueryプラグイン実践活用法（終）（1/5 ページ） jQueryと、そのプラグインの使い方を、UI効果（エフェクト）のテーマごとに紹介する連載。jQuery/JavaScript/HTMLコードだけではなく、CSSの書き方も解説することで、より実践的にjQueryプラグインを使うための参考ドキュメントになることを目指しています。 前回の「画像や動画を綺麗に回転/拡大するjQueryプラグイン」では、イメージを回転させたりズームインする「jCarousel」「Zoombox」プラグインの使い方を解説しました。今回は、フォームを使いやすくするための各種プラグインを、以下のようにチェックボックス／ラジオボタン、ドロップダウンリスト、テキストボックス／テキストエリア、フォームのカテゴリ別に分類して紹介します。
プルダウンで都道府県などを入力(選択)するイライラを解消するPrefSupport.js :: 5509
※) prefSupport内のoptgroupの使い方は間違っています。すいません。 修正版はjQuery.selectable.jsとして書き直しました。jQuery.selectable.jsをごらんください。 イライラ解消シリーズ第2弾(これは続きそう)。 先日のDateSupport.jsに続いて今度はselect拡張を。 要jQuery(古いの 1.1.2あたりの で動くかは微妙)。。用途は主に都道府県選択かなぁ。。 都道府県選択のプルダウンはとにかくうざい、消えてほしい。 そもそも項目多いくせにoptgroup要素がないプルダウンが多すぎる！選びにくいわ！→登録断念。 そんな僕の要望に応えるためにプルダウンのうざいスクロールをなんとかするためのもの。 ついでにoptgroupをもっと使うようになってほしい。 単純に作るだけやとアレなので今回のポイントはもともとあるselect
jQueryでフォームのラベルをウォーターマーク的にオシャレ表示
twitter facebook hatena google pocket フォームに何を入力していいかうっすら表示するウォーターマークをたまに見ます。 これによりユーザビリティの向上が図れます。 このウォーターマークをオシャレに表示するjQueryプラグインSliding Labels jQuery Pluginを紹介します。 sponsors 使用方法 Sliding Labels jQuery Pluginからjquery.slidinglabels.jsをjQueryからjquery.jsをダウンロードします。 また以下のようなフォームがあったとします。 <form id="contactform"> <div class="slider"> <label for="name">お名前</label> <input type="text" id="name" name="name"
JavaScriptでiPhoneライクなフォームを作成 via「iPhone Style Radio and Checkbox Switches using JQuery and CSS」
twitter facebook hatena google pocket 世の中にiPhoneが溢れ返る時代だから、PCのフォームもiPhoneライクにしてみませんか。 iPhone Style Radio and Checkbox Switches using JQuery & CSS | DevGrowで紹介されているチュートリアルでラジオとチェックボックスをiPhoneぽくしてみましょう。 sponsors 使用方法 iPhone Style Radio and Checkbox Switches using JQuery & CSS | DevGrowからファイルをダウンロードします。 使うのはjQueryとswitch.gifです。 まずはhtmlを以下のように記述します。 <p class="field switch"> <input type="radio" id="rad
jQueryでcheckboxがcheckされてるかの値をとる - Webtech Walker
checkboxがcheckされてるかどうかを判別するメソッドってjQuery側に用意されてないんですよね。 twitterでも色々教えてもらったけど方法としては3つくらいかなー。 https://twitter.com/kyo_ago/status/11685019866 https://twitter.com/songmu/status/11675950113 https://twitter.com/rea/status/11675545507 素のHTMLエレメントから取得 var checked = $('#elem').get(0).checked; せっかくjQuery使ってるのにという感じがいなめない。。これはないかな。 is()で取得 var checked = $('#elem').is(':checked'); これが一番直感的ではある。これでいいっちゃいい気もする。
簡単にフォームの入力チェックが行えるjquery.validate.js-JavaScript Library Archive
簡単にフォームの入力チェックが行えるjquery.validate.js Check Tweet 配布元：bassistance.de » jQuery plugin: Validation ライセンス：MIT/GPL jquery.validate.jsは入力フォームのバリデーション（チェック）を簡単に実装することが出来るjQueryプラグインです。 利用方法 利用方法はまず、jQuery本体と配布元よりダウンロードしてきた「jquery.curvycorners.min.js」をhead要素などで読み込みます。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.validate.min.js"></script> バリデーションを行いたい
Ajax » jQuery plugin » フォーム要素のカスタマイズ | PHP & JavaScript Room
PHP、JavaScript、CSS、Webページ埋め込みによる音声・動画配信方法など、実用的なプログラミング・テクニックを解説アイコン入りのプルダウンメニューを作成するjQueryプラグイン。 jQueryで、select要素とoption要素をdiv要素に変換し、Option要素内にアイコンを表示しています。 メニューをクリックすると、メニューをアニメーションしながら開閉します。 選択すると、通常のプルダウンメニュー同様、選択した項目のテキストがメニュー部分に表示されます。 メニュー部分に表示するテキストはselect要素のtitle属性に指定します。 アイコン画像のURLはoption要素のtitle属性に指定します。 設置サンプルサンプルを見る<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.designwalker.com/2010/06/jquery-forms.html
http://www.csskarma.com/blog/sliding-labels-v2/
http://japan.internet.com/developer/20091229/26.html