JQuery write plug-in and Its Demonstration
It is necessary to write jQuery plug-ins. This is a process that must be followed in front-end learning.
For the plug-in for the first time, first think about the principle
(Function ($ ){
$. Fn. yourName = function (options ){
// Various attributes and Parameters
}
Var options = $. extend (defaults, options );
This. each (function (){
// Plug-in implementation code
});
};
}) (JQuery );
This is a basic template.
Var options = $. extend (defaults, options );
1. $. extend () method
$. Extend () method has two usage methods in JQuery. The first time is the extension method,
The second method is
JQuery. extend ([deep], target, object1, [objectN])
Returned value: Object
Merge two objects to get a new target. deep is optional (recursive merge)
Merge settings and options, modify and return settings.
JQuery code:
var settings = { validate: false, limit: 5, name: "foo" };var options = { validate: true, name: "bar" };jQuery.extend(settings, options);
Result:
settings == { validate: true, limit: 5, name: "bar" }
Description:
Merge ults and options without modifying defaults.
JQuery code:
var empty = {};var defaults = { validate: false, limit: 5, name: "foo" };var options = { validate: true, name: "bar" };var settings = jQuery.extend(empty, defaults, options);
Result:
settings == { validate: true, limit: 5, name: "bar" }empty == { validate: true, limit: 5, name: "bar" }
2 Expansion:
First, check the code.
View sourceprint?
modalshow: function (options) { |
callback: function () { } |
}<br> // Here is the second usage of $. extend <br> var opts = $. extend ({}, defaults, options ); |
if ($("#" + opts.triggerID)[0] == null) { |
var $triggerBTN = $('<input type="button" value="LoginShow" id=' + opts.triggerID + '/>'); |
$triggerBTN.bind("click", function () { |
$("body").append($triggerBTN); |
$("#" + opts.triggerID).bind("click", function () { |
$.modalshow();// This is the place where the call is made. A button with the id of 'loginshow' can be automatically generated without being added to HTML. |
Second extension
View sourceprint?
modalshow: function (options) { |
// Here this is the JQuery object |
triggerID: this.attr("id"), |
callback: function () { } |
}<br> // Here is the second usage of $. extend <br> var opts = $. extend (defaults, options ); |
$("#" + opts.triggerID).bind("click", function () { |
$("#loginShow").modalshow();// Here is the call point. Here, you need to add elements to HTML first. |
Here I wrote a complete plug-in about tabs. // This is the Tab. js introduced when I wrote the html file plug-in. <Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> No title </title>
<Style type = "text/css">
*{
Padding: 0px;
Margin: 0px;
}
. Clear {
Clear: both;
}
. Menu li {
Float: left;
Width: 100px;
Height: 30px;
Line-height: 30px;
Border: 1px solid # ccc;
Border-bottom: 5px solid # ccc ;;
}
. Main {
Margin-top: 0px;
Width: 406px;
Height: 206px;
Overflow: hidden;
}
. Main div {
Width: 403px;
Height: 200px;
Line-height: 200px;
Text-align: center;
Border: 1px solid #000;
}
. Menu. on {
Border-bottom: 6px solid red;
}
</Style>
<Script type = "text/javascript" src = "Jquery. js"> </script>
<Script type = "text/javascript" src = "Tab. js"> </script>
</Head>
<Body>
<Div class = "tabs">
<Ul class = "menu">
<Li class = "on"> 111 </li>
<Li> 222 </li>
<Li> 333 </li>
<Div class = "clear"> </div>
</Ul>
<Div class = "main">
<Div class = "tab"> AAA </div>
<Div class = "tab"> BBB </div>
<Div class = "tab"> CCC </div>
</Div>
</Div>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ('. Tabs'). myTab ({
Operate: 'mouseover ',
Auto: false,
Time: 1000,
Delay: true,
Delaytime: 0
})
// Use the closure principle to initialize some elements in the myTab Function
});
</Script>
</Body>
// The following is the comment on the Tab. js file. I wrote it more clearly than before.
/***
* Title: tab plug-in
* Written on: July 15, July 14, 2015
* Author: Helios
* Email: 67487158@qq.com
***/
; (Function ($ ){
$. Fn. myTab = function (options ){
Return this. each (function (){
Var defaults = {
Operate: 'click ',
Auto: true,
Time: 4000,
Delay: true,
DelayTime: 500
}
Var opts = $. extend (defaults, options), // The order of the two parameters cannot be changed, because the subsequent parameters will not be overwritten.
// $. Extend (defaults, options); indicates that if the options parameter always has a value, the value in options will replace the value in defaults.
// If the input value of the options parameter is null, the default value can be used.
Self = $ (this), // get the current tabs
Items = self. children ('ul. menu '). children ('lil'), // obtain the three
TabBox = self. children ('div. main'), // obtain the main node.
TabBoxItems = tabBox. children ('div '), // obtain the div under mian
Timer; // a timer is set.
Var tabHandle = function (index) {// This is the function to transform the selected li and the corresponding div
Items. siblings ('lil'). removeClass ('on'). end (). eq (index). addClass ('on ');
TabBoxItems. siblings (). hide (). end (). eq (index). show ();
// The end () function is used to end operations on the current node and continue operations on the previous node.
},
Delay = function (elem) {// This delay function
Opts. delay? SetTimeout (function () {tabHandle (elem) ;}, opts. delaytime): tabHandle (elem );
},
Start = function () {// start function. If the parameter is set, the following second line of code is executed automatically. If the parameter is not set, the timer is enabled.
If (! Opts. auto) return;
SetInterval (autoRun, opts. time );
},
AutoRun = function () {// automatic playback function
Var on = self. find ('Li. on'), // obtain the current on li
FirstItem = items. eq (0), // sets the default value of the first li
Len = items. length ,//
Index = on. index () + 1,
Item = index = len? FirstItem: on. next ('lil'), // if the current index is equal to the total length of li, the first index is returned by default. If it is not the next index
I = index = len? 0: index; // jump to the first one if the last one is played.
On. removeClass ('on'); // remove the style above the current li
Item. addClass ('on'); // adds the selected style.
TabBoxItems. siblings (). hide (). end (). eq (index). show (); // change the content in the div and perform the same operations as tabHandle.
}
// The bind () method adds one or more event handlers for the selected element and specifies the function that runs when an event occurs.
// The first parameter passes the event, and the second parameter also changes the function corresponding to the event
Items. bind (opts. operate, function (){
Var index = items. index ($ (this ));
Delay (index)
});
If (opts. auto) {// if auto is set, the operation is successful.
Start ();
Self. hover (function (){
ClearInterval (timer );
Timer = undefined;
}, Function (){
Start ();
})
}
})
}
}) (JQuery );
Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.
