Skip to content
酒店价格日历
JavaScript
Branch: master
Clone or download
Latest commit 66367e2 Aug 25, 2012
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
README.md 更新README.md Aug 25, 2012
api.html 修改css中图片引入地址;新增api和demo文件; Aug 25, 2012
demo.html 修改css中图片引入地址;新增api和demo文件; Aug 25, 2012
price-calendar.css 修改css文件编码 Aug 25, 2012
price-calendar.js 提交代码 Aug 23, 2012

README.md

#酒店价格日历

####基于YUI3开发的价格日历组件

@name:Y.PriceCalendar
@requires:['node', 'base-base', 'event-mouseenter']

##快速上手

####引入文件

在页面head引入YUI3.x.x种子

<script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script>

####配置

var config = {
    modules: {
        'price-calendar': {
            fullpath: 'price-calendar.js', //根据项目路径调整
            type    : 'js',
            requires: ['price-calendar-css']
        },
        'price-calendar-css': {
            fullpath: 'price-calendar.css', //根据项目路径调整
            type    : 'css'
        }
    }
};

####使用

YUI(config).use('price-calendar', function(Y) {
    var oCalendar = new Y.PriceCalendar();    
    //do something
});

##配置参数

  • ####date

    概述

    (默认值:当前日期) 日历初始日期

    类型

    {Date|String}

  • ####data

    概述

    (默认值:null) 酒店房态数据

    类型

    {Object}

     {
     	"2012-05-01": {
     		"price"  : "100",
         	"roomNum": "10"
     	},
     	"2012-05-02": {
         	"price"  : "120",
         	"roomNum": "1"
    	 	},
     	"2012-05-03": {
      	   "price"  : "150",
      	   "roomNum": "25"
     	}
     }
    
  • ####count

    概述

    (默认值:2) 日历个数

    类型

    {Number}

  • ####minDate

    概述

    (默认值:null) 允许操作的最小日期

    类型

    {Date|String}

  • ####maxDate

    概述

    (默认值:null) 允许操作的最大日期

    类型

    {Date|String}

  • ####depDate

    概述

    (默认值:空) 入住时间

    类型

    {String}

  • ####endDate

    概述

    (默认值:空) 离店时间

    类型

    {String}

  • ####afterDays

    概述

    (默认值:0) 等价于设置minDate和maxDate,minDate未设置时取当前日期

    类型

    {Number}

##接口

  • ####render()

    概述

    用于设置参数后渲染日历UI

    返回值

    日历对象,可做链式操作

  • ####prevMonth()

    概述

    渲染上月日历UI

    返回值

    日历对象,可做链式操作

  • ####nextMonth()

    概述

    渲染下月日历UI

    返回值

    日历对象,可做链式操作

##自定义事件

  • ####render

    概述

    渲染日历UI事件

    示例

     var oCalendar = new Y.PriceCalendar();
     	oCalendar.on('render', function(e) {
         	//do something
     	});
    
  • ####prevmonth

    概述

    点击上月按钮事件

    示例

     var oCalendar = new Y.PriceCalendar();
     	oCalendar.on('prevmonth', function(e) {
         	//do something
     	});
    
  • ####nextmonth

    概述

    点击下月按钮事件

    示例

     var oCalendar = new Y.PriceCalendar();
     	oCalendar.on('nextmonth', function(e) {
         	//do something
     	});
    
  • ####checkin

    概述

    点击入住日期事件

    示例

     var oCalendar = new Y.PriceCalendar();
     	oCalendar.on('checkin', function(e) {
         	//do something
     	});
    
  • ####checkout

    概述

    点击离店日期事件

    示例

     var oCalendar = new Y.PriceCalendar();
     	oCalendar.on('checkout', function(e) {
         	//do something
     	});
    
  • ####confirm

    概述

    点击确定按钮事件

    示例

     var oCalendar = new Y.PriceCalendar();
     	oCalendar.on('confirm', function(e) {
         	//do something
     	});
    
  • ####cancel

    概述

    点击取消按钮事件

    示例

     var oCalendar = new Y.PriceCalendar();
     	oCalendar.on('cancel', function(e) {
         	//do something
     	});
    

##配置参数改变事件

  • ####dateChange

    概述

    设置date参数触发事件

    示例

     var oCalendar = new Y.PriceCalendar();
     	oCalendar.on('dateChange', function(e) {
         	//do something
     	});
    
  • ####dataChange

    概述

    设置data参数触发事件

    示例

     var oCalendar = new Y.PriceCalendar();
     	oCalendar.on('dataChange', function(e) {
         	//do something
     	});
    
  • ####countChange

    概述

    设置count参数触发事件

    示例

     var oCalendar = new Y.PriceCalendar();
     	oCalendar.on('countChange', function(e) {
         	//do something
     	});
    
  • ####minDateChange

    概述

    设置minDate参数触发事件

    示例

     var oCalendar = new Y.PriceCalendar();
     	oCalendar.on('minDateChange', function(e) {
         	//do something
     	});
    
  • ####maxDateChange

    概述

    设置maxDate参数触发事件

    示例

     var oCalendar = new Y.PriceCalendar();
     	oCalendar.on('maxDateChange', function(e) {
         	//do something
     	});
    
  • ####depDateChange

    概述

    设置depDate参数触发事件

    示例

     var oCalendar = new Y.PriceCalendar();
     	oCalendar.on('depDateChange', function(e) {
         	//do something
     	});
    
  • ####endDateChange

    概述

    设置endDate参数触发事件

    示例

     var oCalendar = new Y.PriceCalendar();
     	oCalendar.on('endDateChange', function(e) {
         	//do something
     	});
    
  • ####afterDaysChange

    概述

    设置afterDays参数触发事件

    示例

     var oCalendar = new Y.PriceCalendar();
     	oCalendar.on('afterDaysChange', function(e) {
         	//do something
     	});
    
You can’t perform that action at this time.