我正在使用jQuery UI模板编写我的第一个jQuery插件,并试图实例化同一插件的两个实例 - 但具有不同的选项。在一个页面上我的jQuery插件的多个实例
我可以做一些帮助,请!
的Javascript:
(function ($) {
// **********************************
// ***** Start: Private Members *****
var pluginName = 'onFancyLinks',
version = '1.0';
// ***** Fin: Private Members *****
// ********************************
// *********************************
// ***** Start: Public Methods *****
var methods = {
init: function (options) {
//"this" is a jquery object on which this plugin has been invoked.
return this.each(function (index) {
var $this = $(this);
var data = $this.data(pluginName);
// If the plugin hasn't been initialized yet
if (!data) {
var settings = {
lineColor: '#fff',
lineWidth: 1,
wrapperClass: 'fancy-link',
linesClass: 'line',
transDuration: '0.7s'
};
if (options) {
$.extend(true, settings, options);
}
$this.data(pluginName, {
target: $this,
settings: settings
});
}
});
},
wrap: function() {
return this.each(function() {
var $this = $(this),
data = $this.data(pluginName),
opts = data.settings,
//wrapping div
wrapper = '<div class="' + opts.wrapperClass + '"></div>',
lines = {
top: '<div class="' + opts.linesClass + ' line-top"> </div>',
right: '<div class="' + opts.linesClass + ' line-right"> </div>',
bottom: '<div class="' + opts.linesClass + ' line-bottom"> </div>',
left: '<div class="' + opts.linesClass + ' line-left"> </div>'
};
$this.wrap(wrapper);
$('.' + opts.wrapperClass).append(lines.top, lines.right, lines.bottom, lines.left);
//setup transition duration of lines animation
$('.' + opts.wrapperClass + ' .' + opts.linesClass).css({
'transition-duration': opts.transDuration,
backgroundColor: opts.lineColor,
borderWidth: opts.lineWidth
});
});
}
};
// ***** Fin: Public Methods *****
// *******************************
// *****************************
// ***** Start: Supervisor *****
$.fn[pluginName] = function (method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist in jQuery.' + pluginName);
}
};
// ***** Fin: Supervisor *****
// ***************************
})(jQuery);
$(function() {
var v1 = $('#flink2').onFancyLinks({
lineColor: '#f00',
lineWidth: 2,
transDuration: '.4s'
});
var v2 = $('#flink').onFancyLinks({
lineColor: '#ff0',
lineWidth: 1,
transDuration: '.7s'
});
v1.onFancyLinks('wrap');
v2.onFancyLinks('wrap');
});
HTML:
<a id="flink2" href="http://www.google.co.uk">View Google</a>
<a id="flink" href="http://www.visarc.co.uk">View Visarc Site</a>
这里是我的小提琴:http://jsfiddle.net/owennicol/xhuxk/14/
我敢肯定,这是一些简单的我失踪...
检查我的答案 - 和补丁版本。作为一个旁注 - 这是一件非常令人印象深刻的工作,也很好地构建了它的问题。如果这里至少有第十个问题看起来像你的问题,那本来会是一个好得多的地方。 ) – raina77ow
@ raina77ow,FYI上面使用的模式最初是以jQuery插件的形式提供的。虽然它没有解释就突然从网站上消失了,但它仍然是一个很棒的插件;举个例子,我仍然在使用它。 –