讓我們像使用easyui組件一樣使用My97DatePicker

jQuery easyuiWrapMy97DatePicker Plugin DOC & Dome

功能：
使 My97DatePicker 能夠像easyui組件那樣可以通過css類名(.easyui-pluginName)進行組件注冊，以及通過data-options進行組件配置

說明：
只是借鑒了easyui組件的注冊方式和配置方式，其實跟easyui沒任何關系；此外本插件並沒有劫持或修改My97DatePicker，如果需要，你仍可以采用原生的方式來使用My97DatePicker；說白了，本插件就只是提供了一種“語法糖”，使你可以像使用easyui組件一樣來使用My97DatePicker。

使用方法

引入依賴和插件：

<script src="http://cdn.staticfile.org/jquery/1.11.0/jquery.min.js"></script><!-- jQuery 1.7+ -->

<script src="My97DatePicker/WdatePicker.js"></script>

<script src="jquery.easyuiWrapMy97DatePicker.js"></script>

示例零：

< input class="easyui-my97DatePicker" type="text" />

示例一：

< input class="easyui-my97DatePicker" data-options="dateFmt:'yyyy年M月d日'" type="text" />

示例二：

< input id="datePicker" type="text" />

<script>     $('#datePicker').easyuiWrapMy97DatePicker({ skin: 'default' }) ;    </script>

示例三：

< input class="easyui-my97DatePicker Wdate" data-options="dateFmt:'yyyy年M月d日', onpicked: handlePicked" type="text" />

<script>      function handlePicked() { alert('呵呵') }      </script>

進階

My97DatePicker的官方文檔中關於全局配置的說明：

通過配置WdatePicker.js的屬性可以避免每次調用都傳入配置值,為編程帶來很多方便. 在默認情況下My97為每個屬性都配置了默認值,這些默認值都可以在WdatePicker.js中修改的 你可以根據你個人的喜好更改這些值

比如你比較不喜歡默認的皮膚default 而更喜歡 whyGreen 這個皮膚, 你可以直接在WdatePicker.js把skin值改為 whyGreen 這樣,你就不必每次調用控件的時候都傳入 skin:'whyGreen' 了

可見My97DatePicker的全局配置需要通過修改源碼才能實現！為此本插件提供了一種無害的方式來實現My97的全局配置，無需修改源碼。具體用法就是將 【一個javascript對象字面量形式的配置】 置於 【引入本插件的script標簽】中。示例：

<script src="jquery.easyuiWrapMy97DatePicker.js"> { skin: 'whyGreen', dateFmt: 'yyyy-MM-dd' } </script>

注意：獲取配置嵌入的script標簽，本插件是通過匹配該標簽的src屬性值來實現的，如果你修改了本插件的js文件名稱，則需要修改本插件源碼中用於匹配src的正則：

srcReg = /easyuiWrapMy97DatePicker\. js/

插件源碼：

 

/*!
 * jQuery easyuiWrapMy97DatePicker Plugin v1.0
 * 功能：使 My97DatePicker 能夠像easyui組件那樣
         可以通過css類名(.easyui-pluginName)實現組件注冊，
         以及通過data-options進行組件配置；
         說白了就是提供一種“語法糖”，僅此而已
 * Author: Jim
 * Date: 2014-04-15
 * Doc&Dome: http://www.cnblogs.com/MyNameIsJim/articles/3669989.html
 */

;(function($, datePicker){


// 全局配置
var setup = (function () {
    var scripts = document.getElementsByTagName('script'),
        script = null,
        srcReg = /easyuiWrapMy97DatePicker\.js/;

    for (var i = 0, len = scripts.length; i < len; i++) {
        var myScript = scripts[i];

        if ( srcReg.test(myScript.src) ) {
            script = myScript;
        }
    }

    /* 
     * 如果在頁面中引入本插件時，路徑沒有包含 'easyuiWrapMy97DatePicker.js'，即文件被更名了，
     * 那么選擇當前正在運行的js代碼所屬的script標簽 (如果該js文件是采用模塊化加載的，這不是有效的方法)
     */
    script || (script = scripts[len - 1]); 
    var config = (new Function('return ' + $.trim(script.text)))();

    return (config && config.toString() === '[object Object]') ? config : null;
}());

// 單個控件的配置
function parseOptions($target) {
    var options = null,
        s = $.trim( $target.attr('data-options') );

    if (s !== ''){
        if (s.substring(0, 1) != '{'){
            s = '{' + s + '}';
        }
        options = (new Function('return ' + s))();
    }

    return options;
}


/**
 * @options    {Object}    將作為實參傳遞給WdatePicker：WdatePicker(options)，API參照My97DatePicker：http://www.my97.net/
 * @config     {Object}    插件的配置[可選]
 */
$.fn.easyuiWrapMy97DatePicker = function(options, config) {
    var eventNamespaces = '._My97DatePicker',
        dataKey = '_My97DatePicker';

    var settings = $.extend({
        event: 'click'
    }, config);
    settings.event += eventNamespaces;

    this.each(function(){
        var elm = $(this),
            data = elm.data(dataKey),
            dataOpts = null;

        // 該元素是否已經注冊成為 “時間控件”
        if (data) {
            elm.off(eventNamespaces);
            dataOpts = $.extend(data.options, options);
        } else {
            dataOpts = $.extend({}, setup, parseOptions(elm), options); 

            elm.data(dataKey, {
                options: dataOpts
            })
        }

        elm.on(settings.event, function(){
            datePicker( dataOpts );
        });
    })

    return this;
};


}(jQuery, WdatePicker));


// parse
$(function(){
    $('.easyui-My97DatePicker, .easyui-my97DatePicker').easyuiWrapMy97DatePicker();   
});