jqueryプラグインを自分でカプセル化

まず.extend、.e x t e n d、.dataの2つの関数について説明する.extendと継承、主にデータの組み立て、使用方式に用いる.e x t e n dと継承、主にデータの組み立て、使用方式に用いる.extend({},param 1,param 2);このとき得られるデータはparam 1がparam 2のデータを継承するものであり、param 1にあるデータparam 2にもparam 2があるとparam 1の同じデータを上書きするため、2つのパラメータの順序が乱れてはならない.dataは、ある属性を設定および取得するためのパラメータ値である.パラメータ値を設定する.d a t aは、ある属性を設定および取得するためのパラメータ値である.data(「セレクタ」,「属性名」,{キー:値})または(セレクタ).data(name,value)は値(セレクタ).d a t a(n a m e,v a l u e)は値をとる.data(「セレクタ」,「属性名」).キー名,(「セレクタ」).data(name),(「セレクタ」).d a t a(n a m e),(「セレクタ」).data()取得すべての値は、バックグラウンド取得データで組み立てられたドロップダウンボックスを例にとる

(function($){
    /**    ，jquery      */
    $.fn.select=function(options,param){
        if(typeof options == "string"){
            var method = $.fn.select.methods[options];
            if(method){ return method(this,param); }
        } 
    }
    /**      */
    $.fn.select.methods={
        onLoadSuccess: function(){},
        onSelect: function(record){},
        loadData: function(jq, data){
            return jq.each(function(){ loadData(this, data); });
        },
        reload: function(jq, ajax){
            return jq.each(function(){ request(this, ajax); });
        },
        setValue: function(jq, value){
            return jq.each(function(){ setValue(this, value); });
        }
    }
    /**         */
    $.fn.select3.defaults = {
        id: null,
        disabled: false,
        //url:base_url+'/select/getSelectProj',
        dataType:'json',
        type:'GET',
        //contentType:'application/json',
        valueField: 'uuid',
        textField: 'name',
        onLoadSuccess: function(data){},//           
        onLoadError: function(err){},
        onSelect:function(row){}//         
    };
        /**    */
    function request(target, options){
        var opts = $.data(target, 'select3').options;
        if (options.url){
            opts = $.extend(opts, options);
        }else{
            return;
        }
        $.ajax({ url : opts.url, type : opts.type, data : opts.param, //dataType : opts.dataType, contentType : opts.contentType, success:function(data){ loadData(target, data); }, error:function(){ opts.onLoadError.apply(this, arguments); } })
    };
    /**    */
    function loadData(target, data){
        var rows = data.rows;
        var opts = $.data(target, 'select3').options;
        $(target).empty();
        for(var i=0,j=rows.length; i
            var item = $('').appendTo(target);
            item.attr('value', rows[i][opts.valueField]);
            item.html(rows[i][opts.textField]);
        }

        opts.onLoadSuccess.call(target, data);//           
        $(target).change(function(){ var itemValue = $(this).children('option:selected').val(); for(var i=0,j=rows.length; i if (rows[i][opts.valueField] == itemValue){ opts.onSelect.call(target, rows[i]); return; } } }); }; /**   */ function setValue(target, value){ var opts = $.data(target, 'select3').options; $(target).val(value); }; })(jQuery)

リファレンスプラグインはまずプラグインを導入し、初期化します.

<script src="select.js">script>
<script language="javascript">
    //    
    $("#id").select({
        url:,
        onLoadSuccess:function(){
        }
    });
    //       
    $("#id").("reload",{  });
script>