如何在一组插件选项中添加jQuery if语句? [英] How to add jQuery if statement inside a set of plugin options?
问题描述
我试图让日历插件(FullCalendar)显示不同的天数,具体取决于用户是在移动设备,平板电脑还是台式机断点上查看网站。为此,我需要日历在桌面上显示正常的一周,并在移动设备上显示三天。像普通的插件一样,你可以初始化元素并传递一些选项。我尝试了几件事情。
I'm trying to get a calendar plugin (FullCalendar) to display a different number of days depending on whether the user is viewing the site on mobile, tablet, or desktop breakpoints. For this, I need the calendar to display a normal week on desktop and 3 days on mobile. Like normal plugins, you init the element and pass it some options. I've tried a couple of things so.
工作代码如下:
The working code is as follows:
$('#calendar').fullCalendar({
timeFormat:'h(:mm)a',
header:{
left:'prev',
center:'title',
right:'next'
},
height: 650,
views: {
basicThreeDay: {
type: 'basic',
duration: { days: 3 },
buttonText: '3 day'
},
},
defaultView: 'basicThreeDay',
titleFormat: {
week: 'MMMM YYYY'
},
columnFormat: {
week: 'dddd M/D',
day: 'ddd M/D'
},
这段代码会显示3天的日历这对移动设备来说很好,但是当我想要显示完整的我们时,会在桌面上显示3天ek。这实际上是我想要做的:
This code will display the calendar with a 3 day view. This is fine for mobile but will show 3 days on desktop when I want to show a full week. This is essentially what I want to do:
$('#calendar').fullCalendar({
timeFormat:'h(:mm)a',
header:{
left:'prev',
center:'title',
right:'next'
},
height: 650,
if ($(window).width() <= 481){
views: {
basicThreeDay: {
type: 'basic',
duration: { days: 3 },
buttonText: '3 day'
},
},
defaultView: 'basicThreeDay',
} else {
defaultView: 'basicWeek',
}
titleFormat: {
week: 'MMMM YYYY'
},
columnFormat: {
week: 'dddd M/D',
day: 'ddd M/D'
},
我可以包装entir e函数在if语句中,但是,在我复制完成后,整个函数继续运行。至少有200行代码,我不想复制所有代码只是为了获得一次更改。无论如何,我可以根据窗口大小更改选项?
I can wrap the entire function in the if statement, however, the entire function goes on after I copied here. At least 200 lines of code and I don't want to duplicate all that code just to get one single change. Anyway I can change options depending on the window size?
我也尝试在上面的函数中将defaultView设置为basicWeek,然后在关闭之后添加:
I've also tried setting the defaultView to basicWeek in the above function and then adding after that closes:
if (jQuery(window).width() <= 481) {
jQuery('#hp-availability-calendar').fullCalendar({
views: {
basicThreeDay: {
type: 'basic',
duration: { days: 3 },
buttonText: '3 day'
},
},
defaultView: 'basicThreeDay'
});
};
这也行不通。
推荐答案
您可以创建通用设置对象,然后根据您的条件添加其他变量。就像这样:
You can create the common settings object and then add other variables to it based on your conditions. Something like this:
var calendar = {
timeFormat:'h(:mm)a',
header:{
left:'prev',
center:'title',
right:'next'
},
height: 650,
titleFormat: {
week: 'MMMM YYYY'
},
columnFormat: {
week: 'dddd M/D',
day: 'ddd M/D'
}
};
if ($(window).width() <= 481){
calendar.views = {
basicThreeDay: {
type: 'basic',
duration: {
days: 3
},
buttonText: '3 day'
}
};
calendar.defaultView = 'basicThreeDay',
} else {
calendar.defaultView = 'basicWeek',
}
$('#calendar').fullCalendar(calendar);
这篇关于如何在一组插件选项中添加jQuery if语句?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!