JavaプログラマーのJavaScript学習ノート(14-拡張jQuery UI)

9941 ワード

JavaScript 日とともに積み重なるメモ

このノートは次の順序で作成される予定です.

JavaプログラマーのJavaScript学習ノート(1-コンセプト)

JavaプログラマーのJavaScript学習ノート(2-属性コピーと継承)

JavaプログラマーのJavaScript学習ノート(3-this/call/apply)

JavaプログラマーのJavaScript学習ノート(4-this/閉パッケージ/getter/setter)

JavaプログラマーのJavaScript学習ノート(5-prototype)

JavaプログラマーのJavaScript学習ノート(6-オブジェクトシミュレーション向け)

JavaプログラマーのJavaScript学習ノート(7-jQuery基本メカニズム)

JavaプログラマーのJavaScript学習ノート(8-jQueryセレクタ)

JavaプログラマーのJavaScript学習ノート(9-jQueryツールメソッド)

JavaプログラマーのJavaScript学習ノート(10-jQuery-「クラス」レベルで拡張)

JavaプログラマーのJavaScript学習ノート(11-jQuery-「オブジェクト」レベルで拡張)

JavaプログラマーのJavaScript学習ノート(12-jQuery-拡張セレクタ)

JavaプログラマーのJavaScript学習ノート(13-jQuery UI)

JavaプログラマーのJavaScript学習ノート(14-拡張jQuery UI)

これはノートの第14編で、今日は前編に加えてEasyuiを拡張します.
これはノートの最後の1編で、次の計画は:移動端html+css+javascriptを勉強します.
学習方法は、例を作ることで、よりダイナミックで効果的です.
現在のアイデアは、微信のインタフェースを1つずつ実現し、ページ効果とスタイルをできるだけ近づけることです.
ページの性能の蓄積は多くなくて、後で特別テーマの学習、今回は先に考慮しません.

        ：http://blog.csdn.net/stationxp   
        ：http://weibo.com/liuhailong2008

回本題.
1ターゲット
Webコントロールを作成し、機能を実現します.このシリーズのノートのディレクトリを表示します.
コントロールの使用方法:


$('#p').hailongjsnote();

支持属性：sort——asc正序，desc倒叙。
支持方法：getCount 得到条数。
事件： preload 和 loaded。
形如：


$('#p').hailongjsnote('option','sort','desc');
var cnt = $('#p').hailongjsnote('getCount');

$('#p').hailongjsnote('on','loaded',function(event,notes){
    //
});

2 逐个开发功能

2.1 先显示出来

文件列表：
jquery.hailongjsnote.js
hailongjsnote.css -- 可能用不到，我不倾向在组件中将样式写死
demo.html
还有：
jquery.min.js
jquery.parser.js

实现基本功能，代码如下：

/**
 * hailongjsnote
 *      author : liuhailong
 *   date   : 2014-10-28
 * Dependencies:
 *   jquery.mini.js / jquery.js            
 *      jquery.parser.js
 */
