| 目錄 [隱藏]
1 參考文件2 好用的3 幫它打上類固醇(Like Ruby)4 Class5 事件
[編輯]參考文件
prototype JavaScript Framework
Developer Notes for prototype.js
script.aculo.us's prototype library documentation
Quick Guide to Prototype
Overview of the Prototype Javascript Library
Prototype Slides - relevance
[編輯]好用的
$('myDiv') it's better than document.getElementById()
$F('userName') it returns the value of any field input control
[編輯]幫它打上類固醇(Like Ruby)
Loop Ruby style
var simpsons = ['Homer', 'Marge', 'Lisa', 'Bart', 'Meg'];simpsons.each( function(familyMember){ alert(familyMember); });
The Object extensiton of inspect() is there.
The Enumerable and Array references for all the available functions, ex: find & findAll...
var listBox = $('lstEmployees')var options = listBox.getElementsByTagName('option');options = $A(options);var opt = options.find( function(employee){ return (employee.value == emp_id);});paragraph = $(paragraph);var links = $A(paragraph.getElementsByTagName('a'));//find links that do not start with 'http'var localLinks = links.findAll( function(link){ var start = link.href.substring(0,4); return start !='http';});//now the link textsvar texts = localLinks.pluck('innerHTML');//get them in a single stringvar result = texts.inspect();alert(result);
[編輯]Class
Class 宣告, options 是一個 map, 可以預設一些設定及讓 programmer 控制
var Klass = Class.create();Klass.prototype = { initialize: function(elem, options) { this.options = Object.extend({ speed: 0.1, delay: 0.0 }, options || {}); this.elem = $(elem); }, method1: function() { }, method2: function() { }}
Class 實例
var kls = new Klass('id');var kls = new Klass('id', {speed: 0.5});
繼承(It's not good now)
SubKlass = Class.create();SubKlass.prototype = Object.extend(new Klass, { initialize: function(ele, options) { }, method1: function() { }, method2: function() { }});
[編輯]事件
bind, the returned function will have the same arguments as the original one.
bindAsEventListener, the returned function will have the current event object as its argument.
Event.observe
例如:
this.form.onsubmit = this.onSubmit.bindAsEventListener(this);onSubmit: function(event) { var elem = Event.element(event);},
Event.observe(element, 'load', function(event){ //... });Event.observe(element, 'load', this.onXXX.bind(this));
Event.stopObserving(...);
Event.stop(e);
link titleInsert non-formatted text here==Ajax==
new Ajax.Request(this.validateAction, { method: 'ge--~~~~t', parameters: e.name + "=" + e.value, onSuccess: (fun----ction(req) { th[http://www.example.com link title][[Link title]]is.reportValidation(e, req.responseText); }).bind(this), onFailure: function(req) {alert(req.responseText)}, onException: function(t,e) {alert(e);}}); |
