Java Programmer's JavaScript learning Note (14--extended jquery UI)

Plan to complete this note in the following order:

2. Java Programmer's JavaScript Learning notes (IDEA)
4. Java Programmer's JavaScript Learning notes (2--property copy and inheritance)
6. Java Programmer's JavaScript Learning Note (3--this/call/apply)
8. Java Programmer's JavaScript learning Note (4--this/closure/getter/setter)
10. Java Programmer's JavaScript Learning Note (5--prototype)
12. Java Programmer's JavaScript learning Note (6--Object-oriented simulation)
14. Java Programmer's JavaScript Learning notes (7--jquery basic mechanism)
16. Java Programmer's JavaScript learning Note (8--jquery selector)
18. Java Programmer's JavaScript Learning Note (9--jquery tool method)
20. Java Programmer's JavaScript learning Note (10--jquery-extends at "class" level)
22. Java Programmer's JavaScript learning notes (11--jquery-at "object" level)
24. Java Programmer's JavaScript learning note (12--jquery-extension selector)
26. Java Programmer's JavaScript learning notes (13--jquery UI)
28. Java Programmer's JavaScript learning Note (14--extended jquery UI)

This is the 14th note, today we on the basis of an article, the expansion of Easyui.
This is the last article of the note, the next plan is: Learn to move the end of the html+css+javascript.
The way to learn is: To do examples, so more motivated and more effective.
Now the idea is to implement the interface, page effect and style as close as possible.
Page performance accumulation is not much, after the topic study, this time first not considered.

    Author Blog: Http://blog.csdn.net/stationxp       author Weibo: http://weibo.com/liuhailong2008        

Back to the chase.

1 goals
Make a Web control that implements the feature: a directory that displays this series of notes.

Control how to use:

<p id= ' P ' ></p>$ (' #p '). Hailongjsnote ();

Support attributes: SORT--ASC, desc flashback.
Support method: GetCount Gets the number of bars.
Events: Preload and loaded.
Shaped like:

<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 Development Function 2.1 Displays the file list first:
Jquery.hailongjsnote.js
HAILONGJSNOTE.CSS--may not be used, I don't tend to write styles to die in components
Demo.html
And also:
Jquery.min.js
Jquery.parser.js

To implement the basic functionality, 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 ');        $ (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.hailongjsnot E.defaults, $.fn.hailongjsnote.parseoptions (this), options), Jsnote:init (the), not            es: $.fn.hailongjsnote.getnotes ()});        } setcontent (This,state.notes);    });      }; $.fn.hailongjsnote.parseoptions = function (target) {return $.extend ({}, $.parser.parseoptions (target, [' width ', ' hei    Ght ', ' Sort ', ' click ']);        }; $.fn.hailongjsnote.getnotes = function () {return [{sn:1, title: ' Java Programmer's JavaScript learning Notes (concept) ', href: ' http://blog.csdn.net/stationxp/article/details/40020009 '},{s N:2, title: ' Java Programmer's JavaScript learning note (2--attribute copy and Inheritance) ', href: ' Http://blog.csdn.net/stationxp/article/details/40068345 '},{Sn:3, title: ' Java Programmer's JavaScript learning Note (3--this/c                all/apply) ', href: ' http://blog.csdn.net/stationxp/article/details/40130687 '},{ Sn:4, title: ' Java Programmer's JavaScript learning Note (4--this/closure/getter/setter) ', href: ' http://blog.csdn.net/ stationxp/article/details/40146441 '},{Sn:5, title: ' Java Programmer's JavaScript learning Note (5--PR Ototype) ', href: ' http://blog.csdn.net/stationxp/article/details/40205967 '},{sn : 6, Title: ' Java Programmer's JavaScript learning Note (6--Object-oriented simulation) ', href: ' http://blog.csdn.net/stationxp/article                /details/40264845 '},{Sn:7, title: ' Java Programmer's JavaScript Learning notes (7--jquery basic mechanism) ',                HREF: ' http://blog.csdn.net/stationxp/article/details/40384477 '},{Sn:8, Title: ' Java Programmer's JAVASCRipt Study notes (8--jquery selector) ', href: ' http://blog.csdn.net/stationxp/article/details/40476959 '},{ Sn:9, title: ' Java Programmer's JavaScript Learning Note (9--jquery tool method) ', href: ' http://blog.csdn.net /stationxp/article/details/40480185 '},{sn:10, title: ' Java Programmer's JavaScript learning Note (10-                -jquery-extended at "class" level) ', href: ' http://blog.csdn.net/stationxp/article/details/40492735 '},{ Sn:11, title: ' Java Programmer's JavaScript learning Note (11--jquery-extended at "object" level) ', href: ' http://blog.csdn. net/stationxp/article/details/40497837 '},{sn:12, title: ' Java Programmer's JavaScript learning notes (                12--jquery-extension selector) ', href: ' http://blog.csdn.net/stationxp/article/details/40501123 '},{ Sn:13, title: ' Java Programmer's JavaScript learning Note (13--jquery UI) ', href: ' Http://blog.csdn.net/sta Tionxp/article/details/40534209 '},{sn:14, Title: ' JavaScript Learning notes for Java Programmers (14--extended jquery UI) ',    HREF: ' http://blog.csdn.net/stationxp/article/details/40535073 '}]; } $.fn.hailongjsnote.defaults = {width: ' 500px '};}) (JQuery);

2.2 Plus sort Tag Properties <p id= ' P ' sort= ' ASC ' ></p>
Realize:
To modify the SetContent code:

function SetContent (target,notes) {        var item, htm = ';        var opts = $.data (target, ' hailongjsnote '). Options;//opts is stored with various parameters        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 By JS plus the Sort property $ (' #p '). Hailongjsnote (' option ', ' sort ', ' desc ');
The Hailongjsnote function needs to modify the definition to support multiple parameters, preferably implemented with 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);            }        }

Add the following code implementation:

   $.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) {//does not pass                    in the third parameter if (opt) {                            //All properties can read                            return opts[opt];}            } else{///                    Property set value, not each attribute is allowed                    if (opt) {                            opts[opt] = param;//The cached value is also automatically updated?                            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 of two events

The following code is 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 '). html (HTM);        Loaded && loaded (HTM);    }

Basic, details and then slowly refining.

Learning, continue to work!

Java Programmer's JavaScript learning Note (14--extended jquery UI)