不得不爱开源 Wijmo jQuery 插件集（8）【滑动条】(附页面展示和源码)

在上一篇文章中我们，给大家介绍了 Wijmo Slider-滑动条插件的特性及使用方法。感谢园子中朋友的支持，朋友们的支持给我们写这一系列文章提供了很大的动力。在这篇文章中我们将介绍 Calendar的特性及使用方法。 wijcalendar 即为 jQuery 中的日历插件。

如果你是第一次看本系列文章，那么还可以参考本系列的其他几篇文章，相信会给你带来更多惊喜：

首先让我们看看 Wijmo wijcalendar 给我们带来了哪些惊喜？

用ComponentOne为ASP.NET Wijmo出品的Calendar™控件来添加一个日历到你的网站。它可以显示单个月或几个月的一个表格，其中包含可自定义的风格和导航元素。

建立你的第一个 Wijmo jQuery Menu:
HTML 标签：

`<div id="calendar1"></div>`
jQuery 脚本：

<script type="text/javascript">

$(function () {

$("#calendar1").wijcalendar(

{ easing: "easeOutExpo" }

);

});

</script>

特性

选择模式

日历控件可以支持单个和多个日期选择。通过工作日和周数选择器你可以选择一组天数，比如，指向星期二的所有日子或一个特定星期的所有日子。使用月份选择器，你可以选择整个月的所有日子。

月预览

日历控件具有可选的预览窗格，可以显示上一个和下一个日历月。这可以使你能够在一个没有导航的月的开始或者结束时就查看日期时间。你只需要设置一个属性来启用此功能。

动画

当月份在顶部、底部、左侧或右侧之间发生交换时，日历控件包含了一种幻灯样式的内置动画效果。你可以通过设置一个属性来指定C1Calendar的动画效果的类型。

属性生成器

日历控件包含一个可以将日历的所有元素组织成逻辑组的属性生成器，所以你可以很容易地找到你要修改的特定元素，而不需要通过在“属性”窗口中滚动属性列表。此功能是为了帮助你的程序不执行重复性任务而设计的。

本土化

日历控件支持在工作日和日历标题上的全面本土化。在工作日和标题上显示的字符串取决于你指定的语言。

快速导航

日历控件包括三种通过日历月来进行导航的方法。“上一页” 和“下一页”的导航按钮可以使你去到上一个月或下一个月。“快速向前一页”和“快速向后一页”可以让你快速前进几个月或快速后退几个月。并且弹出的日历月选择器和年选择器可以使你能够从弹出的日历中选择月份和年份。

方向

在显示多个日历时，你可能需要改变日历的方向。日历控件可以允许你水平或垂直地显示日历。

多个视图

你可以通过在多个日历视图中简单地指明月份行或列的数值来在日历范围内中显示超过一个月的。

主题

只需点击一下智能标签，你就可以通过从六个溢价主题（北极，午夜时分，雅集，火箭，钴和英镑）中选择一个来更改日历的外观。另外，还可以使用jQuery UI中的ThemeRoller来创建一个自定义的主题！

CSS支持

你可以使用这一种级联样式表（CSS）的样式来定义自定义皮肤。有了CSS支持，你可以使日历控件与你的组织标准相匹配。

CSS支持

你可以使用这一种级联样式表（CSS）的样式来定义自定义皮肤。有了CSS支持，你可以使该滑块控件与你的组织标准相匹配。

最后，和大家分享一些 Wijmo 资源：

1.源码下载（包含以上特性）:Wijmo-ProcessBar.zip

2.更多信息请参考：Wijmo 中文网站：http://www.gcpowertools.com.cn/products/c1_asp_overview.htm

3.开源Wijmo jQuery 讨论社区： http://gcdn.grapecity.com/index.aspx

allowPreview

该值用来获取或设置是否要显示预览区域。

Type: Boolean

Default: false

Code example:

$(".selector").wijcalendar({

allowPreview: false

});

allowQuickPick

该值用来获取或设置一个值，该值用来确定是否可以在点击日历标题时将视图更改为月/年/十年。

Type: Boolean

Default: true

Code example:

$(".selector").wijcalendar({

allowQuickPick: true

});

autoHide

一个布尔属性，该属性可以在日历之外进行点击操作时确定是否要在弹出的模式中自动隐藏日历。

Type: Boolean

Default: true

Code example:

$(".selector").wijcalendar({

autoHide: true

});

calendarWeekRule

该值用来定义确定一年的第一个星期的不同的规则。

Type: String

Default: ‘firstDay’

Possible values are: "firstDay", "firstFullWeek" or "firstFourDayWeek"

