スライドを開く

Prototype.jsのよく使う機能を簡単に使えるよう使いやすくまとめみた。

2008年4月 9日 16:30　 | | コメント(0) | トラックバック(0) | | トップへ |
prototype.jpg
prototype.js

Ajaxフレームワークの一つ、prototype.jsですが、Ajaxianによる2006年の利用率が以下の通りです。

survey06-all-small.png
script.aculo.usはprototype依存のライブラリなのでscript.aculo.usを使っている方はprototypeを使っている可能性が高いと言うことです。


で、今回作ってみたのがprototype.jsの一部の機能＋αを簡単に使えるようにしたクラス。
Ajaxを少しつかったことがあって、もっと自分でいろいろやってみたいって方に使ってもらえればと思います。

入力内容のバリデート

バリデートでは、フォームに入力された内容を正規表現で可否を判定します。

入力内容判定
メールアドレス判定
URL判定
郵便番号判定
指定文字判定 「テスト」で一致
数字判定
英小文字判定
英大文字判定
英数字判定


エレメントに対して効果をかける



このボックスに効果をかけます。

使い方

下のjavascriptコードをeasyproto.js（任意）という別ファイル化して保存します。

/*  EasyProto JavaScript , version 0.1
 *  (c) 2008 Ryuichi Nonaka
 *
 *  ProtoTab is freely distributable under the terms of an MIT-style license.

 *  For details, see the AutoComp web site: http://d-remix.net/autocomp.html
 *
 *--------------------------------------------------------------------------*/

var EasyProto = {
	Hide:function(element){

		Element.hide($(element));
	},
	Show:function(element){
		Element.show($(element));
	},
	Remove:function(element){
		Element.remove($(element));
	},
	Toggle:function(element){

		Element.toggle($(element));
	},
	Scroll:function(element){
		Element.scrollTo($(element));
	},
	InnerChange:function(element,Document){

		$(element).innerHTML = Document;
	},
	BCChange:function(Elements,Color){
		$(Elements).style.backgroundColor = Color;
	},
	LoadFile:function(elements,FileNames,Method) {

		new Ajax.Request(FileNames , { method: Method, onComplete: Data });
		function Data(responseHttpObj){
			var Box = responseHttpObj.responseText;
			$(elements).innerHTML = Box;
		}

	},
	Insertion:function(element,Flag,Document){
		if(Flag == "Before"){
			new Insertion.Before(element, Document);
		} else if(Flag == "After"){

			new Insertion.After(element, Document);
		} else if(Flag == "Top"){
			new Insertion.Top(element, Document);
		} else if(Flag == "Bottom"){

			new Insertion.Bottom(element, Document);
		}
	},
	AddClass:function(element,Class){

		Element.addClassName($(element), Class);
	},
	RemoveClass:function(element,Class){
		Element.removeClassName($(element), Class);
	},
	ValidateMail:function(Form,Color1,Color2){

		if ($(Form).value.match(/^[A-Za-z0-9]+[\.\w-]+@[\w\.-]+\.\w{2,}$/)) {
			EasyProto.BCChange(Form,Color1);
		} else {
			EasyProto.BCChange(Form,Color2);
		}

	},
	ValidateInput:function(Form,Color1,Color2){
		if (!$(Form).value == "") {
			EasyProto.BCChange(Form,Color1);
		} else {

			EasyProto.BCChange(Form,Color2);
		}
	},
	ValidateUrl:function(Form,Color1,Color2){
		if ($(Form).value.match(/(http|ftp):\/\/.+/)) {

			EasyProto.BCChange(Form,Color1);
		} else {
			EasyProto.BCChange(Form,Color2);
		}
	},
	ValidateZip:function(Form,Color1,Color2){

		if ($(Form).value.match(/^\d+\-\d+$/)) {
			EasyProto.BCChange(Form,Color1);
		} else {
			EasyProto.BCChange(Form,Color2);
		}

	},
	ValidateTxt:function(Form,Text,Color1,Color2){
		if ($(Form).value == Text) {
			EasyProto.BCChange(Form,Color1);
		} else {

			EasyProto.BCChange(Form,Color2);
		}
	},
	ValidateNum:function(Form,Color1,Color2){
		if ($(Form).value.match(/^[0-9]+$/)) {

			EasyProto.BCChange(Form,Color1);
		} else {
			EasyProto.BCChange(Form,Color2);
		}
	},
	ValidateEngS:function(Form,Color1,Color2){

		if ($(Form).value.match(/^[a-z]+$/)) {
			EasyProto.BCChange(Form,Color1);
		} else {
			EasyProto.BCChange(Form,Color2);
		}

	},
	ValidateEngB:function(Form,Color1,Color2){
		if ($(Form).value.match(/^[A-Z]+$/)) {
			EasyProto.BCChange(Form,Color1);
		} else {

			EasyProto.BCChange(Form,Color2);
		}
	},
	ValidateEnNu:function(Form,Color1,Color2){
		if ($(Form).value.match(/^[A-Za-z0-9]+$/)) {

			EasyProto.BCChange(Form,Color1);
		} else {
			EasyProto.BCChange(Form,Color2);
		}
	},
	FormReset:function(Elements){

		Form.reset(Elements);
	},
	FormFocus:function(Elements){
		Field.focus(Elements);
	}
}


