首页 > 代码库 > Java程序员的JavaScript学习笔记（14——扩展jQuery UI）

Java程序员的JavaScript学习笔记（14——扩展jQuery UI）

2024-07-29 16:12:11   219人阅读

计划按如下顺序完成这篇笔记：
  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=http://www.mamicode.com/"'+item.href+'">'+item.title+'';>
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=http://www.mamicode.com/"'+item.href+'">'+item.title+'';>
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）


联系
我们