0
爲快速問題道歉,但我想看到一些示例窗口小部件,允許在同一頁面的多個實例。 (關於這種技術的文章也會很好!)多實例JavaScript小部件的示例(在同一頁上)?
Digg的小部件允許這個(http://about.digg.com/downloads/widgets),但我不知道任何其他人。
是嗎?
謝謝。
爲快速問題道歉,但我想看到一些示例窗口小部件,允許在同一頁面的多個實例。 (關於這種技術的文章也會很好!)多實例JavaScript小部件的示例(在同一頁上)?
Digg的小部件允許這個(http://about.digg.com/downloads/widgets),但我不知道任何其他人。
是嗎?
謝謝。
請參閱YUI widgets中的任何一個。例如,頁面上多個YUI增強buttons。
創建具有每個實例的數據
的基本技術的多個實例如下所示。
由於調用程序使用new,會爲每個小部件創建一個Larry.widget對象的新實例。所以每個小部件都有自己的獨立對象「this」並用它來存儲每個實例的數據。
同時,該對象的原型包含這些功能。所以所有的小部件都共享相同的功能,但擁有他們的數據集。
Larry = {}; // Create global var
Larry.widget = function (options) {
// create with new. Eg foo = new Larry.widget({an_option: true, id: "q_el"});
// options: object with members:
// an_option
// id
// Then call foo.xyz(); to get the widget to do xyz
this.init(options);
};
Larry.widget.prototype = {
constructor: Larry.widget,
// Setting the constructor explicitly since we're setting the entire
// prototype object.
// See http://stackoverflow.com/questions/541204/prototype-and-constructor-object-properties/541268#541268
init: function(options) {
this.id = options.id;
this.an_option= options.an_option;
this._function_a(); // finish initialization via a function.
}, // remember that function init is a member of the object, so separate
// the functions using commas
_function_a: function() {
// This is a "private" function since it starts with _
// Has access to "this" and its members (functions and vars)
....
},
xyz: function() {
// This is a "public" function.
// Has access to "this" and its members (functions and vars)
...
} // Note: NO TRAILING COMMA!
// IE will choke if you include the trailing comma.
}