(function($){
    
    function init(target){
        $(target).addClass('hailongjsnote');
        $(target).html('');
        return $(target);
    }
    
    function setContent(target,notes){
        var item , htm = '';
        for(var idx = 0; idx < notes.length; ++idx){
                item = notes[idx];
                htm += ''+item.title+'';
        }
        $(target).find('ul').html(htm);
    }
    
    $.fn.hailongjsnote = function(options, param){
        if (typeof options == 'string'){
            var method = $.fn.hailongjsnote.methods[options];
            if (method){
                return method(this, param);
            }
        }
        
        options = options || {};
        return this.each(function(){
            var state = $.data(this, 'hailongjsnote');
            if (state){
                $.extend(state.options, options);
            } else {
                state = $.data(this, 'hailongjsnote', {
                    options: $.extend({}, $.fn.hailongjsnote.defaults, $.fn.hailongjsnote.parseOptions(this), options),
                    jsnote: init(this),
                    notes : $.fn.hailongjsnote.getNotes()
                });
            }
            setContent(this,state.notes);
        });
    };
    
  $.fn.hailongjsnote.parseOptions = function(target){
        return $.extend({}, $.parser.parseOptions(target, ['width','height','sort','click']));
    };
    
    $.fn.hailongjsnote.getNotes = function(){
        return [
            {    sn:1,
                title:'Java    JavaScript    （1——  ） ',
                href:'http://blog.csdn.net/stationxp/article/details/40020009'
            },{
                sn:2,
                title:'Java    JavaScript    （2——       ） ',
                href:'http://blog.csdn.net/stationxp/article/details/40068345'
            },{
                sn:3,
                title:'Java    JavaScript    （3——this/call/apply） ',
                href:'http://blog.csdn.net/stationxp/article/details/40130687'
            },{
                sn:4,
                title:'Java    JavaScript    （4——this/  /getter/setter） ',
                href:'http://blog.csdn.net/stationxp/article/details/40146441'
            },{
                sn:5,
                title:'Java    JavaScript    （5——prototype） ',
                href:'http://blog.csdn.net/stationxp/article/details/40205967'
            },{
                sn:6,
                title:'Java    JavaScript    （6——      ） ',
                href:'http://blog.csdn.net/stationxp/article/details/40264845'
            },{
                sn:7,
                title:'Java    JavaScript    （7——jQuery    ） ',
                href:'http://blog.csdn.net/stationxp/article/details/40384477'
            },{
                sn:8,
                title:'Java    JavaScript    （8——jQuery   ） ',
                href:'http://blog.csdn.net/stationxp/article/details/40476959'
            },{
                sn:9,
                title:'Java    JavaScript    （9——jQuery    ） ',
                href:'http://blog.csdn.net/stationxp/article/details/40480185'
            },{
                sn:10,
                title:'Java    JavaScript    （10——jQuery- “ ”    ） ',
                href:'http://blog.csdn.net/stationxp/article/details/40492735'
            },{
                sn:11,
                title:'Java    JavaScript    （11——jQuery- “  ”    ） ',
                href:'http://blog.csdn.net/stationxp/article/details/40497837'
            },{
                sn:12,
                title:'Java    JavaScript    （12——jQuery-     ） ',
                href:'http://blog.csdn.net/stationxp/article/details/40501123'
            },{
                sn:13,
                title:'Java    JavaScript    （13——jQuery UI） ',
                href:'http://blog.csdn.net/stationxp/article/details/40534209'
            },{
                sn:14,
                title:'Java    JavaScript    （14——  jQuery UI） ',
                href:'http://blog.csdn.net/stationxp/article/details/40535073'
            }
        ];
    }
    
    $.fn.hailongjsnote.defaults = {
        width: '500px'
    };
})(jQuery);

2.2 加 sort 标签属性

实现：
修改setContent代码即可：

function setContent(target,notes){
        var item , htm = '';
        var opts = $.data(target, 'hailongjsnote').options;//opts       
        if('desc' == opts.sort){
                for(var idx = notes.length-1; idx >=0; --idx){
                        item = notes[idx];
                        htm += ''+item.title+'';
                }
        }else{
                for(var idx = 0; idx < notes.length; ++idx){
                        item = notes[idx];
                        htm += ''+item.title+'';
                }
        }
        $(target).find('ul').html(htm);
}

2.3 jsにsort属性$('#p')を加える.hailongjsnote('option','sort','desc');
hailongjsnote関数は、複数のパラメータをサポートするために定義を変更する必要があります.argumets,typeofで実現することが望ましいです.

    $.fn.hailongjsnote = function(options, param,param2){
        if (typeof options == 'string'){
            var method = $.fn.hailongjsnote.methods[options];
            if (method){
                return method(this, param,param2);
            }
        }

は、次のコード実装を追加します.

   $.fn.hailongjsnote.methods = {
        //$('#p').hailongjsnote('option','sort','desc');
        option: function(jq,opt,param){
            var state = $.data(jq[0], 'hailongjsnote');
            var opts =  state.options;
            if(param === undefined ){//         
                    if(opt){
                            //           
                            return opts[opt];    
                    }
            }else{
                    //      ，         
                    if(opt){
                            opts[opt] = param; //            ？
                            if(opt=='sort'){
                                    setContent(jq,state.notes);
                            }
                    }
            }
        }
    };

2.4増加方法var cnt=$('#p').hailongjsnote('getCount');
追加方法:

    $.fn.hailongjsnote.methods = {
        getCount : function(jq){
                var state = $.data(jq[0], 'hailongjsnote');
                var notes = state.notes;
                return notes && notes.length ? notes.length : 0;
        }
    };

2.5 2つのイベント

//         
    function setContent(target,notes){
        var opts = $.data(target, 'hailongjsnote').options;
        var preload = opts['preload'];
        var loaded = opts['loaded'];
        notes = preload && preload(notes);
        var item , htm = '';
        ...
        $(target).find('ul').html(htm);
        loaded && loaded(htm);
    }

基本的に終わり、細部をゆっくりと推敲します.
学は果てしなくて、引き続き努力します!

jQuery共通コード

jQuery開発ノート(一)