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"/> <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:
- There is no error when you bind n times with an element.
- You can customize the fetch number to load the data from the new.
- 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