memo.xight.org

日々のメモ

Realtime validation - 入力値を動的にチェックするライブラリ

Posted on | Tagged : ,

Screen shot

左から 未入力時, 異常値入力時, 正常値入力時．
クリックして拡大クリックして拡大クリックして拡大

Usage

prototype.js とvalidate.js を自分のHTMLに読み込んで
下記の様に正規表現で表示するメッセージを指定するだけで利用可能．

Source - JavaScript

Validator.register({
	"#mail" : {
	"/^([^@\\s]+)@((?:[-a-z0-9]+\\.)+[a-z]{2,})$/": "OK",
	"/^$/": "必ず入力してください",
	"/.*/": "正しいメールアドレスを入力してください" 
	}
});


Source - HTML

<input name="mail" id="mail"/><span id="mail_msg"></span>


Reference

masuidrive - Realtime validation using Ajax
http://masuidrive.jp/validation/

via

masuidrive - 2006-01-05 - Realtime validation using Ajax
http://blog.masuidrive.jp/articles/2006/01/05/validation

Effect.Transitions - script.aculo.usのEffectの変化曲線を変更する

Posted on | Tagged : ,

Summary

effect.jsに以下の記述がある．
これはEffectの変化曲線を設定している．
デフォルトの変化曲線はsinカーブと同じ．

Effect.Transitions.sinoidal = function(pos) {
	return (-Math.cos(pos * Math.PI) / 2) + 0.5;
}


Effectのコンストラクタでオプションにtransitionをセットすることで，
変化曲線を変更可能．
new Effect.Move( 'elementId', {
		x: 100,
		y: 100,
		transition : function ( pos ) {
		return Math.pow( pos, 2 );
	}
});


Sample

Sample

Reference

d.aql - scriptaculousのトランジション
http://d.hatena.ne.jp/aql/20051123/1132725850

Lightbox JS - Web2.0ライクな画像サムネイル生成

Posted on | Tagged :

Summary

百聞は一見にしかず!
このメモと 情報視覚化 のページでさっそく利用してみた．

How to use

1. lightbox.js を <head>内に記述．
<script type="text/javascript" src="lightbox.js"></script>


2. <a>タグに rel="lightbox" をつける．
<a href="path/to/image.jpg" rel="lightbox">
  <img src="path/to/image-thumbnail.jpg" />
</a>


Reference

Lightbox JS
http://www.huddletogether.com/projects/lightbox/

via

OpenStratus Archive - 2006-01-02
http://openstratus.com/article/52/lightboxjs-web20/