我正在使用此JavaScript Spinner / loader项目http://fgnass.github.io/spin.js/
我在JSFiddle上有一些代码http://jsfiddle.net/jasondavis/9pBsr/显示了我的进度，它可能看起来像我所拥有的所有功能一样过分但我已经删除了这篇文章的所有非相关内容。所以，如果你可以帮助我，请保持所有结构的原样。
现在我的问题。我正在使用的库有这个代码来显示微调器
var spinner = new Spinner(opts).spin(target);
文档说要杀死和隐藏微调器以在stop上运行Spinner函数，但我的代码的结构方式，我不知道如何访问它，因为我不断收到错误
TypeError: Cannot call method 'stop' of undefined
我的最终结果是能够调用它并让它停止/杀死微调器......
zPanel.loader.hideLoader()
这是我的JavaScript，但所有JS和HTML都在这个JSFiddle上http://jsfiddle.net/jasondavis/9pBsr/
请帮助我获取zPanel.loader.hideLoader()函数来调用zPanel.loader.buildSpinner()函数Spinner.stop()
var zPanel = {
init: function() {
$(document).ready(function() {
zPanel.loader.init();
});
},
loader: {
init: function() {
//Bind zloader to button click
$('#button').click(function() {
zPanel.loader.showLoader();
});
$('#hidebutton').click(function() {
zPanel.loader.hideLoader();
});
},
showLoader: function() {
//Show Spinning Loader
$('#zloader_overlay').fadeIn('fast', function() {
$("#zloader").show();
zPanel.loader.buildSpinner();
});
},
hideLoader: function() {
//Hide Spinning Loader
$('#zloader_overlay').fadeIn('fast', function() {
$("#zloader").hide();
// This is the function that is not working yet
//zPanel.loader.spinner('stop');
zPanel.loader.buildSpinner.spinner.stop();
});
},
buildSpinner: function() {
var opts = {
lines: 9, // The number of lines to draw
length: 11, // The length of each line
width: 13, // The line thickness
radius: 40, // The radius of the inner circle
corners: 0.4, // Corner roundness (0..1)
rotate: 0, // The rotation offset
color: '#000', // #rgb or #rrggbb
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'spinner', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: 200, // Top position relative to parent in px
left: 'auto' // Left position relative to parent in px
};
var target = document.getElementById('zloader_content');
var spinner = new Spinner(opts).spin(target);
// I need to call spinner.stop() some how from my function above name hideLoader()
},
}
};
zPanel.init();
答案 0 :(得分：1)
使您的微调器成为zPanel的成员。
var zPanel = {
spinner:null,
init: function() {
$(document).ready(function() {
zPanel.loader.init();
});
},
loader: {
init: function() {
//Bind zloader to button click
$('#button').click(function() {
zPanel.loader.showLoader();
});
$('#hidebutton').click(function() {
zPanel.loader.hideLoader();
});
},
showLoader: function() {
//Show Spinning Loader
$('#zloader_overlay').fadeIn('fast', function() {
$("#zloader").show();
zPanel.loader.buildSpinner();
});
},
hideLoader: function() {
//Hide Spinning Loader
$('#zloader_overlay').fadeIn('fast', function() {
$("#zloader").hide();
zPanel.spinner.stop();
});
},
buildSpinner: function() {
var opts = {
lines: 9, // The number of lines to draw
length: 11, // The length of each line
width: 13, // The line thickness
radius: 40, // The radius of the inner circle
corners: 0.4, // Corner roundness (0..1)
rotate: 0, // The rotation offset
color: '#000', // #rgb or #rrggbb
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'spinner', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: 200, // Top position relative to parent in px
left: 'auto' // Left position relative to parent in px
};
var target = document.getElementById('zloader_content');
zPanel.spinner = new Spinner(opts).spin(target);
// I need to call spinner.stop() some how from my function above name hideLoader()
},
}
};
zPanel.init();
答案 1 :(得分：1)
将微调器保存到附加到zPanel的变量，然后使用该引用来停止微调器， 怎么样：
var zPanel = {
init: function() {
$(document).ready(function() {
zPanel.loader.init();
});
},
loader: {
init: function() {
//Bind zloader to button click
$('#button').click(function() {
zPanel.loader.showLoader();
});
$('#hidebutton').click(function() {
zPanel.loader.hideLoader();
});
},
showLoader: function() {
//Show Spinning Loader
$('#zloader_overlay').fadeIn('fast', function() {
$("#zloader").show();
//showDiv();
zPanel.spinner = zPanel.loader.buildSpinner();
});
},
hideLoader: function() {
//Hide Spinning Loader
$('#zloader_overlay').fadeIn('fast', function() {
$("#zloader").hide();
//showDiv();
//zPanel.loader.spinner('stop');
zPanel.spinner.stop();
});
},
buildSpinner: function() {
var opts = {
lines: 9, // The number of lines to draw
length: 11, // The length of each line
width: 13, // The line thickness
radius: 40, // The radius of the inner circle
corners: 0.4, // Corner roundness (0..1)
rotate: 0, // The rotation offset
color: '#000', // #rgb or #rrggbb
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'spinner', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: 200, // Top position relative to parent in px
left: 'auto' // Left position relative to parent in px
};
//var target = document.getElementById('zloader');
var target = document.getElementById('zloader_content');
var spinner = new Spinner(opts).spin(target);
return spinner;
},
}
};
zPanel.init();
答案 2 :(得分：1)
zPanel是一个对象。 zPanel中的函数只使用自己的变量。为了能够调用微调器对象，只需在zPanel中创建一个微调器属性，并让所有函数都使用这个属性：
var zPanel = {
spinner: null, //Notice the property!
init: function() {
$(document).ready(function() {
zPanel.loader.init();
});
},
loader: {
init: function() {
//Bind zloader to button click
$('#button').click(function() {
zPanel.loader.showLoader();
});
$('#hidebutton').click(function() {
zPanel.loader.hideLoader();
});
},
showLoader: function() {
//Show Spinning Loader
$('#zloader_overlay').fadeIn('fast', function() {
$("#zloader").show();
//showDiv();
zPanel.loader.buildSpinner();
});
},
hideLoader: function() {
var self = this; //Create a variable that is accesable within the fadeIn
//Hide Spinning Loader
$('#zloader_overlay').fadeIn('fast', function() {
$("#zloader").hide();
//showDiv();
//Below code has changed!!
self.spinner('stop');
zPanel.loader.buildSpinner.spinner.stop();
});
},
buildSpinner: function() {
var opts = {
lines: 9, // The number of lines to draw
length: 11, // The length of each line
width: 13, // The line thickness
radius: 40, // The radius of the inner circle
corners: 0.4, // Corner roundness (0..1)
rotate: 0, // The rotation offset
color: '#000', // #rgb or #rrggbb
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'spinner', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: 200, // Top position relative to parent in px
left: 'auto' // Left position relative to parent in px
};
//var target = document.getElementById('zloader');
var target = document.getElementById('zloader_content');
//Below line has changed!!!
this.spinner = new Spinner(opts).spin(target);
//if(spinStart == 'stop'){
// zPanel.loader.spinner.spinner.stop();
//}
},
}