本文實例講述了javascript實現的淘寶旅行通用日歷組件用法。分享給大家供大家參考。
在線演示：http://demo.VeVB.COm/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) { /** * 非彈出式日歷實例 * 直接將日歷插入到頁面指定容器內 */ 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 >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">顯示節假日</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>希望本文所述對大家的javascript程序設計有所幫助。
新聞熱點
疑難解答
