memo.xight.org


2006-01-06 Fri

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

- 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

カテゴリ: [JavaScript][Ajax]
内部リンク: [2006-01-16-1]

Lost Labyrinth - グラフィカルなRouge-like

- Summary
同時に4人プレイ可能なRogue-like RPG.
30分程度でクリア可能らしい.
åƳåƳåƳåƳ
åƳåƳåƳ
- Reference
MOONGIFT - Lost Labyrinth
http://oss.moongift.jp/intro/i-952.html

カテゴリ: [Game][Rogue-like][Stub]

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

- 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ライクな画像サムネイル生成

- 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/

カテゴリ: [JavaScript]
2006-01 / 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

Color Reference

ChangeLogを検索
携帯電話からアクセス!

カテゴリ

最近の話題

リンク

過去ログ

Google

QR Code

Since
2002-11-28
Update
2008-02-20 21:23
Copyright © 2005 xight.org All Rights Reserved.