2010年11月11日 星期四

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

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

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

接下來解釋一下事件。(以下為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 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 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 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 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)*/
_calendarSelectHandler = function (type, args, obj) {
    conlose.log(type);    //    目前事件的行為{String}
    var dates = args[0],    //    日期型態物件
        date = dates[0];    //    取得日期資料
        
    conlose.log(date[0], date[1], date[2]);    //輸出資料為 year, month, day
};

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

calendar執行事件(當月份切換也會執行此事件)
_calendarRenderHandler = function (arg1, arg2, obj) {
    //    arg1, arg2, obj = cal <-指的就是calendar 本身
};

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

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

沒有留言:

張貼留言

Facebook