Writing jquery Plugins

Source: Internet
Author: User

Writing jquery Plugins

There are many articles about jquery plugins in the garden, especially the following 2 articles:

Do not define jquery plugin, don't say will jqueryjquery plug-in development boutique tutorial, let your jquery ascend a step

These 2 great God foundations speak very clearly, here is not much to say, mainly that small demand to practice:

Requirement Description : A header plugin that can be taken from backend, custom caption, custom style

Discussion: plug-ins are usually not loaded and do not operate, such as table plug-ins, loading data, refresh and so on.

The controls we practice today simply give you a sense of how to write controls (there are questions and comments that you have pointed out.) )

; (function ($) {    $.fn.cytitle = function (options) {        //Some operations        return new Cytitle (options);    }    function Cytitle (options) {        //This defines the plugin properties        $.extend (this, options);        This.init (Options);    }    Cytitle.prototype = {        init:function () {            //build plug-in content here}}    ) (jQuery)

Each plug-in should contain the above section, this is not much to say (above 2 for the Great God's article is very clear), from the actual preparation of the starting point. (demo)

Click on the load control to list the title (no title defined) and click Refresh to change the title (Ajax fetch number).

Here's a step-by-step look at the code:

(originally requested TXT results found Blog Park can not upload and request, put on the RUNJS can only be JS file ... )

    <div style= "border:1px dotted #888; width:300px; height:100px; "    > <input type= "button" class= "Cytitlecore" title= "Load" value= "Load control"/> &nbsp;    <input type= "button" class= "Cytitlecore" title= "ref" value= "Refresh"/> <div id= "Div1cytitle" ></div>  </div> <script type= "Text/javascript" > $ (Function () {$ (". Cytitlecore"). Click (function            () {core[$ (this). attr ("title")] ();                        }) var core = {Load:function () {this.list = $ ("#div1cyTitle"). Cytitle ({                Background: "#888"});                        }, Ref:function () {//here directly invokes the plug-in's ref method to flush the fetch if (this.list) {                            This.list.ondatabind = function (that, e) {e.url = "service.js";//Specify the URL of the fetch number                    E.params = {//Specify the parameter of the fetch number            "id": (+new Date ())};                    } this.list.ref (); }}}) </script>

The above is the call to load the control and refresh;

First click the Load button to see that the plugin Cytitle is called and specifies the background color. Do not look at the refresh, to see the plug-in exactly how to write!

    $.fn.cytitle = function (options) {        options = Options | | {};        var Domel = this.get (0); Gets the binding element of the DOM object        if (!domel) throw "no binding element found!";        if (domel["Cytitle"]) {  //here if the DOM object that invokes the element has this control returned directly (avoids multiple calls to the same element on the bug)            return domel["Cytitle"];        }        Options.el = Domel; Here, when building the plugin, you can access the DOM object of the element directly with This.el        (options);    }
    function Cytitle (options) {        //This defines the plugin properties        $.extend (this, options);        This.ajaxtype = "Get";         This.el.cyTitle = this; The control is placed on the Cytitle property of the DOM element        this.ondatabind = null, the binding method of the//ajax fetch        this.init (Options);    }
Cytitle.prototype = {init:function () {this.load ();//Load control}, Load:function () { $ (This.el). Append ("

The above is the entire plug-in content,

Advantages:

    1. There is no error when you bind n times with an element.
    2. You can customize the fetch number to load the data from the new.
    3. Can be expanded on the prototype, the function that you need.

You can use a demo to write a plugin to know the fun, first of all, here. Thank you

Really busy, recently engaged in a Girhub.io blog wrote a scroll bar plugin. Interested can look at the connotation of the demo

Writing jquery Plugins

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.