如何使用数组扩展jQuery插件的选项 [英] how to extend options of a jquery plugin with an array
本文介绍了如何使用数组扩展jQuery插件的选项的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在编写一个jQuery插件.有一些默认选项,我可以在HTML上更改它们,但是如果它由数组组成,该如何更改?
I am writing a jQuery plugin. There are some default options and I can change them on HTML, but how can I change an option if it consists of an array?
这是插件中的代码:
(function($){
$.fn.extend({
aniTag: function(options) {
var defaults = {
radius: 25,
defaultradius: 0,
enableTilt: true,
tilt : 20,
random : true,
randomMax : 25 ,
};
var colors = new Array('4AC7ED', 'FDC015', '9F78EC', 'F25C33');
var options = $.extend(defaults, options);
return this.each(function() {
var o = options;
//some stuff
});
}
});
})(jQuery);
这是html的用法:
<script type="text/javascript">
$(document).ready(function() {
$('.tags').aniTag({enableTilt: false});
});
</script>
如您所见,我可以更改enableTilt
选项.我需要做的是更改color
数组中的值.是的,我知道我需要将该数组放入defaults
var中,但是我不知道该怎么做.
As you can see I can change enableTilt
option. What I need to do is to change the values in the color
array. Yes, I know I need to put that array in defaults
var, but I don't know how to do it.
推荐答案
像这样将您的颜色数组添加到默认值中
Add your array of colors to your defaults like so
var defaults = {
radius: 25,
defaultradius: 0,
enableTilt: true,
tilt : 20,
random : true,
randomMax : 25 ,
colors: ['4AC7ED', 'FDC015', '9F78EC', 'F25C33']
};
然后您可以使用
$('.tags').aniTag({enableTilt: false, colors: ['ffffff', '000000']});
小提琴演示: http://jsfiddle.net/Beufe/1/ >
Fiddle Demo: http://jsfiddle.net/Beufe/1/
var defaults = {
radius: 25,
defaultradius: 0,
enableTilt: true,
tilt: 20,
random: true,
randomMax: 25,
colors: ['4AC7ED', 'FDC015', '9F78EC', 'F25C33']
};
alert(defaults.colors.length); // output: 4
alert('Default Value colors[0] = ' + defaults.colors[0]); // output: 4AC7ED
var options = $.extend(defaults, {
enableTilt: false,
colors: ['ffffff', '000000']
});
alert(options.colors.length); // Output: 2
alert('New Value colors[0] = ' + options.colors[0]); // output: ffffff
这篇关于如何使用数组扩展jQuery插件的选项的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文