我正在尝试使用以下代码覆盖花式框默认设置:
jQuery.extend(jQuery.fancybox.defaults, {
padding: 25,
margin: [20, 65, 20, 65]
});
它工作完美。但是当我尝试覆盖这样的模板选项时,它会停止工作:
jQuery.extend(jQuery.fancybox.defaults, {
padding: 25,
margin: [20, 65, 20, 65],
tpl: {
closeBtn: '<a href="javascript:;">custom code</a>',
next: '<a href="javascript:;" >custom code</a>',
prev: '<a href="javascript:;">custom code</a>'
}
});
怎么了?
这个想法是扩展"tpl"属性本身。我的代码如下所示:
$.extend($.fancybox.defaults.tpl, {
closeBtn: '<a class="custom" href="javascript:void(0);">custom</a>'
});
我还像这样扩展"默认值"属性:
$.extend($.fancybox.defaults, {
closeBtn: true,
openEffect: "none",
closeEffect: "none",
});
这就是我使用的。希望它会有所帮助。
您必须声明每个模板代码,因为如果您更改 fancybox 默认值,整个 "tpl" var 将被覆盖。这样,您将无法使用任何花哨的窗口,因为javascript代码不会保留其他模板。
因此,您必须以这种方式覆盖每个:
$.extend($.fancybox.defaults, {
tpl: {
wrap : '<div class="fancybox-wrap" tabIndex="-1"><div class="fancybox-skin"><div class="fancybox-outer"><div class="fancybox-inner"></div></div></div></div>',
image : '<img class="fancybox-image" src="{href}" alt="" />',
iframe : '<iframe id="fancybox-frame{rnd}" name="fancybox-frame{rnd}" class="fancybox-iframe" frameborder="0" vspace="0" hspace="0"></iframe>',
error : '<p class="fancybox-error">The requested content cannot be loaded.<br/>Please try again later.</p>',
closeBtn : '<a title="Close" class="fancybox-item fancybox-close" href="javascript:;"></a>',
next : '<a title="Next" class="fancybox-nav fancybox-next" href="javascript:;"><span></span></a>',
prev : '<a title="Previous" class="fancybox-nav fancybox-prev" href="javascript:;"><span></span></a>'
}
});
当然,您可以修改上面的代码!