[快快樂樂教學] YUI2 in 3 使用方法,以calendar widget 為例

YUI2 in 3 使用方法,以calendar widget 為例。

使用方法

Y.use('yui2-calendar', function (Y) { <br></br> var YAHOO,<br></br> _cal,<br></br> id = 'calContent', //指定的id<br></br> pageDate = '9/30/2010', //設定起始日期, 格式均為,月/日/年<br></br> minDate = '1/1/2010', //設定最小日期<br></br> maxDate = '12/30/2010'; //設定最大日期<br></br><br></br> YAHOO = Y.YUI2;<br></br> _cal = new YAHOO.widget.Calendar(<br></br> '_cal', <br></br> id,<br></br> {<br></br> pagedate: pageDate,<br></br> mindate: minDate,<br></br> maxdate: maxDate<br></br> }<br></br> );<br></br><br></br> // 可以設定多國語系<br></br> _cal.cfg.setProperty("MONTHS_LONG", ["Jan", "Feb", "Mar", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]);<br></br> _cal.cfg.setProperty("WEEKDAYS_SHORT", ["S", "M", "D", "M", "D", "F", "S"]);<br></br><br></br> // render 事件設定一定要在 render() 執行以前<br></br> _cal.renderEvent.subscribe(_calendarRenderHandler, _cal, true);<br></br><br></br> // 產生 calendar<br></br> _cal.render();<br></br><br></br> // 日期選取事件<br></br> _cal.selectEvent.subscribe(_calendarSelectHandler, _cal, true);<br></br> // 改變日期事件<br></br> _cal.changePageEvent.subscribe(_calendarChangeHandler, _cal, true);<br></br>});<br></br>

接下來解釋一下事件。(以下為YUI2 提供樂樂長的列表)

EventFires…Arguments
selectEvent…after a date is selected.Array of date fields representing the dates that were selected. Example: [ [2008,8,1],[2006,8,2] ]
beforeSelectEvent…when a date is selected, before processing the change.N/A
deselectEvent…after a date is deselected.Array of date fields representing the dates that were deselected. Example: [ [2008,8,1],[2006,8,2] ]
beforeDeselectEvent…when a date is deselected, before processing the change.N/A
renderEvent…after the Calendar is rendered.N/A
beforeRenderEvent…just before the Calendar is rendered.N/A
changePageEvent…when the Calendar navigates to a new month (page).The date prior to the Calendar changing pages, and the new date after changing pages
clearEvent…when the Calendar is cleared.N/A
resetEvent…when the Calendar is reset.N/A
beforeHideEvent…just before the Calendar is hidden. Returning <code style="font-family: 'Courier New'; font-size: 13px; font-style: normal; font-weight: bolder; line-height: 13px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">false from a subscriber will prevent the Calendar from being hidden.N/A
hideEvent…after the Calendar is hidden.N/A
beforeShowEvent…just before the Calendar is shown. Returning <code style="font-family: 'Courier New'; font-size: 13px; font-style: normal; font-weight: bolder; line-height: 13px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">false from a subscriber will stop the Calendar from being shown.N/A
showEvent…after the Calendar is shown.N/A
beforeShowNavEvent…just before the CalendarNavigator is shown. Returning <code style="font-family: 'Courier New'; font-size: 13px; font-style: normal; font-weight: bolder; line-height: 13px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">false from a subscriber will stop the CalendarNavigator from being shown.N/A
showNavEvent…after the CalendarNavigator is shown.N/A
beforeHideNavEvent…just before the CalendarNavigator is hidden. Returning <code style="font-family: 'Courier New'; font-size: 13px; font-style: normal; font-weight: bolder; line-height: 13px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">false from a subscriber will stop the CalendarNavigator from being hidden.N/A
hideNavEvent…after the CalendarNavigator is hidden.N/A
主要傳送的參數可以參考如下:

選取事件

/*以下為日期選取事件 (when click some date)*/<br></br>_calendarSelectHandler = function (type, args, obj) {<br></br> conlose.log(type); // 目前事件的行為{String}<br></br> var dates = args[0], // 日期型態物件<br></br> date = dates[0]; // 取得日期資料<br></br><br></br> conlose.log(date[0], date[1], date[2]); //輸出資料為 year, month, day<br></br>};<br></br>

切換月份事件

/**<br></br> * @parm type {目前行為String}, <br></br> * dates {前一頁和目前的日期array},<br></br> * obj {calendar 物件}<br></br> */<br></br>_calendarChangeHandler = function (typ, dates, obj) {<br></br> var oldDate = new Date(dates[0]), //前一頁的日期<br></br> newDate = new Date(dates[1]); //目前的日期<br></br> console.log(newDate.getMonth());<br></br>};<br></br>

calendar執行事件(當月份切換也會執行此事件)

_calendarRenderHandler = function (arg1, arg2, obj) {<br></br> // arg1, arg2, obj = cal <-指的就是calendar 本身<br></br>};<br></br>

總結:
雖然說大部分事件都是沒有傳入任何參數,不過經過測試,通常第一個參數指的是目前執行的狀態(event status),第三個參數指行事曆物件本身(obj = cal)。

以上的是我自己嘗試的結果,當然還有其他nav, calendar group等強大功能還沒來得及測試,希望如果有心的人可以繼續補足。

CaesarChi

Web developer, focus on website fullstack, special JavaScript, and love sharing developing experience and communicate with developers. http://about.me/clonn