IDEA * IDEAドットインストール代表のライフハックブログ
海外で流行中のダイアログ表示をjQuery UIで (1/3)
ログインフォームや問い合わせフォームなどをWebページの遷移なしにダイアログボックスで表示する――。近頃、海外のECサイトやポータルサイ トなどでこうしたUI（ユーザーインターフェイス）を見かけます。もともと閲覧しているページの上にダイアログボックスがオーバーレイで表示されるので見栄えがよく、ページを移動せずに済むので、もとのページにすぐに戻れて便利です。 UIに特化したJavaScriptライブラリー「Query UI」を使えば比較的簡単に実装できますので、Webページ上にオーバーレイでダイアログボックスを表示する方法を紹介します。 jQuery UIのダイアログ機能を使うための準備 「jQuery UI」はjQueryのUI関連機能をまとめたライブラリー郡です。タブパネルやドラッグ＆ドロップ機能などでこれまでも何度か登場（関連記事1、関連記事2）しましたが、今回はダイアログボックスのコ
長ったらしいフォームをウィザードにして抵抗を少なくするjQueryサンプル:phpspot開発日誌
長ったらしいフォームをウィザードにして抵抗を少なくするjQueryサンプルが公開されています。 長々としたフォームは利用者が入力を躊躇してしまいますが、ウィザードにすることでその抵抗を軽減できますね。 この変換を自動で行えるjQueryのサンプルが公開されています。 図１：長いフォーム スクリプトを実行すると次のようにウィザード形式に変換できます。 図２：ウィザード形式（Step1〜Step3） チュートリアル記事になっているので、見ながら簡単に実装できます。 フォームを作成する時は、参考にしてみてもよいでしょう。 次のエントリにて具体的手法が見れます。 Turn any webform into a powerful wizard with jQuery (FormToWizard plugin)
PHPとjQueryのAjax連携の学習用チュートリアル:phpspot開発日誌
Learning jQuery: Submit form PHP Mac style Modal window | AEXT.NET PHPとjQueryのAjax連携の学習用チュートリアルが公開されています。 macスタイルのログインフォームからjQueryでAjax送信してリアルタイム認証を行うサンプルです。 それぞれ簡単なコードになっているので入門にも最適で、かつ成果物もクール。 デモページ 入門としてだけでなく、サンプルとして応用して使ってみるのもよさそうです。 関連エントリ ナビゲーションメニューを1歩進んだものに引き上げるjQueryチュートリアル集 JavaScriptのウィジェット作成や各種メニュー作成等、便利なチュートリアル集のまとめ jQueryでアコーディオン作成のチュートリアル 無限に回転するカルーセルＵＩ実現用jQueryプラグイン実装チュートリアル
[ASCII.jp] jQueryによるフォームのデザインの基礎
[ASCII.jp] jQueryによるフォームのデザインの基礎 ASCII.jpの連載「Web制作の現場で使えるjQuery UIデザイン入門」で第８回 jQueryによるフォームのデザインの基礎（前編）と第９回 jQueryによるフォームのデザインの基礎（後編）が公開されました。 フォームでのjQueryの機能や様々なＴＩＰＳを紹介しております。 なるべく実用的なサンプルを利用して、紹介しておりますので是非参考にしてください。 関連エントリー [ASCII.jp] jQueryのイベントをチュートリアルで学ぶ [ASCII.jp]サンプルで学ぶjQuery：(X)HTML/CSSを操作する [ASCII.jp]初めてのjQuery：セレクターAPIを一挙解説 [ASCII.jp] jQueryのダウンロードとインストールのチュートリアル ASCII.jpで連載開始しました「Web制作の
![[ASCII.jp] jQueryによるフォームのデザインの基礎](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9717624309e36a795026e1b70982163687ccca2/height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
成果を上げる携帯サイトのフォーム設計 (ユーザビリティ実践メモ)
離脱されない携帯サイトのフォーム作成術 携帯サイトのフォーム設計のコツ 個人プロフィールからの引用を考慮した携帯サイトフォーム設計 さて、携帯サイトのフォームの入力効率を上げる（完遂率を上げる）には、まず項目数を少なくして入力負荷を減らすことが第一です。 しかしビジネス上の要件から、項目数を減らすことにも限界があります。そこで、入力時のボタン操作など、「ユーザの操作面の負担を少なくする」ことを考えましょう。 1. 入力文字種を指定する テキストエリアの属性としてistyleを指定することで、入力文字種の「全角かな」「半角カナ」「英文字」「数字」をページ側で指定することができます。 携帯電話では文字入力モードを変更するために、2-3回（十字キーを使う場合はもっと多くなります）ボタンを押さなければなりませんので、この指定だけでもユーザの負担は大きく減ります。 ※タグや属性の詳細な仕様に関しては
都道府県選択するやつ。
メモ。 誰かの役にも立つかもしれないしってことで、いつも過去の案件のソースとか探してペタペタしてるけど、何処で使ったのか忘れたりするのでここに貼っておこう。 - コメントにて使用条件を書いてほしいとの事だったので念の為追記しておきます。 特別記載が無いエントリー以外は、どう使うのも自由です。 自分のブログにそのままソース掲載してもらっても、仕事で使ってもいいですし、あらゆる用途に対して自由に使ってください。 もちろん、改変・配布とかも自由です。 ただ、ウチで公開しているソースやサンプルに対して何らかの問題が生じても責任は負いません。各自の責任でご利用ください。 大体こんな感じです。 select要素でマークアップ済みの都道府県のやつ <select name="都道府県"> <option value="">都道府県をお選びください。</option> <optgroup label="北
スタイリッシュなフォームを作るときに見るべきエントリまとめ
Form Design フォームデザイン さてさて、最近のwebの入力フォームは本当に凝ってるところが多くて、ただただ関心するばかり。 そんなわけで今回は、焦点を『フォーム』に限定し、スタイル抜群なフォームUIを勉強してみたい。 流れ的には インスピレーションデザイン集CSSによるフォームの変更方法JavaScriptによるフォームデザインという感じでお送りいたします。 インスピレーション まずは、スタイリッシュなフォーム。 これらは、webデザイン全体がフォームデザインとなっているまとめです。 まさにバインダー。 webの入力フォームを街頭アンケート用紙のように仕上げたデザイン。かっこいい。 くしゃくしゃっとしたような紙の一部にフォームが設置されている。 こちらもメモに名前を書くかのごとく。 深海に光がさす感じのイメージ。 シンプルイズベストなレイアウト設計がなされている。 １，２，３，
テキスト内容によってtextareaを自動リサイズできるjQueryプラグイン「autoResize」:phpspot開発日誌
テキスト内容によってtextareaを自動リサイズできるjQueryプラグイン「autoResize」 2009年03月10日- jQuery plugin: ‘autoResize’ - James Padolsey テキスト内容によってtextareaを自動リサイズできるjQueryプラグイン「autoResize」 改行を入れると、textareaが自動でズイズイとアニメーションで伸張します。 「textareaのサイズを入力にあわせて調整するＪａｖａＳｃｒｉｐｔ 」というのがありましたがアニメーションできる＆jQueryプラグイン＆オプション指定可能という点があります。 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 設置サンプル 設置のサンプルです。 設置のサンプルです。 設置のサンプルです。 以下のようなオプションが指定出来ます。 ・onResize でコールバック関数を指定 ・animate
デザイナー・コーダー必見！使えるform関連jQueryプラグインの数々 | バシャログ。
こんばんは、最近ホルモン焼きにハマっているishidaです。 WEBサイト制作時、formは必ずといってもいいぐらい存在します。 お問い合わせフォームや会員登録フォームなどがすぐに思いつきますよね。 デザインをがっつりフォーム部分で作り込んでも、CSSのみでは、 実現できなかったりすることもよくあります。 そんなクセのあるformを、よりリッチに！かつ操作性を向上！できるjQueryプラグインの数々をご紹介します。 デザイナーの方は、フォームのデザインの参考に。 コーダーの方は、ページ作成時間の短縮に手助けになればと思います。 jQuery plugin: Validation フォームの入力チェック（バリデーション）が簡単にできるプラグイン。 エラーメッセージはlocalizationディレクトリ内に18言語用意されています。 日本語用は別途作成し、使用することが可能です。 jQuery
Ajax＆PHPでアニメーションするコンタクトフォームを作成するサンプル:phpspot開発日誌
Creating an Ajax contact form - from start to finish :: ENHANCE Ajax＆PHPでアニメーションするコンタクトフォームを作成するサンプル。 デモページを見る 必須入力値を入力しないとエラーになったりする機能はついているみたいだけど、入力値チェックはないみたい。 送信時にフォームが子気味よくアニメーションするため、ちょっとした訪問者への驚きや、フォームデザインに懲りたい人にはよさそう。 HTMLもクリーンなので、CSSでデザインしやすくなってます。 関連エントリ CSSでユニークなコンタクトフォームを作るチュートリアル 携帯サイトのフォーム設計ポイント CSSを使ってファンシーなボタンを作成するテクニック
AjaxMail：Ajaxを活用したフリーPHPメールフォーム
ウェブサイトを動的なページに変更したい、機能を拡張したいと思ったら、 Ajaxのツールを使って簡単に機能を拡張してみよう。 ウェブサイトを運営するとき、サイトを見たユーザーからコメントを残してもらうことがあります。 また、企業なら連絡方法としてメールの送信ができるように、メールフォームを用意していると思います。 こうしたウェブサイトのメールフォームをAjaxを使って導入することができます。
ブログが続かないわけ | 初心者プログラマーが簡単なフォームを作るときにやりがちな6つのミス
お問い合わせフォーム、登録フォーム、キャンペーンの申込フォーム。 Webにはいろいろなフォームがある。 Webプログラマーであれば誰もが一度は作ったことがあると思う。 新人プログラマーの初めての実務がフォームであることも多いだろう。 新人が作っているというのにもかかわらず、技術的にも面白い部分がないせいか、正しい知識のある人がレビューすることが少ないと思われる。 単純さゆえにテストが不足しているということもあるかもしれない。 上記の理由は憶測にすぎないが、杜撰なフォームがたくさん出回っているのは事実だ。 もう、CAPTCHAの話とか以前の問題だ。 よく見かける悪い例を簡単にあげておく。新人が初めての実務に当たるときにこれを気にしてくれれば、世の中のフォームがだいぶ良くなると思う。 1. クライアントサイド(JavaScript)でのチェックのみ。 2. 選択肢式の入力欄に対するチェックの漏
検索フォームや見出しなどエレメントのデザインを集めたサイト -Elements of Design | コリス
Elements of Designは、ブログなどのウェブサイトでよく使うエレメントのデザインを集めたサイトです。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
tomo.ac
[JS]フォームにさまざまなスタイルのデザインを適用するスクリプト -Sexy Forms
JavaScriptでHTMLフォームの劇的ビフォアアフター「Jqtransform」:phpspot開発日誌
離脱されない携帯サイトのフォーム作成術:phpspot開発日誌
ユーザーインターフェイスを設計するためのリソース集 -UI Pattern Factory | コリス
[CSS]フォームをリスト要素で並べたスタイルシートのチュートリアル