次にhtmlのヘッダ部分に任意のパスでprototype.jsと保存したeasyproto.jsを読み込ませる指定を記述します。 

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="easyproto.js"></script>
あとは、各クラスをイベントハンドラに記述することで利用できます。

逆引きクラス

入力内容判定 EasyProto.ValidateInput()
EasyProto.ValidateInput('ID','非一致背景色','一致背景色')
<input onkeyup="EasyProto.ValidateInput(this,'#f1ffef','#ffefef')" type="text" />
メールアドレス判定 EasyProto.ValidateMail()
EasyProto.ValidateMail('ID','非一致背景色','一致背景色')
<input onkeyup="EasyProto.ValidateMail(this,'#f1ffef','#ffefef')" type="text" />
URL判定 EasyProto.ValidateUrl()
EasyProto.ValidateUrl('ID','非一致背景色','一致背景色')
<input onkeyup="EasyProto.ValidateUrl(this,'#f1ffef','#ffefef')" type="text" />
郵便番号判定 EasyProto.ValidateZip()
EasyProto.ValidateZip('ID','非一致背景色','一致背景色')
<input onkeyup="EasyProto.ValidateZip(this,'#f1ffef','#ffefef')" type="text" />
指定文字判定 EasyProto.ValidateTxt()
EasyProto.ValidateTxt('ID','指定文字','非一致背景色','一致背景色')
<input onkeyup="EasyProto.ValidateTxt(this,'test','#f1ffef','#ffefef')" type="text" />
数字判定 EasyProto.ValidateNum()
EasyProto.ValidateNum('ID','非一致背景色','一致背景色')
<input onkeyup="EasyProto.ValidateNum(this,'#f1ffef','#ffefef')" type="text" />
英小文字判定 EasyProto.ValidateEngS()
EasyProto.ValidateEngS('ID','非一致背景色','一致背景色')
<input onkeyup="EasyProto.ValidateEngS(this,'#f1ffef','#ffefef')" type="text" />
英大文字判定 EasyProto.ValidateEngB()
EasyProto.ValidateEngB('ID','非一致背景色','一致背景色')
<input onkeyup="EasyProto.ValidateEngB(this,'#f1ffef','#ffefef')" type="text" />
英数字判定 EasyProto.ValidateEnNu()
EasyProto.ValidateEnNu('ID','非一致背景色','一致背景色')
<input onkeyup="EasyProto.ValidateEnNu(this,'#f1ffef','#ffefef')" type="text" />
フォームリセット EasyProto.FormReset()
EasyProto.FormReset('<form>タグのID')
<a href="javascript:void(0)" onclick="EasyProto.FormReset('Forms')">フォームをリセット</a>
フォームフォーカス EasyProto.FormFocus()
EasyProto.FormFocus('<input>のID')
<a href="javascript:void(0)" onclick="EasyProto.FormFocus('Form1')">フォームにフォーカス</a>
エレメントを隠す EasyProto.Hide()
EasyProto.Hide('エレメントのID')
<a href="javascript:void(0)" onclick="EasyProto.Hide('Sample')">エレメントを隠す</a>
エレメントを表示 EasyProto.Show()
EasyProto.Show('エレメントのID')
<a href="javascript:void(0)" onclick="EasyProto.Show('Sample')">エレメントを表示</a>
エレメントを表示・非表示 EasyProto.Toggle()
EasyProto.Toggle('エレメントのID')
<a href="javascript:void(0)" onclick="EasyProto.Toggle('Sample')">エレメントを表示・非表示</a>
エレメントの中身を書き換える EasyProto.InnerChange()
EasyProto.InnerChange('エレメントのID','書き換えるテキスト')
<a href="javascript:void(0)" onclick="EasyProto.InnerChange('Sample','書き換えるテキスト')">エレメントの中身を書き換える</a>
エレメントの前に値を挿入 EasyProto.Insertion()
EasyProto.Insertion('エレメントのID','Before','書き換えるテキスト')
<a href="javascript:void(0)" onclick="EasyProto.Insertion('Sample','Before','書き換えるテキスト')">エレメントの前に値を挿入</a>
エレメントの後に値を挿入 EasyProto.Insertion()
EasyProto.Insertion('エレメントのID','After','書き換えるテキスト')
<a href="javascript:void(0)" onclick="EasyProto.Insertion('Sample','After','書き換えるテキスト')">エレメントの後に値を挿入</a>
エレメントの最初に値を挿入 EasyProto.Insertion()
EasyProto.Insertion('エレメントのID','Top','書き換えるテキスト')
<a href="javascript:void(0)" onclick="EasyProto.Insertion('Sample','Top','書き換えるテキスト')">エレメントの最初に値を挿入</a>
エレメントの最後に値を挿入 EasyProto.Insertion()
EasyProto.Insertion('エレメントのID','Bottom','書き換えるテキスト')
<a href="javascript:void(0)" onclick="EasyProto.Insertion('Sample','Bottom','書き換えるテキスト')">エレメントの最後に値を挿入</a>
ファイル読み込み EasyProto.LoadFile()
EasyProto.LoadFile('エレメントのID','読み込みファイルのURL','読み込み方法（getかpost）')
<a href="javascript:void(0)" onclick="EasyProto.LoadFile('Sample','test.txt','get')">ファイル読み込み</a>
クラス名を付与 EasyProto.AddClass()
EasyProto.AddClass('エレメントのID','付与するクラス名')
<a href="javascript:void(0)" onclick="EasyProto.AddClass('Sample','test')">クラス名の付与</a>
クラス名を削除 EasyProto.RemoveClass()
EasyProto.RemoveClass('エレメントのID','削除するクラス名')
<a href="javascript:void(0)" onclick="EasyProto.RemoveClass('Sample','test')">クラス名の削除</a>
指定エレメントまでスクロール EasyProto.Scroll()
EasyProto.Scroll('エレメントのID')
<a href="javascript:void(0)" onclick="EasyProto.Scroll('Sample')">指定エレメントまでスクロール</a>
エレメントを削除 EasyProto.Remove()
EasyProto.Remove('エレメントのID')
<a href="javascript:void(0)" onclick="EasyProto.Remove('Sample')">エレメントを削除</a>
参考になった。

カテゴリ

使えるAjax , 使えると楽しいJavascript

タグ

関連記事

トラックバック(0)

このブログ記事を参照しているブログ一覧: Prototype.jsのよく使う機能を簡単に使えるよう使いやすくまとめみた。

このブログ記事に対するトラックバックURL: http://newflow.heteml.jp/mt4/mt-tb.cgi/247

コメントする

2008年4月

S M T W T F S
    1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30      

このブログ記事について

このページは、龍一が2008年4月 9日 16:30に書いたブログ記事です。

ひとつ前のブログ記事は「webに関するお気に入りブログ８選」です。

次のブログ記事は「本当にくれました。Adobe Flex 3 アカデミックライセンス・・・ありがとうAdobe」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

フィード

  • rss
  • はてなRSSへ追加
  • My Yahooへ追加
  • Livedoorへ追加
  • Google Readerへ追加
  • gooへ追加
  • フィードメーター - webデザイン・webプログラムのメモ帳：Design Remix
  • この日記のはてなブックマーク数

プロフィール

馬場で働く見習いクリエーター。
日々勉強です。

検索

Banner

  • あわせて読みたいブログパーツ
  • チームマイナス6%