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の良い点は、入力チェックがブラウザ上で行われ、かつそのエラー内容が入力項目の横にフローティングで表示される所だ。吹き出し風になっており、非
Spookies Labs Blog | シンプルな日付選択用ライブラリ「protocalendar.js」を公開しました
prototype.js ベースの日付選択用 javascript ライブラリ「protocalendar.js」を公開しました。 rails や cakephp でアプリケーションを作っていて、セレクトタグでは日付を選択し辛いと感じていました。 また、オープンソースの Date Picker ライブラリでは機能不足、もしくはオーバースペック過ぎて手頃なものがないと感じていました。 そこで、社内で prototype.js ベースの日付選択用ライブラリを作ってみようということになり作ってみました。 今後もバージョンアップしていきたいと考えているので、ご意見ご要望などありましたらコメントでお願いします。 【特徴】 *prototype.js ベース（1.5 以降）。 *シンプルで軽量。 *MIT LICNESE *16のローカライゼーションに対応。 *フォーカスでカレンダー表示。（
JavaScriptでリアルタイム値チェックを簡単に行える「LiveValidation」:phpspot開発日誌
LiveValidation - Validation as you type Lets face it, forms are boring, validation is a pain. It’s time to inject some life into them, make them fun again... JavaScriptでリアルタイム値チェックを簡単に行える「LiveValidation」。 このライブラリを使ってできることは、examples にまとまっています。 数字、長さ、メールかどうかなど、値チェックに必要なものは殆どそろっているので簡単に実装できます。 コードは次のようにオブジェクト指向で非常にシンプル。 var sayHello = new LiveValidation( "sayHello", { validMessage: "Hey there!" } );
超便利で使えるprototype.jsベースJavaScriptウィジェットライブラリまとめサイト「Script.aculo.us Samplr」:phpspot開発日誌
超便利で使えるprototype.jsベースJavaScriptウィジェットライブラリまとめサイト「Script.aculo.us Samplr」 2007年09月04日- Script.aculo.us Samplr Script.aculo.us is a cool library for effects. 超便利で使えるprototype.jsベースJavaScriptウィジェットライブラリまとめサイト「Script.aculo.us Samplr」。 script.aculo.usを駆使した使えそうなウィジェットが多数公開されています。 Cash Register - 料金表示をアニメーション表示 Div Swap - DIV 部分をスライド風に切り替え iPhoto Resize - スライダーで写真リサイズ News Ticker - ニュースティッカー Select box
画像の映り込みエフェクトを実現するJavaScriptライブラリ「reflex.js」:phpspot開発日誌
reflex.js (with IE 6/7 support) reflex.js 1.1 allows you to add a Cover Flow effect (including reflection) to images on your webpages. 画像の映り込みエフェクトを実現するJavaScriptライブラリ「reflex.js」 次のような画像の映り込みエフェクトを付けることができます。 使い方は、必要なライブラリを読み込んで class を付与するだけのようです。 他にもいろいろあります。 Corner.js - 角丸効果や、シャドウ効果を画像に与える Glossy.js - 画像にガラス風の光沢を与える Instant.js - インスタントカメラ風エフェクトを与える Slided.js - スライドのフレーム風にエフェクトを与える Filmed.js - 映
iandeth. - jQuery JSONP plugin
iandeth. Perl, Flash ActionScript, MySQL, Movable Type, システム開発 - そんなテーマのサイトdeth. 最近遅ればせながらjQueryを使い始めてみているのですが、jQueryは標準ではクロスドメインのJSONPリクエストに対応していないようでした。AJAX系APIの中には $.getScript() のようにレスポンスをjavascriptソースとして実行するものもありますが、あくまで同一ドメイン内通信に限定されているので、「JSONP対応のWebサービスからデータを直接取得」のような用途には使えません。 じゃあ、ということで随分前 (2006-01-25) にMichael Geary氏がJSONP用のjQueryプラグインをさくっと作って公開してくれています: JSON for jQuery - mt.to これでとりあえずは
Yet Another Dynamic Presentation!
地道な高速化 1 // style も new 時にプロパティにいれておく s6.Constructor = function(element) { this.element = element; this.style = element.style; }; 地道な高速化 2 // コールバックを受ける関数では this // や引数を受けるようにしとく s6.hoge = function() { var shift = Array.prototype.shift; // ↓ Opera ではバグるので回避しなきゃダメ var f = shift.apply(arguments); f.apply(shift.apply(arguments), arguments); }; DOM の空きプロパティ // DOM の要素の空きプロパティの // アクセス速度は普通のハッシュとほとんど変
AJAXとCSSで作られたシンプルで見やすいプログレスバー「Ajax Progress Bar」
操作感はAJAXで、画像などはCSSで実装されたわかりやすいプログレスバーです。進捗状況などの表示が簡単にできます。また、クリックする度に10％増やしたり、あるいは減らしたりといったことも可能。いろいろなウェブアプリの開発などに応用できそうです。 詳細は以下から。 WebAppers Simple Ajax Progress Bar with CSS by WebAppers ライセンスはMITライセンスで提供されており、以下から実際に試してみることができます。 Demo http://www.webappers.com/progressBar/ 実際にダウンロードしてみると、prototype.jsを使っており、使用するイメージ画像は2種類。その組み合わせでバーの増減を表現するとは、なかなかいい発想。
Glossy.js (now with IE 6/7 support)
Initialisation class "glossy" vary the radius by adding iradius followed by the desired radius in percent of half of the smaller picture dimension: Corner radius class "iradius25" - min=20 max=50 default=25 vary the shadow by adding noshadow: Noshadow class "noshadow" - default=false vary the background by adding ibgcolor followed by the desired color as hex: Background color class "ibgcolor" - mi
ブロックレベル要素の高さを揃えるheightLine.js[to-R]
ブロックレベル要素の高さを揃えるheightLine.js Web標準の日々のグループディスカッションで出たライブラリ案を作っていく企画、第一弾。 ブロックレベル要素の高さを揃えるjsライブラリを作ってみました。 このライブラリは新バージョンがあります。 レスポンシブWebデザインに対応した「jquery.heightLine.js」 CSSでは複数のブロックレベル要素の高さを揃えれないという問題があります。 このheightLine.jsは、複数のブロックレベル要素の高さを揃える事ができ、2カラムレイアウトや3カラムレイアウトのそれぞれのカラムの高さを揃えたり、複数のブロックレベル要素をfloatで配置する際の高さを揃えたりできる、便利なライブラリになります。 設置方法 head要素内にダウンロードしたheightLine.jsを読み込みます。 <script type="text/ja
![ブロックレベル要素の高さを揃えるheightLine.js[to-R]](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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
バックナンバー – おくvillage
[JS]jQueryのプラグイン33+1選 -2007年9月 | コリス
http://youmos.com/news/prototype_portal_class
CSSデザインで綺麗なボタンを作成する （How to make sexy buttons with CSS） - youmos