Java程序猿JavaScript学习笔记（14——扩大jQuery UI）

2022-08-09 08:42:54

计划和完成这个例子中，音符的顺序如下：

这是笔记的第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);

    }

基本搞定，详细信息，然后慢慢推敲。

终身学习，保持。

码农公寓