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


このノートは次の順序で作成される予定です.
  • 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);
        }
    

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