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)
这是笔记的最后一篇,接下来的计划是:学习下移动端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); }
基本搞定,细节再慢慢推敲。
学无止境,继续努力!
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。