javascript實現(xiàn)的淘寶旅行通用日歷組件用法實例

更新時間：2015年08月03日 09:42:58 作者：Ferris

這篇文章主要介紹了javascript實現(xiàn)的淘寶旅行通用日歷組件,以實例形式分析了該日歷組件的相關(guān)設(shè)置及使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了javascript實現(xiàn)的淘寶旅行通用日歷組件用法。分享給大家供大家參考。

在線演示：http://demo.jb51.net/js/2015/trip-calendar/demo.html

PS：下面的演示代碼，需要用到 trip-calendar.js與trip-calendar.css文件。打包下載地址

具體如下：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="angtian">
<meta name="description" content="淘寶旅行通用日歷組件Demo1">
<meta name ="keywords" content="日歷, 日歷組件, 淘寶旅行日歷">
<title>淘寶旅行通用日歷組件Demo1</title>
<style>
body{padding:0;margin:0 10px;text-align:center;}
.title{padding:0;margin:10px 0;font:700 18px/1.5 \5fae\8f6f\96c5\9ed1;}
.title a{font:400 14px/1.5 Tahoma;margin-left:20px;}
.example{margin-top:10px;}
.example button{margin:0 5px 10px 0;}
.calendar{display:inline-block;}
</style> 
<script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script>
<script>
var root = 'http://fgm.cc/learn/calendar/trip-calendar/';
YUI({
 modules: {
 'trip-calendar': {
 fullpath: root + 'trip-calendar.js',
 type : 'js',
 requires: ['trip-calendar-css']
 },
 'trip-calendar-css': {
 fullpath: root + 'trip-calendar.css',
 type : 'css'
 }
 }
}).use('trip-calendar', function(Y) {
 /**
 * 非彈出式日歷實例
 * 直接將日歷插入到頁面指定容器內(nèi)
 */
 var oCal = new Y.TripCalendar({
 container : '#J_Calendar', //非彈出式日歷時指定的容器（必選）
 selectedDate: new Date //指定日歷選擇的日期
 });
 //日期點擊事件
 oCal.on('dateclick', function() {
 var selectedDate = this.get('selectedDate');
 alert(selectedDate + '\u3010' + this.getDateInfo(selectedDate) + '\u3011');
 });
 Y.one('#J_Example').delegate('click', function(e) {
 var oTarget = e.currentTarget;
 value = oTarget.getAttribute('data-value');
 switch(true) {
 //日歷個數(shù)
 case oTarget.hasClass('J_Count'):
 this.set('count', value).render();
 break;
 //顯示節(jié)假日
 case oTarget.hasClass('J_showHoliday'):
 this.set('isHoliday', true).render();
 break;
 //隱藏節(jié)假日
 case oTarget.hasClass('J_hideHoliday'):
 this.set('isHoliday', false).render();
 break;
 //時間范圍限定
 case oTarget.hasClass('J_Limit'):
 this.set('minDate', new Date)
  .set('maxDate', '')
  .set('afterDays', value)
  .set('date', new Date());
 break;
 //指定初始日期
 case oTarget.hasClass('J_InitDate'):
 this.set('minDate', value)
  .set('maxDate', '2012-12-21')
  .set('date', value);
 break;
 //下拉表單選擇時間
 case oTarget.hasClass('J_Select'):
 this.set('isSelect', true).render();
 Y.all('.J_Count').slice(1).set('disabled', true);
 break;
 //取消下拉表單選擇
 case oTarget.hasClass('J_SelectOff'):
 this.set('isSelect', false).render();
 Y.all('.J_Count').slice(1).set('disabled', false);
 break;
 }
 }, 'button', oCal);
});
</script>
</head>
<body>
<h1 class="title">淘寶旅行通用日歷組件Demo1 <a >Demo1</a><a >Demo2</a><a >Demo3</a><a  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>
 <button class="J_Count" data-value="4">四日歷</button>
 <br />
 <button class="J_showHoliday">顯示節(jié)假日</button>
 <button class="J_hideHoliday">隱藏節(jié)假日</button>
 <br />
 <button class="J_Limit" data-value="90">限定范圍（今天->90天）</button>
 <button class="J_InitDate" data-value="2012-10-01">指定初始日期（2012年10月）</button>
 <button class="J_InitDate" data-value="">取消范圍限定</button>
 <br />
 <button class="J_Select">下拉表單選擇時間</button>
 <button class="J_SelectOff">取消下拉表單選擇</button>
</div>
<div id="J_Calendar" class="calendar"></div>
</body>
</html>

希望本文所述對大家的javascript程序設(shè)計有所幫助。

您可能感興趣的文章: