2006-09-01から1ヶ月間の記事一覧

Positionオブジェクト(2)

prepareメソッド 【抜粋】 // must be called before calling withinIncludingScrolloffset, every time the // page is scrolled prepare: function() { this.deltaX = window.pageXOffset || document.documentElement.scrollLeft || document.body.scroll…

Positionオブジェクト(1)

とうとう最後のオブジェクトです。ただ、ここの解読は苦労しそうな気がします。。。「http://www.imgsrc.co.jp/~kuriyama/prototype/prototype.js.html#Position」には仮ドキュメントしかなく、参考資料が少ないです。また、ちょっとテストしてみただけで、…

イベントへの関数登録について

HTML+JavaScriptで、要素のイベントへの関数登録の方法は、主に以下の3つです。 1. 要素タグのなかに属性(onclick="〜"等)を直接記述する。 【例】 <button onclick="alert('!');">TEST</button> 2. 要素オブジェクトのプロパティへ関数を設定する。 【例】 <button id="test">TEST</button> <script> function func(){ alert("!"); } v…

Eventオブジェクト(に対する拡張)(4)

windowオブジェクトonunloadイベントへのunloadCacheメソッド登録 【抜粋】 /* prevent memory leaks in IE */ Event.observe(window, 'unload', Event.unloadCache, false); windowオブジェクトonunloadイベントへunloadCacheメソッドを登録しています、IE…

Eventオブジェクト(に対する拡張)(3)

