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

  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)的更多相关文章

  1. Java程序猿JavaScript学习笔记(2——复制和继承财产)

    计划和完成在这个例子中,音符的以下序列: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaSc ...

  2. Java程序猿JavaScript学习笔记(4——关闭/getter/setter)

    计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...

  3. Java程序猿的JavaScript学习笔记(8——jQuery选择器)

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  4. Java程序猿的JavaScript学习笔记(9—— jQuery工具方法)

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  5. OpenLayers学习笔记5——使用jQuery UI实现查询并标注(UI篇)

    近期事情非常多,老板给的压力也非常大.经常出差,另外项目和个人研究还都要跟上,本月要交论文,还要写专利,仅仅能抽时间来学习其它的东西了. 关于OpenLayers的在博客中不会写太多详细的实现(网上有 ...

  6. OpenLayers学习笔记3——使用jQuery UI美化界面设计

    PC端软件在开发是有较多的界面库能够选择,比方DevExpress.BCG.DotNetBar等,能够非常方便快捷的开发出一些炫酷的界面,近期在学习OpenLayers.涉及到web前端开发,在设计界 ...

  7. javascript学习笔记-2:jQuery中$(&quot;xx&quot;)返回值探究

    最近在写一个jQuery插件的时候,需要用到一个条件: 一组img标签,每一个元素都需要被它前面的元素值src替换,如果是第一个(序列为0)则其值为最后一个元素值,如果是最后一个,那么其值为第一个元素 ...

  8. OpenLayers学习笔记4——使用jQuery UI实现測量对话框

    OpenLayers学习最好的方式就是跟着其自带的演示样例进行学习,另外对web前端的开发设计要了解,慢慢积累,这样在一般的小项目中应该是足够用了. 本篇參照量測demo实现对话框形式的量測,抛砖引玉 ...

  9. Java程序猿的JavaScript学习笔记(汇总文件夹)

    最终完结了,历时半个月. 内容包含: JavaScript面向对象特性分析,JavaScript高手必经之路. jQuery源代码级解析. jQuery EasyUI源代码级解析. Java程序猿的J ...

随机推荐

  1. ZooKeeper个人笔记Session管理

    Session 1.sessionId  <机器的SID,当前时间>生成一个sessionId,这是全局唯一的. 2.TimeOut 会话的超时时间,注意,这个值和客户端ZooKeeper ...

  2. jira与mysql的配合搭建调整

    jira与mysql数据的整合 第一步:电脑上安装mysql数据库,不做多得解释,自己搞定 第二步: 在mysql数据库中建一个名为 jiradb的数据库,账号 root 密码 root 编码格式 u ...

  3. Delphi面向对象的属性

    可以把属性看成是能对类中的数据进行修改和执行代码的特殊的辅助域.对于组件来说,属性就是列在Object Inspector窗口的内容.下面的例子定义了一个有属性的简单对象 TMyObject = cl ...

  4. webKit和chromium的文章地址

     http://blog.csdn.net/column/details/yongsheng.html?&page=1 

  5. Android --ListView模板

    调整了近一上午的模板 ListView表头 <?xml version="1.0" encoding="utf-8"?> <LinearLay ...

  6. struts2和servlet同时用(访问servlet时被struts2过滤器拦截问题的解决)

    在同一个项目中间,如果既用到servlet有用了struts2的框架,运行项目时可能无法正常使用servlet,原因是在配置struts2的核心控制器时<url-pattern>/*< ...

  7. C# 获取随机可用端口号

    TCP与UDP段结构中端口地址都是16比特,可以有在0---65535范围内的端口号.对于这65536个端口号有以下的使用规定: (1)端口号小于256的定义为常用端口,服务器一般都是通过常用端口号来 ...

  8. C#程序:如何创建xml文件以及xml文件的增、删、改、查

    其实今天的这篇博文 ,是对请几天发表的博文的一个总结,只是想把xml文件的增删改查结合起来,这样更容易让初学的朋友理解,废话也不多说了,开始吧! 下面是我把我在vs环境下写的代码ctrl+V然后ctr ...

  9. Amazon.com: NEW VI AND VIM EDITOR KEYBOARD STICKER: Office Products

    Amazon.com: NEW VI AND VIM EDITOR KEYBOARD STICKER: Office Products NEW VI AND VIM EDITOR KEYBOARD S ...

  10. Zepto 使用中的一些注意点(转)

    http://www.zeptojs.cn/     zepto英文站在线文档 http://www.css88.com/doc/zeptojs_api/       zepto中文站在线文档 htt ...