Code example:

$(".selector").wijcalendar({

calendarWeekRule: ‘firstDay’

});

culture

该值用来获取或设置日历控件所呈现的区域性信息。

Type: String

Default: ‘’

Code example:

$(".selector").wijcalendar({

culture: “zh-CN”

});

customizeDate

该方法用于定制 day 单元格的内容，样式和属性。

Default: null

Type: Function

Code example:

$("#selector").wijcalendar({ customizeDate: function($daycell, date, dayType, hover, preview){ } });

Parameters:

daycell - jQuery object 代表被操作的单元格。

date - 单元格的日期。

daytype – day 的类型，Number 类型。

hover - 鼠标是否悬浮在单元格上。Boolean 类型。

preview - 是否渲染预览容器。 Object 类型。

Return Type - 如果单元格属性改变则返回 true。

dayCols

该值用来获取或设置“月”视图中的列数。

Type: Number

Default: 7

Code example:

$(".selector").wijcalendar({

dayCols: 7

});

dayRows

该值用来获取或设置“月”视图中的行数。

Type: Number

Default: 6

Code example:

$(".selector").wijcalendar({

dayRows: 6}

);

direction

该值用来确定“月”的滑动方向。

Type: String

Default: ‘horizontal’

Possible values are: ‘horizontal’ or ‘vertical’

Code example:

$(".selector").wijcalendar({

direction: ‘horizontal’

});

displayDate

该值用来获取或设置第一个“月”视图中的显示日期。

Type: Date

Default: undefined

Code example:

$(".selector").wijcalendar({

displayDate: new Date('1900/01/1')

});

duration

动画持续时间（以毫秒为单位）。

Type: Number

Default: 250

Code example:

$(".selector").wijcalendar({

duration: 250

});

easing

该值用来指定过渡的动画。

Type: String

Default: ‘easeInQuad’

Code example:

$(".selector").wijcalendar({

easing: ‘easeInQuad’

});

maxDate

该值用来获取或设置用于选择的最大日期。

Type: Date

Default: new Date(2099/12/31)

Code example:

$(".selector").wijcalendar({

maxDate: new Date('2010/08/15')

});

minDate

该值用来获取或设置用于选择的最小日期。

Type: Date

Default: new Date(1900/01/1)

Code example:

$(".selector").wijcalendar({

minDate: new Date('2010/08/1')

});

monthCols

该值用来获取或设置“月”视图的列数。

Type: Number

Default: 1

Code example:

$(".selector").wijcalendar({

monthCols: 1

});

monthRows

该值用来获取或设置“月”视图的行数。

Type: Number

Default: 1

Code example:

$(".selector").wijcalendar({

monthRows: 1

});

navButtons

该值用来确定导航按钮的显示类型。

Type: String

Default: 'default'

Note: This option can’t be used when the monthRows or monthCols option is greater than 1.

Code example:

$(".selector").wijcalendar({

navButtons: 'quick'

});

nextPreviewTooltip

该值用来获取或设置下一页或前一页按钮的工具提示字符串。

Type: String

Default: ''

Code example:

$(".selector").wijcalendar({

nextPreviewTooltip: 'hello world'

});

nextTooltip

该值用来获取或设置为下一页导航按钮显示的工具提示字符串。

Type: String

Default: 'Next'

Code example:

$(".selector").wijcalendar({

nextTooltip: ‘Previous’

});

popupMode

该值用来确定日历是否处于弹出模式。

Type: Boolean

Default: false

Code example:

$(".selector").wijcalendar({

popupMode: false

});

prevPreviewTooltip

该值用来获取或设置前一页预览按钮的工具提示字符串。

Type: String

Default: ''

Code example:

$(".selector").wijcalendar({

prevPreviewTooltip: 'hello world'

});

prevTooltip

该值用来获取或设置前一页导航按钮的工具提示字符串。

Type: String

Default: 'Previous'

Code example:

$(".selector").wijcalendar({

prevTooltip: ‘Previous’

});

quickNavStep

该值用来获取或设置在点击快速导航按钮之后要交换的月数。

Type: Number

Default: 12

Note: This option can’t be used when the monthRows or monthCols option is greater than 1.

Code example:

$(".selector").wijcalendar({

quickNavStep: 12

});

quickNextTooltip

该值用来获取或设置下一页快速导航按钮的工具提示字符串。

Type: String

Default: 'Quick Next'

Code example:

$(".selector").wijcalendar({

quickNextTooltip: 'Quick Next'

});

quickPrevTooltip

该值用来获取或设置前一页快速导航按钮的工具提示字符串。

