Java programmer's JavaScript Study Notes (14 -- extended jQuery UI)

Java programmer's JavaScript Study Notes (14 -- extended jQuery UI)
We plan to complete this note in the following order:
Java programmer's JavaScript learning notes (1 -- philosophy) Java programmer's JavaScript learning notes (2 -- Property copying and inheritance) Java programmer's JavaScript learning notes (3 -- this/call/apply) java programmer's JavaScript learning notes (4 -- this/closure/getter/setter) Java programmer's JavaScript learning notes (5 -- prototype) java programmer's JavaScript learning notes (6 -- object-oriented simulation) Java programmer's JavaScript learning notes (7 -- jQuery basic mechanism) Java programmer's JavaScript learning notes (8 -- jQuery selector) java programmer's JavaScript learning notes (9 -- jQuery tool method) Java programmer's JavaScript learning notes (10 -- jQuery-extended at the class level) Java programmer's JavaScript learning notes (11- -JQuery-extension at the "object" level) Java programmer's JavaScript learning notes (12 -- jQuery-extension selector) Java programmer's JavaScript learning notes (13 -- jQuery UI) java programmer's JavaScript learning notes (14 -- extended jQuery UI): This is the first article of the notes. Today, we have expanded Easyui based on the previous article.
This is the last part of the note. The next plan is to learn the mobile terminal html + css + javascript.
The learning method is as follows: This is more dynamic and effective as an example.
The current idea is to implement the interface one by one. The page effect and style should be as close as possible.
There is not much page performance accumulation. I will study this topic later.

Author blog: http://blog.csdn.net/stationxp author microblog: http://weibo.com/liuhailong2008 reprint please get the author's consent

Answer the question.

1 goal
Make a web control and implement the function: display the directory of this series of notes.

Control usage:

$('#p').hailongjsnote();

Supported attributes: sort -- asc positive sequence, desc reverse description.
Supported Methods: getCount gets the number of items.
Events: preload and loaded.
Shape:

$('#p').hailongjsnote('option','sort','desc');var cnt = $('#p').hailongjsnote('getCount');
$('#p').hailongjsnote('on','loaded',function(event,notes){    //});

2. one-by-one development function 2.1 First displays the file list:
Jquery. hailongjsnote. js
Hailongjsnote.css -- may not be used. I don't want to write styles in components.
Demo.html
Also:
Jquery. min. js
Jquery. parser. js

The Code is as follows:

/*** Hailongjsnote * author: liuhailong * date: 2014-10-28 * Dependencies: * jquery. mini. js/jquery. js * jquery. parser. js */(function ($) {function init (target) {$ (target ). addClass ('hailongjsnote'); iterator (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 +'
';} Destination (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 programmer's JavaScript learning notes (1 -- idea) ', href: 'http: // blog.csdn.net/stationxp/article/details/40020009 '}, {sn: 2, title: 'java programmer's JavaScript learning notes (2 -- Property replication and inheritance) ', href: 'http: // blog.csdn.net/stationxp/article/details/40068345'}, {sn: 3, title: 'java programmer's JavaScript Study Notes (3 -- this/call/apply) ', href: 'http: // blog.csdn.net/stationxp/article/details/40130687'}, {sn: 4, title: 'java programmer's JavaScript Study Notes (4 -- this/closure/getter/setter) ', href: 'http: // blog.csdn.net/stationxp/article/details/40146441'}, {sn: 5, title: 'java programmer's JavaScript Study Notes (5 -- prototype) ', href: 'http: // blog.csdn.net/stationxp/article/details/40205967'}, {sn: 6, title: 'java programmer's JavaScript learning notes (6 -- object-oriented simulation) ', href: 'http: // blog.csdn.net/stationxp/article/details/40264845'}, {sn: 7, title: 'java programmer's JavaScript Study Notes (7 -- Basic jQuery mechanism) ', href: 'http: // blog.csdn.net/stationxp/article/details/40384477'}, {sn: 8, title: 'java programmer's JavaScript learning notes (8 -- jQuery selector) ', href: 'http: // blog.csdn.net/stationxp/article/details/40476959'}, {sn: 9, title: 'java programmer's JavaScript learning notes (9 -- jQuery tool method) ', href: 'http: // blog.csdn.net/stationxp/article/details/40480185'}, {sn: 10, title: 'java programmer's JavaScript Study Notes (10 -- jQuery-extended at the class level) ', href: 'http: // blog.csdn.net/stationxp/article/details/40366735'}, {sn: 11, title: 'java programmer's JavaScript Study Notes (11 -- jQuery-extended at the "object" layer) ', href: 'http: // blog.csdn.net/stationxp/article/details/40497837'}, {sn: 12, title: 'java programmer's JavaScript Study Notes (12 -- jQuery-extension selector) ', href: 'http: // blog.csdn.net/stationxp/article/details/40501123'}, {sn: 13, title: 'java programmer's JavaScript Study Notes (13 -- jQuery UI) ', href: 'http: // blog.csdn.net/stationxp/article/details/40534209'}, {sn: 14, title: 'java programmer's JavaScript Study Notes (14 -- extended jQuery UI) ', href: 'http: // blog.csdn.net/stationxp/article/details/40535073'}];} $. fn. hailongjsnote. defaults = {width: '500px '};}) (jQuery );

2.2 add sort label attributes

Implementation:
Modify the setContent code:

Function setContent (target, notes) {var item, htm = ''; var opts = $. data (target, 'hailongjsnote '). options; // the opts contains the parameter 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'hangzhou.html (htm );}

2.3 Add the sort attribute $ ('# p') through js. hailongjsnote ('option', 'sort', 'desc ');
The hailongjsnote function needs to modify the definition to support multiple parameters. It is best to use argumets and typeof.

    $.fn.hailongjsnote = function(options, param,param2){        if (typeof options == 'string'){            var method = $.fn.hailongjsnote.methods[options];            if (method){                return method(this, param,param2);            }        }

Add the following code:

$. 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) {// The third parameter if (opt) is not input {// return opts [opt] can be read for all attributes.} else {// set a value for the attribute. Not every attribute allows if (opt) {opts [opt] = param; // The cache value to be automatically updated, right? If (opt = 'sort ') {setContent (jq, state. notes );}}}}};

2.4 Add method var cnt =$ ('# p'). hailongjsnote ('getcount ');
Add method:

    $.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 two events

// The following code does not debug 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'hangzhou.html (htm); loaded & loaded (htm );}

This is basically done, and the details are further refined.

There is no end to learning. Continue to work hard!