Java Program Ape JavaScript Learning Notes (14--extended jquery UI)

To plan and complete this example, the order of the Notes is as follows:

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

This is the 14th piece of the note. Today, on the basis of the previous article, we extend the 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 a sample, so more motivated and more effective.
Now the idea is to implement the interface, page effect and style as close as possible.
Page performance is not accumulating much. After the special study, this time do not consider.

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

Back to the chase.

1 goals
Make a Web control. Implementation function: Displays the folder for this series of notes.

Control usage:

<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, code such as the following:

/** * 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 Program Ape's JavaScript Learning Notes (concept) ', href: ' http://blog.csdn.net/stationxp/article/details/40020009 '},{s N:2, Title: ' Java Program Ape's JavaScript Learning notes (2--attribute copy and Inheritance) ', href: ' Http://blog.csdn.net/stationxp/article/details/40068345 '},{Sn:3, title: ' Java Program Ape's JavaScript learning Note (3--this/c                all/apply) ', href: ' http://blog.csdn.net/stationxp/article/details/40130687 '},{ Sn:4, Title: ' Java Program Ape's JavaScript Learning Note (4--this/closure/getter/setter) ', href: ' http://blog.csdn.net/ stationxp/article/details/40146441 '},{Sn:5, title: ' Java Program Ape's JavaScript learning Note (5--PR Ototype) ', href: ' http://blog.csdn.net/stationxp/article/details/40205967 '},{sn : 6, Title: ' Java Program Ape's JavaScript Learning Note (6--Object-oriented simulation) ', href: ' http://blog.csdn.net/stationxp/article                /details/40264845 '},{Sn:7, title: ' Java Program Ape's JavaScript Learning notes (7--jquery basic mechanism) ',                HREF: ' http://blog.csdn.net/stationxp/article/details/40384477 '},{Sn:8, Title: ' Java program Ape's JAVASCRipt Study notes (8--jquery selector) ', href: ' http://blog.csdn.net/stationxp/article/details/40476959 '},{ Sn:9, Title: ' Java Program Ape's JavaScript Learning Note (9--jquery tool method) ', href: ' http://blog.csdn.net /stationxp/article/details/40480185 '},{sn:10, title: ' Java Program Ape's JavaScript Learning notes (10-                -jquery-extended at "class" level) ', href: ' http://blog.csdn.net/stationxp/article/details/40492735 '},{ Sn:11, Title: ' Java Program Ape's JavaScript Learning Note (11--jquery-on "object" level) ', href: ' http://blog.csdn. net/stationxp/article/details/40497837 '},{sn:12, title: ' Java Program Ape's JavaScript Learning notes (                12--jquery-extension selector) ', href: ' http://blog.csdn.net/stationxp/article/details/40501123 '},{ Sn:13, Title: ' Java Program Ape's JavaScript Learning Note (13--jquery UI) ', href: ' Http://blog.csdn.net/sta Tionxp/article/details/40534209 '},{sn:14, title: ' Java Program Ape's JavaScript Learning notes (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:
Change the SetContent code to:

function SetContent (target,notes) {        var item, htm = ';        var opts = $.data (target, ' hailongjsnote '). There are various parameters in the options;//opts (        ' 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 change 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 for example 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 argument if (opt) {                            //All properties are able to read                            return opts[opt];}            } else{///                    attribute set value, not every attribute agrees                    if (opt) {                            opts[opt] = param;//The cached values are also actively updated by themselves?                            if (opt== ' sort ') {                                    setcontent (jq,state.notes);}}}}    ;

2.4 Add method var cnt = $ (' #p '). Hailongjsnote (' GetCount ');
To add a 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, detailed information, and then slowly scrutiny.

Lifelong learning, to keep.

Copyright notice: This article blog original article. Blogs, without consent, may not be reproduced.

Java Program Ape JavaScript Learning Notes (14--extended jquery UI)