Type: String

Default: 'Quick Previous'

Code example:

$(".selector").wijcalendar({

quickPrevTooltip: 'Quick Previous'

});

selectionMode

该值用来确定选择模式。

Type: hash

Default: {day:true, days:true}

Possible fields in hash are: day, days, weekDay, weekNumber, month.

Code example:

$(".selector").wijcalendar({

selectionMode:{day:true, days:true}

});

showDayPadding

该值用来确定是否要将零添加到只有一位数的天数。

Type: Boolean

Default: false

Code example:

$(".selector").wijcalendar({

showDayPadding: true

});

showOtherMonthDays

该值用来确定是否要显示在“月”视图中属于其他月份的天。

Type: Boolean

Default: true

Code example:

$(".selector").wijcalendar({

showOtherMonthDays: true

});

showTitle

一个布尔属性，该属性可以确定是否要显示日历标题。

Type: Boolean

Default: true

Code example:

$(".selector").wijcalendar({

showTitle: true

});

showWeekDays

该值用来确定是否要显示工作日。

Type: Boolean

Default: true

Code example:

$(".selector").wijcalendar({

showWeekDays: true

});

showWeekNumbers

该值用来确定是否要显示周数。

Type: Boolean

Default: true

Code example:

$(".selector").wijcalendar({

showWeekNumbers: true

});

titleFormat

该值用来获取或设置标题文本的格式。

Type: String

Default: "MMMM yyyy"

Code example:

$(".selector").wijcalendar({

titleFormat: "MMMM-yyyy"});

toolTipFormat

该值用来确定鼠标滑过日历中的天时工具提示的日期格式。

Type: String

Default: 'dddd, MMMM dd, yyyy'

Code example:

$(".selector").wijcalendar({

toolTipFormat: 'dddd, MMMM dd, yyyy'

});

weekDayFormat

该值用来获取或设置周标题的显示格式。

Type: String

Default: 'short'

Code example:

$(".selector").wijcalendar({

weekDayFormat: ‘firstLetter’

});

Events

afterSelect

在一个日期被选定之后发生。

Default: null.

Type: Function.

Parameters:

e - Type is "Object. jQuery.Event object.

args - Type is "Object". The data with this event. args.date: The selected date.

Code example:

$("#element").wijcalendar({ afterSelect: function (e, args) { } });

afterSlide

在“月”视图滑动之后发生。

Default: null

Type: Function

Parameter: e - Type is "Object. jQuery.Event object.

Code example:

$("#element").wijcalendar({ afterSlide: function (e) { } });

beforeSelect

在选择一个日期之前发生。

Default: null.

Type: Function.

Parameters:

e - Type is "Object". jQuery.event object.

args - Type is "Object". The data with this event. args.date: The date to be selected.

Code example:

$("#element").wijcalendar({ beforeSelect: function (e, args) { } });

beforeSlide

在“月”视图滑动之前发生。

Default: null

Type: Function.

Code example:

$("#element").wijcalendar({ beforeSlide: function (e) { } });

selectedDatesChanged

在选定的日期集合发生改变时发生。

Default: null.

Type: Function.

Parameters:

e - Type is "Object. jQuery.Event object.

args - Type is "Object. The data with this event. args.dates: The array with all of the selected date objects.

Code example:

$("#element").wijcalendar({ selectedDatesChanged: function (e, args) { } });

title

一个回调方法，用于设置月视图的标题。

Default: null

Type: Function

Parameters:

date - Type is "Date". The display date of the month.

format - Type is "String". The title format. Determined by the options.

Return type: Type is "String". The customized title text.

Code example:

$("#element").wijcalendar({ title: function (e) { } });

Methods

close

如果允许弹出，则关闭当前弹出日历。

getDisplayDate

获取当前展示的有效日期。

getSelectedDate

获取当前选择日期。

isPopupShowing

设置是否支持弹出模式。

popup(position)

使日历在特定位置弹出。

Parameter:

position - The position object accepts the jQuery Position plugin. Please see http://jqueryui.com/demos/position/ for details on this parameter.

popupAt(x,y)

使日历在特定位置弹出。

Parameters: The popupAt property accepts the following parameters:

X – The X offset. This will be the horizontal position.

Y – the Y offset. This will be the vertical position.

refresh

刷新日历。

refreshDate(date)

刷新某一天。

Parameter:

date – the date to be refreshed.

selectDate(date)

选择特定日期。

Parameter:

date – The date to be selected.

unSelectAll

取消所有选择。

unSelectDate(date)

取消选择某天。

Parameter:

date – the date to be removed from the selectedDates collection.