一款可显示价格的酒店入住离店日历选择代码,除了自由选择日历时间段外,还可以通过上面的按钮来切换不同的选项内容,显示对应日期有无房间、价格、剩余房间的信息,整体功能还是比较使用的,喜欢的童鞋请收下吧。
页面的head部分,先简单设置演示页面的样式,代码如下:
body{padding:0;margin:0 10px;}
.title{padding:0;margin:10px 0;font:700 18px/1.5 \5fae\8f6f\96c5\9ed1;}
.title em{font-style:normal;color:#C00;font-size:14px;}
.title a{font:400 14px/1.5 Tahoma;}
.example{margin-top:10px;}
.example button{margin:0 5px 10px 0;}
接着远程调用yui-min.js文件,配置日历插件设置相关参数,代码如下:
<script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script>
<script type="text/javascript">
var config = {
modules: {
'price-calendar': {
fullpath: 'js/price-calendar.js',
type : 'js',
requires: ['price-calendar-css']
},
'price-calendar-css': {
fullpath: 'css/price-calendar.css',
type : 'css'
}
}
};
YUI(config).use('price-calendar', 'jsonp', function(Y) {
var sub = Y.Lang.sub;
var url = 'http://fgm.cc/learn/calendar/price-calendar/getData.asp?minDate={mindate}&maxDate={maxdate}&callback={callback}';
//价格日历实例
var oCal = new Y.PriceCalendar();
//点击确定按钮
oCal.on('confirm', function() {
alert('入住时间:' + this.get('depDate') + '\n离店时间:' + this.get('endDate'));
});
//点击取消按钮
oCal.on('cancel', function() {
this.set('depDate', '').set('endDate', '').render();
});
Y.one('#J_Example').delegate('click', function(e) {
var that = this,
oTarget = e.currentTarget;
switch(true) {
//设置日历显示个数
case oTarget.hasClass('J_Count'):
this.set('count', oTarget.getAttribute('data-value')).render();
break;
//时间范围限定
case oTarget.hasClass('J_Limit'):
this.set('data', null)
.set('depDate', '')
.set('endDate', '')
.set('minDate', '')
.set('afterDays', oTarget.getAttribute('data-limit'));
if(!oTarget.hasAttribute('data-date')) {
this.set('date', new Date())
}
else {
var oDate = oTarget.getAttribute('data-date');
this.set('minDate', oDate);
this.set('date', oDate);
}
oTarget.ancestor().one('.J_RoomStatus') ?
oTarget.ancestor().one('.J_RoomStatus').setContent('\u663e\u793a\u623f\u6001').removeClass('J_Show') :
oTarget.ancestor().append('<button class="J_RoomStatus">\u663e\u793a\u623f\u6001</button>');
break;
//异步拉取酒店数据
case oTarget.hasClass('J_RoomStatus'):
oTarget.toggleClass ('J_Show');
if(oTarget.hasClass('J_Show'))
Y.jsonp(
sub(url, {
mindate:this.get('minDate'),
maxdate:this.get('maxDate')
}),
{
on: {
success: function(data) {
that.set('data', data);
oTarget.setContent('\u9690\u85cf\u623f\u6001')
}
}
}
);
else {
this.set('data', null);
oTarget.setContent('\u663e\u793a\u623f\u6001');
}
break;
}
}, 'button', oCal);
});
</script>
页面的body部分,多个button作为多个选项的触发按钮,代码如下:
<h1 class="title">可显示价格的酒店入住离店日历选择代码<em>(限定范围后可异步加载房态信息)</em><a href="api.html" target="_blank">API文档</a></h1>
<div id="J_Example" class="example">
<button class="J_Count" data-value="1">单日历</button>
<button class="J_Count" data-value="2">双日历</button>
<button class="J_Count" data-value="3">三日历</button>
<br />
<button class="J_Limit" data-limit="90">限定范围(今天->90天)</button>
<button class="J_Limit" data-limit="60" data-date="2017-06-01">指定日历时间并限定范围(2012年06月1号->60天)</button>
</div>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791