javascript實現的淘寶旅行通用日歷組件用法實例

2024-05-06 16:24:15

字體：大中小

來源：轉載

供稿：網友

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

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

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) {

/**

* 非彈出式日歷實例

* 直接將日歷插入到頁面指定容器內

*/

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) {

//日歷個數

case oTarget.hasClass('J_Count'):

this.set('count', value).render();

break;

//顯示節假日

case oTarget.hasClass('J_showHoliday'):

this.set('isHoliday', true).render();

break;

//隱藏節假日

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 href="http://fgm.cc/learn/calendar/trip-calendar/Demo1.html">Demo1</a><a href="http://fgm.cc/learn/calendar/trip-calendar/Demo2.html">Demo2</a><a href="http://fgm.cc/learn/calendar/trip-calendar/Demo3.html">Demo3</a><a href="http://fgm.cc/learn/calendar/trip-calendar/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>

<button class="J_Count" data-value="4">四日歷</button>

<br />

<button class="J_showHoliday">顯示節假日</button>

<button class="J_hideHoliday">隱藏節假日</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>