0
我想換一個畫布功能的jQuery插件，以便它可以通過多個實例來調用。的Javascript jQuery插件 - 多個實例，外部控制
我希望能夠遍歷找到的項目，並呼籲像這樣
HTML插件...
<div id="select1" class="foo" data-init="multi">A</div>
<div id="select2" class="foo" data-init="multi">B</div>
<div id="select3" class="foo" data-init="multi">C</div>
<div id="select4" class="foo" data-init="multi">D</div>
JS ...
var complicatedObj = {
init: function(element){
this.el = element;
console.log("init method", this.el);
//start a complicated process
//like rendering a canvas applicaation
this.bindEvent();
this.addRandom(this.el);
},
addRandom: function(el){
$(el).text(Math.random());
},
reInit: function(){
console.log("re-initialize method");
},
bindEvent: function(){
$(this.el).click(function() {
console.log("Letter.", $(this).text());
});
}
}
//An application with complicated functions -- initialize, re-initialize
$.multiInstance = {
id: 'multiInstance',
version: '1.0',
defaults: { // default settings
foo: 'bar'
}
};
(function ($) {
//Attach this new method to jQuery
$.fn.extend({
multiInstance: function (params) {
//Merge default and user parameters
var otherGeneralVars = 'example';
return this.each(function() {
var $this = $(this), opts = $.extend({},$.multiInstance.defaults, params);
switch (params) {
case "init":
complicatedObj.init($this);
break;
case "reInit":
complicatedObj.addRandom($this);
break;
}
//console.log("$this", $this);
console.log("params", params);
//$this.text(opts.foo);
});
}
})
})(jQuery);
/*
$("#select1").multiInstance();
$("#select2").multiInstance({foo:"foobar"})
$("#select3").multiInstance("init");*/
$('[data-init="multi"]').each(function(index) {
//console.log(index + ": " + $(this).text());
$(this).multiInstance("init");
});
setTimeout(function(){ $('#select3').multiInstance("reInit"); }, 2000);
但我需要能夠調用不同的方法，通過爭論這些方法 - 然後當發生了變化 - 提供一個回調趕上變化的情況下
這是構建插件的正確方法。我希望能夠創造的多個實例應用程序 - 但也要控制它外部 - 並從外部結果拉出值。
_「，而且還控制它在外部 - 也拉值爲外部結果「_可以desc ribe「在外部控制」？ – guest271314
好的 - 就像這個插件 - 是一個旋轉木馬 - 你有下一個/ prev箭頭綁定到它...和多個傳送帶。 - 但也有其他控制用戶界面組件，如選擇框，輸入---控制一個或兩個輪播（就像他們是雙胞胎一樣）。所以一個改變的選擇框 - 在輪播插件中調用一個更改。但是，我需要插件與外部領域進行交流，以指示哪個幻燈片處於打開狀態。幾乎創建一個主/從 - 反之亦然關係 –
我應該放棄了「complicatedObj」，並把所有的都在這裏面爲「$ .multiInstance」的一部分功能是什麼？ ---說也有一個img.load - 或東西，可能需要幾秒鐘採取行動 - 我發現，我的「旋轉木馬」 - 真正的多個實例畫布360應用程式的空檔 –