Java程式猿JavaScript學習筆記（14——擴大jQuery UI）

標籤：

計劃和完成這個例子中，音符的順序如下：

1. Java程式猿的JavaScript學習筆記（1——理念）
2. Java程式猿的JavaScript學習筆記（2——屬性複製和繼承）
3. Java程式猿的JavaScript學習筆記（3——this/call/apply）
4. Java程式猿的JavaScript學習筆記（4——this/閉包/getter/setter）
5. Java程式猿的JavaScript學習筆記（5——prototype）
6. Java程式猿的JavaScript學習筆記（6——物件導向類比）
7. Java程式猿的JavaScript學習筆記（7——jQuery基本機制）
8. Java程式猿的JavaScript學習筆記（8——jQuery選取器）
9. Java程式猿的JavaScript學習筆記（9——jQuery工具方法）
10. Java程式猿的JavaScript學習筆記（10——jQuery-在“類”層面擴充）
11. Java程式猿的JavaScript學習筆記（11——jQuery-在“對象”層面擴充）
12. Java程式猿的JavaScript學習筆記（12——jQuery-延伸選取器）
13. Java程式猿的JavaScript學習筆記（13——jQuery UI）
14. Java程式猿的JavaScript學習筆記（14——擴充jQuery UI）

這是筆記的第14篇。今天我們在上一篇的基礎上，擴充Easyui。
這是筆記的最後一篇，接下來的計劃是：學習下移動端html+css+javascript。
學習方法是：做範例，這樣更有動力也更有成效。
如今的想法是逐個實現的介面，頁面效果和風格盡量貼近。
頁面效能積累不多。以後專題學習，這次先不考慮。

    作者部落格：http://blog.csdn.net/stationxp       作者微博：http://weibo.com/liuhailong2008        轉載請取得作者允許 

回正題。

1 目標
做一個web控制項。實現功能：顯示此系列筆記的檔案夾。

控制項用法：

<p id='p'></p>$('#p').hailongjsnote();

支援屬性：sort——asc正序，desc倒敘。
支援方法：getCount 得到條數。
事件：      preload 和 loaded。

形如：

<p id='p' sort='asc'></p>$('#p').hailongjsnote('option','sort','desc');var cnt = $('#p').hailongjsnote('getCount');<p id='p' preload='func();'></p>$('#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('<ul class="jsnote-list"></ul>');        return $(target);    }        function setContent(target,notes){        var item , htm = '';        for(var idx = 0; idx < notes.length; ++idx){                item = notes[idx];                htm += '<li><a href="'+item.href+'">'+item.title+'</a></li>';        }        $(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 標籤屬性 <p id=‘p‘ sort=‘asc‘></p>
實現：
改動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 += '<li><a href="'+item.href+'">'+item.title+'</a></li>';                }        }else{                for(var idx = 0; idx < notes.length; ++idx){                        item = notes[idx];                        htm += '<li><a href="'+item.href+'">'+item.title+'</a></li>';                }        }        $(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 兩個事件

// 下面代碼未經調試    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);    }

基本搞定，詳細資料，然後慢慢推敲。

終身學習，保持。

著作權聲明：本文部落格原創文章。部落格，未經同意，不得轉載。

Java程式猿JavaScript學習筆記（14——擴大jQuery UI）