第17回 「その場編集」を実装する | gihyo.jp
「その場編集」を実装 前回はツールチップの実装方法をご紹介しました。 今回「Edit In Place」や「その場編集」と呼ばれる、テキストをクリックすると、その場で編集できるようにする仕組みを実装してみます。 今回の仕組みを考える この「その場編集」の仕組みを考えてみましょう。今回の要件は以下の通りにします。 最初はただのテキスト クリックをすると、テキストがinput要素に置き換わり編集可能に。 input要素からフォーカスが外れたら、input要素が編集後の文字に置き換わる。 フォーカス外れた時、valueの値が空なら最初の値に戻す。 本来であれば、上記の仕組みの４の後に、PHPなどでデータベースに編集後の情報を送信し、保存するという仕組みになるのですが、今回はその前のところまでの実装方法のご紹介とします。 まずは完成サンプルとソースコードを見てみましょう。 完成ソースコード jQu
フォーム要素にうっすらデフォルト値を入れてヒント表示できる「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"
MOONGIFT: » jQueryでその場で入力チェックを行う「jQuery Inline Form Validation Engine」:オープンソースを毎日紹介
入力された値の検証は最終的にサーバ側で行わなければ意味がない。が、ユーザビリティを考えるとブラウザ上でチェックし、通知できれば便利に違いない。問題はそうしたチェック機能を実装するのが手間だと言うことだ。 jQueryを使ってWebブラウザ上で入力チェック 動的なフォーム生成でも柔軟に対応できるくらいシンプルな入力チェックライブラリがjQuery Inline Form Validation Engineだ。 今回紹介するオープンソース・ソフトウェアはjQuery Inline Form Validation Engine、jQueryプラグインで提供される入力チェックライブラリだ。 jQuery Inline Form Validation Engineの良い点は、入力チェックがブラウザ上で行われ、かつそのエラー内容が入力項目の横にフローティングで表示される所だ。吹き出し風になっており、非
入力ボックスでクリックすると消えるデフォルト値を簡単実装「ToggleVal」:phpspot開発日誌
ToggleVal :: jQuery Plugins by Aaron Kuzemchak 入力ボックスでクリックすると消えるデフォルト値を簡単実装「ToggleVal」。 入力ボックスにデフォルトでヒント値を入れておいてクリックすると消えるあの分かりやすいインタフェース。 実際に実装するとなると、ちょっと面倒ですが、ToggleValを使えば、メソッドを1回呼び出すだけで簡単に実装できます ↓↓↓↓クリックで消える↓↓↓↓ jQueryプラグインなので、以下のように使いやすくなっています。 $("input[name='name']").toggleVal( { option } ); 実装したくなった時、ちょっと面倒でまた今度、とならないようにこれを覚えておけばよさそう。
フォームの入力項目にうっすらテキストを表示するJavaScript「jQuery Watermark Plugin」
twitter facebook hatena google pocket フォームなどでよく、デフォルトでテキストが表示されている場合があります。 何を入力すれば良いのかを示しことができるので、ユーザービリティ上有意義な方法です。 jQuery Watermark PluginはjQueryベースでこれが可能です。 sponsors 使用方法 jQuery Watermark Pluginからjquery.updnWatermark.jsを、jQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.updnWatermark.js"></script> <script type=
フォームデザインを完成させるjQuery plugin「jqtransform」
今まで様々なjQueryを使ったプラグインを紹介してきましたが、今日紹介する「jqtransform」は今まで紹介した物と少し違っていて、フォームのデザイン補助してくれると言うものです。 CSSなどでデザインせず、普通にフォームを制作した場合上記のように利用OSに準拠したプルダウンメニューやボタンなどが表示されます。このプラグインを使えば上機能なありきたりなフォームデザインを施す事が可能です。変更後のデザインは以下の通り 詳しくは以下 デザインだけでなくプルダウンもアニメーションがついていたりと細かな部分も配慮されています。実装方法は簡単、jQueryとプラグインを読み込んで、フォームにクラス指定をしてあげるだけになっています。デザインはCSSで制御しているみたいなので、個別のカスタマイズできるようになっていますので、使い勝手が良いかと思います。これならDemoで表示されているデザインが気
リロードせずにファイルアップロードができるフォームを作る『Ajax file upload with jquery』 - Recently Ajax
ユーザーが画像をアップロードできるフォームなどで、「参照」ボタンのあるフォームコントロールを使うことはよくあります。 しかし、なかなか見栄え良くならない上に、アップロードのためにフォームを送信しなければならず、いまいち素敵なフォームになりません。 そこで、「Ajax file upload with jquery」を使えば、素敵なアップロードページを作ることができます。 ライブラリを利用すると、大きなボタンが表示され、クリックするといつも通りファイル指定ダイアログが表示されます。 ファイルを選択すると、画面がリロードすることなくボタン上でアニメーションが展開されます。 利用には jQuery 1.2が必要だとか。素敵ですね。 Ajax file upload with jquery - valums.com
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
ライブドアブログ｜無料で豊富な機能が充実