カスタマイズ性に優れた、フォームのエラー箇所にツールチップをふわりとアニメーションで表示するスクリプトを紹介します。 Ketchup Ketchupは既存のフォームにも簡単に導入が可能で、マークアップの変更やツールチップのデザイン変更も簡単に行えます。 また、エラー判定も多彩な項目で設定が可能です。 入力の有無 最大・最小文字数 最大・最小数値 メールアドレスのチェック urlのチェック 日付のチェック ユーザーネーム（a-z0-9_-）のチェック など これらの判定は組み合わせて使用することも可能です。 設置方法は、スクリプトとスタイルシートを外部ファイルとして記述し、各フィールドに下記のように追加します。 HTML（変更前）
SitePoint: New Articles, Fresh Thinking for Web Developers and Designers HTMLやCSSを記述する際にもっとも気になるのが、使おうとしている機能が開発に使っている以外のブラウザでサポートされているかどうか、また、意図どおりに機能するかどうかだ。テストフェーズでまとめてチェックする方法もあるが、複数のバージョンが混在する現状では、テストフェーズまでチェックを引き伸ばせば引き伸ばすほど、後からブラウザ互換性を確保する作業が困難なものになる。 開発段階でブラウザごとの互換性やサポート状況をチェックしリスクを回避するために役に立つリファレンスマニュアルにSitePointが提供しているSitePointリファレンスシリーズがある。CSS、HTML、JavaScript版が提供されており、特にCSSとHTMLのリファレンスマニ
Roundabout is a jQuery plugin that converts a structure of static HTML elements into a highly customizable turntable-like interactive area. (And now, not just turntables, but many shapes!) In its simplest configuration, Roundabout works with ordered- and unordered-lists, however after some quick configuration, Roundabout can work with an set of nested elements. Requirements & Add-Ons Requires jQue
今回はjQueryを使って、「問い合わせフォーム」にバリデーション（検証）機能を付ける方法を解説します。入力漏れや入力ミスがないか、サーバーへ送信する前に、クライアント側であらかじめ簡易的な検証を済ませることで、フォームのユーザビリティを高められます。今回のサンプルでは特に、入力漏れやミスのあった項目を分かりやすくユーザーに示すように工夫しています。 バリデーションルールをclass属性で設定 「問い合わせフォーム」のサンプルとして、以下のようなWebページを作成します。バリデーション機能としては、必須項目の「お名前」「性別」「どこでこのサイトを知りましたか？」「お問い合わせ内容」が入力されているか、「郵便番号」が数値で入力されているか、「メールアドレス」がメールアドレスの書式になっているか、「メールアドレス」と「メールアドレス（確認）」に入力されたテキストが同じか――をチェックします。
DIV要素をクロスフェード このところバタバタしておりまして…。ストックネタという訳でもないんですが、今回はかなり定番の結構便利なスクリプトを紹介してみます。 「Flashを使うまでもないんだけど、ちょっとした演出が欲しい…」という時などにはうってつけです。 「Brand Spanking New」で紹介されている「Crossfader.js」というスクリプトです。ご存知の方も多いかもしれないですね。 このスクリプトの優れている所は、画像ではなくDIV要素に対してクロスフェードさせられるトコロです。…なので、使い方を工夫すれば、いろいろと凝ったアプローチができると思います。しかも、設置は至って簡単！使わない手はないでしょう。 とりあえず、サンプルです。 ↑このデータはこちらからダウンロードできます。 だいたいはソースを見てもらえば分かると思いますが、 クロスフェードさせたい項目ごとに<di
[PHP, JAVASCRIPT] フレームを使わずに、別ファイルをページ内に読み込む方法2種 Pocket Tweet サイト制作をする上で、たまに必要となってくる別ページの読み込み。これにはいくつか方法があって、一番手っ取り早いのがiframeによる読み込み。けどこれって縦幅の調整に困る上にあまりスタイリッシュじゃない（Javascriptを使って高さを自動調整する事もできますが）。そんなわけでページ内にインクルードしたいと思った時に使える2つの手法を紹介します。というか最近仕事で必要だったので、せっかく作ったんだからその備忘録みたいな感じ。 JAVASCRIPTを使って別HTMLをページ内に読み込む まずはJavascriptを使って読み込む方法。多分これが簡単。JSライブラリにはjQueryを使用するので、jQuery導入済みのサイトであればさらに簡単です。リンク先で配布されている
カスタマイズが可能な、一つのリスト要素で実装する画像ギャラリーのスクリプト「slideViewerPro」を紹介します。 slideViewerPro 上記のキャプチャはslideViewerProの元となるslideViewerのもので、直系の子孫にあたるとのことです。 画像の箇所は、一つのリスト要素で構成されています。 HTML <textarea name="code" class="html" cols="60" rows="5"> <div id="my-folio-of-works" class="svwp"> <ul> <li><img alt="Meander - P.J. Onori" src="images/01.jpg" /></li> <li><img alt="Flock and Predator - L. Ongaro" src="images/02.jpg"
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