stopObservingメソッド 【抜粋】 stopObserving: function(element, name, observer, useCapture) { var element = $(element); useCapture = useCapture || false; if (name == 'keypress' && (navigator.appVersion.match(/Konqueror|Safari|KHTML/) || el…

Eventオブジェクト(に対する拡張)(2)

findElementメソッド 【抜粋】 // find the first node with the given tagName, starting from the // node the event was triggered on; traverses the DOM upwards findElement: function(event, tagName) { var element = Event.element(event); while (…

Eventオブジェクト(に対する拡張)(1)

【抜粋】一部省略 if (!window.Event) { var Event = new Object(); } Object.extend(Event, { (省略) } });window.Eventがあればそれに対して拡張、なければ新たにオブジェクトを作成してメンバを追加します。window.Eventはブラウザによって実装が異なりま…

Abstract.EventObserverクラス、Form.Element.EventObserverクラス改修検討

Form.Element.EventObserverクラスでは、Form.Element.TimeObserver等とは違い、multipe指定のselectタグでも問題は発生しません。しかし、複数の同名radioやcheckboxを扱えないのは同じです。扱えようになると便利なのですが、そのためにはかなり改造する必…

ありがとうございます^^

(ほぼ)はじめてトラックバックいただきました。感謝です^^ 励みになります。(最初のトラバはなんだかよく分からないところに反応された;;) http://d.hatena.ne.jp/ululun/20060915 はてなブックマークに登録頂いた方にも感謝いたします。prototype.js解…

Form.EventObserverクラス

【抜粋】 Form.EventObserver = Class.create(); Form.EventObserver.prototype = Object.extend(new Abstract.EventObserver(), { getValue: function() { return Form.serialize(this.element); } }); 前述Abstract.EventObserverクラスを継承しています。…

Form.Element.EventObserverクラス

【抜粋】 Form.Element.EventObserver = Class.create(); Form.Element.EventObserver.prototype = Object.extend(new Abstract.EventObserver(), { getValue: function() { return Form.Element.getValue(this.element); } }); 前述Abstract.EventObserver…

Abstract.EventObserverクラス

【抜粋】一部省略 Abstract.EventObserver = function() {} Abstract.EventObserver.prototype = { initialize: function(element, callback) { (省略) }, (省略) registerCallback: function(element) { (省略) } } 名前の通り抽象クラスです。継承すること…

Abstract.TimedObserver.onTimerEventメソッド改修検討

前述したように、Form.Element.Observerでは、multiple指定のselectタグが扱えません。根本的な原因は、継承するAbstract.TimedObserverクラスのonTimerEventメソッドで、直前の値と現在の値の比較に、単純に不等号を用いていることです。改修案として、「直…

Form.Observerクラス

【抜粋】 Form.Observer = Class.create(); Form.Observer.prototype = Object.extend(new Abstract.TimedObserver(), { getValue: function() { return Form.serialize(this.element); } }); 前述Abstract.TimedObserverクラスを継承しています。指定フォー…

Form.Element.Observerクラス

【抜粋】 Form.Element.Observer = Class.create(); Form.Element.Observer.prototype = Object.extend(new Abstract.TimedObserver(), { getValue: function() { return Form.Element.getValue(this.element); } }); 前述Abstract.TimedObserverクラスを継…

Abstract.TimedObserverクラス

【抜粋】一部省略 Abstract.TimedObserver = function() {} Abstract.TimedObserver.prototype = { (省略) }, (省略) registerCallback: function(element) { (省略) } } Abstract名前空間に作成されています。名前の通り抽象クラスです。継承することで、な…

$F関数

【抜粋】 var $F = Form.Element.getValue; 前述Form.Element.getValueメソッドの別名です。 【参考】前述Form.Element.getValueメソッドの例の書き換え function test(element){ var value; if(element.length != null && element.type == null){ value = $…

Form.Element.Serializersオブジェクト

【抜粋】一部省略 Form.Element.Serializers = { input: function(element) { (省略) }, (省略) selectMany: function(element) { (省略) } } 入力要素(inputタグ等)の名前と値を取得するためのメソッドを備えます。前述Formオブジェクト、Form.Elementオブ…

Form.Elementオブジェクト

【抜粋】一部省略 Form.Element = { serialize: function(element) { (省略) }, getValue: function(element) { (省略) } }inputタグ等の入力要素を扱うオブジェクト。Formオブジェクトと違い、form経由でなくても要素を扱えます。 serializeメソッド 【抜粋…

Formオブジェクト

【抜粋】一部省略 var Form = { serialize: function(form) { var elements = Form.getElements($(form)); var queryComponents = new Array(); for (var i = 0; i < elements.length; i++) { var queryComponent = Form.Element.serialize(elements[i]); if…

Fieldオブジェクト

【抜粋】 var Field = { clear: function() { for (var i = 0; i < arguments.length; i++) $(arguments[i]).value = ''; }, focus: function(element) { $(element).focus(); }, present: function() { for (var i = 0; i < arguments.length; i++) if ($(a…

Element.ClassNamesクラス

【抜粋】一部省略 Element.ClassNames = Class.create(); Element.ClassNames.prototype = { initialize: function(element) { this.element = $(element); }, (省略) } Object.extend(Element.ClassNames.prototype, Enumerable);Elementオブジェクトを名前…

Insertion.Topクラス

【抜粋】 Insertion.Top = Class.create(); Insertion.Top.prototype = Object.extend(new Abstract.Insertion('afterBegin'), { initializeRange: function() { this.range.selectNodeContents(this.element); this.range.collapse(true); }, insertContent…

Insertion.Afterクラス

【抜粋】 Insertion.After = Class.create(); Insertion.After.prototype = Object.extend(new Abstract.Insertion('afterEnd'), { initializeRange: function() { this.range.setStartAfter(this.element); }, insertContent: function(fragments) { fragme…

Insertion.Bottomクラス

【抜粋】 Insertion.Bottom = Class.create(); Insertion.Bottom.prototype = Object.extend(new Abstract.Insertion('beforeEnd'), { initializeRange: function() { this.range.selectNodeContents(this.element); this.range.collapse(this.element); }, …

Insertion.Beforeクラス

【抜粋】 Insertion.Before = Class.create(); Insertion.Before.prototype = Object.extend(new Abstract.Insertion('beforeBegin'), { initializeRange: function() { this.range.setStartBefore(this.element); }, insertContent: function(fragments) { …

Insertionオブジェクト(名前空間)

【抜粋】 var Insertion = new Object();後述のInsertion.Before、Insertion.Top、Insertion.Bottom、Insertion.Afterクラスの名前空間用オブジェクトです。

Abstract.Insertionクラス

前提条件:DOMについての理解 Insertion関連のクラスを理解するためには、DOMについての理解が不可欠になります。実は筆者もあまり詳しいとは言えません^^; このため、不適切な記述があるかもしれませんが、ご容赦ください。気がついたらその都度修正しま…

Toggleオブジェクト

【抜粋】 var Toggle = new Object(); Toggle.display = Element.toggle;メンバはdisplayメソッドのみです。前述Element.toggleメソッドの別名となっています。例は省略します。

Elementオブジェクト(に対する拡張)(3)

makePositionedメソッド 【抜粋】 makePositioned: function(element) { element = $(element); var pos = Element.getStyle(element, 'position'); if (pos == 'static' || !pos) { element._madePositioned = true; element.style.position = 'relative'; …