zoukankan      html  css  js  c++  java
  • 不得不爱开源 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>

    特性

    选择模式

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

    clip_image002

    月预览

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

    clip_image004

    动画

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

    属性生成器

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

    本土化

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

    快速导航

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

    clip_image006

    方向

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

    多个视图

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

    clip_image008

    主题

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

    clip_image010

    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

    wijprogressbar API 介绍:(点击隐藏 API)
    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:

    1

    $("#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.
  • 相关阅读:
    Sum Root to Leaf Numbers 解答
    459. Repeated Substring Pattern
    71. Simplify Path
    89. Gray Code
    73. Set Matrix Zeroes
    297. Serialize and Deserialize Binary Tree
    449. Serialize and Deserialize BST
    451. Sort Characters By Frequency
    165. Compare Version Numbers
    447. Number of Boomerangs
  • 原文地址:https://www.cnblogs.com/C1SupportTeam/p/2757705.html
Copyright © 2011-2022 走看看