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').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 两个事件

    // 以下代码未经调试
        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);
        }
    

    基本搞定,细节再慢慢推敲。

    学无止境,继续努力!

    你可能感兴趣的:(JavaScript,日积月累,笔记)