JavaプログラマーのJavaScript学習ノート(14-拡張jQuery UI)
9941 ワード
このノートは次の順序で作成される予定です. 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) これはノートの第14編で、今日は前編に加えてEasyuiを拡張します.
これはノートの最後の1編で、次の計画は:移動端html+css+javascriptを勉強します.
学習方法は、例を作ることで、よりダイナミックで効果的です.
現在のアイデアは、微信のインタフェースを1つずつ実現し、ページ効果とスタイルをできるだけ近づけることです.
ページの性能の蓄積は多くなくて、後で特別テーマの学習、今回は先に考慮しません.
1ターゲット
Webコントロールを作成し、機能を実現します.このシリーズのノートのディレクトリを表示します.
コントロールの使用方法:
支持方法:getCount 得到条数。
事件: preload 和 loaded。
形如:
2 逐个开发功能
2.3 jsにsort属性$('#p')を加える.hailongjsnote('option','sort','desc');
hailongjsnote関数は、複数のパラメータをサポートするために定義を変更する必要があります.argumets,typeofで実現することが望ましいです.
2.4増加方法var cnt=$('#p').hailongjsnote('getCount');
追加方法:
2.5 2つのイベント
基本的に終わり、細部をゆっくりと推敲します.
学は果てしなくて、引き続き努力します!
これはノートの最後の1編で、次の計画は:移動端html+css+javascriptを勉強します.
学習方法は、例を作ることで、よりダイナミックで効果的です.
現在のアイデアは、微信のインタフェースを1つずつ実現し、ページ効果とスタイルをできるだけ近づけることです.
ページの性能の蓄積は多くなくて、後で特別テーマの学習、今回は先に考慮しません.
:http://blog.csdn.net/stationxp
:http://weibo.com/liuhailong2008
回本題.1ターゲット
Webコントロールを作成し、機能を実現します.このシリーズのノートのディレクトリを表示します.
コントロールの使用方法:
支持属性:sort——asc正序,desc倒叙。
$('#p').hailongjsnote();
支持方法: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 标签属性
/**
* 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);
实现:
修改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 2つのイベント
//
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);
}
基本的に終わり、細部をゆっくりと推敲します.
学は果てしなくて、引き続き努力します!