Parameter usage Example Analysis of jQuery plug-in Creation

Parameter usage Example Analysis of jQuery plug-in Creation

This document describes how to create parameters for the jQuery plug-in. Share it with you for your reference. The specific analysis is as follows:

1. Achieve text shadow without Parameters

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

JQuery. fn. shadow = function (){ Return this. each (function (){ Var $ originalElement = jQuery (this ); For (var I = 0; I <5; I ++ ){ $ OriginalElement. clone () . Css ({ Position: "absolute ", Left: $ originalElement. offset (). left + I, Top: $ originalElement. offset (). top + I, Margin: 0, ZIndex:-1, Opacity: 0.1 }) . AppendTo ("body "); } }) }

Call example:

The Code is as follows:

$ ("H1"). shadow ();

2. Simple parameters

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

JQuery. fn. shadow = function (slices, opacity, zIndex ){ Return this. each (function (){ Var $ originalElement = jQuery (this ); For (var I = 0; I <slices; I ++ ){ $ OriginalElement. clone () . Css ({ Position: "absolute ", Left: $ originalElement. offset (). left + I, Top: $ originalElement. offset (). top + I, Margin: 0, ZIndex: zIndex, Opacity: opacity }) . AppendTo ("body "); } }) }

Call example:

The Code is as follows:

$ ("H1"). shadow (10, 0.1,-1 );

3. Parameter ing

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

JQuery. fn. shadow = function (opts ){ Return this. each (function (){ Var $ originalElement = jQuery (this ); For (var I = 0; I <opts. slices; I ++ ){ $ OriginalElement. clone () . Css ({ Position: "absolute ", Left: $ originalElement. offset (). left + I, Top: $ originalElement. offset (). top + I, Margin: 0, ZIndex: opts. zIndex, Opacity: opts. opacity }) . AppendTo ("body "); } }) }

Call example:

The Code is as follows:

$ ("H1"). shadow ({

Slices: 5,

Opacity: 0.25,

ZIndex:-1

});

4. default parameter values (this is the most important)

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

JQuery. fn. shadow = function (options ){ Var defaults = { Slices: 5, Opacity: 0.1, ZIndex:-1 }; // Options if a value in ults exists, it overwrites the value in defaults. Var opts = jQuery. extend (defaults, options ); Return this. each (function (){ Var $ originalElement = jQuery (this ); For (var I = 0; I <opts. slices; I ++ ){ $ OriginalElement. clone () . Css ({ Position: "absolute ", Left: $ originalElement. offset (). left + I, Top: $ originalElement. offset (). top + I, Margin: 0, ZIndex: opts. zIndex, Opacity: opts. opacity }) . AppendTo ("body "); } }) }

Call example:

The Code is as follows:

$ ("H1"). shadow ({

Opacity: 0.05

});

5. Callback Function

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

JQuery. fn. shadow = function (options ){ Var defaults = { Slices: 5, Opacity: 0.1, ZIndex:-1, SliceOffset: function (I ){ Return {x: I, y: I} } }; // Options if a value in ults exists, it overwrites the value in defaults. Var opts = jQuery. extend (defaults, options ); Return this. each (function (){ Var $ originalElement = jQuery (this ); For (var I = 0; I <opts. slices; I ++ ){ // Call the callback function Var offset = opts. sliceOffset (I ); $ OriginalElement. clone () . Css ({ Position: "absolute ", Left: $ originalElement. offset (). left + offset. x, Top: $ originalElement. offset (). top + offset. y, Margin: 0, ZIndex: opts. zIndex, Opacity: opts. opacity }) . AppendTo ("body "); } }) }

Call example:

The Code is as follows:

$ ("H1"). shadow ({

SliceOffset: function (I ){

Return {x:-I, y:-2 * I}

}

});

6. Customizable default values

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

JQuery. fn. shadow = function (options ){ // The default value is placed in the namespace of the projection plug-in. Var opts = jQuery. extend ({}, jQuery. fn. shadow. defaults, options ); Return this. each (function (){ Var $ originalElement = jQuery (this ); For (var I = 0; I <opts. slices; I ++ ){ // Call the callback function Var offset = opts. sliceOffset (I ); $ OriginalElement. clone () . Css ({ Position: "absolute ", Left: $ originalElement. offset (). left + offset. x, Top: $ originalElement. offset (). top + offset. y, Margin: 0, ZIndex: opts. zIndex, Opacity: opts. opacity }) . AppendTo ("body "); } }) } JQuery. fn. shadow. defaults = { Slices: 5, Opacity: 0.1, ZIndex:-1, SliceOffset: function (I ){ Return {x: I, y: I} } }

The default value is placed in the namespace and can be directly referenced through $. fn. shadow. default. The call to $. extend () must also be modified to adapt to this change. Because all. the defaults ing must be reused for the call of shadow (), so it cannot be set to $. extend () modifies it, so an empty ing ({}) must be used as $. the first parameter of extend () makes this new object the target of modification.

Call method:

The Code is as follows:

JQuery. fn. shadow. defaults. slices = 10;

$ ("H1"). shadow ({

SliceOffset: function (I ){

Return {x:-I, y: I}

}

});

7. Add a selector expression

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

/* * Add a selector expression * * Parameters: * Element: the current DOM element, which is required by most Selector * Index: the index of Dom elements in the result set. This parameter is useful for selector such as: eq () and: lt (). * Matches: An array that contains the regular expression result for parsing the selected character. Matches [3] is usually in this array. * The only useful item. For a (B)-form selector, matches [3] contains B, that is * Text. * Set: set of the entire DOM element matched so far. This parameter is rarely used. * */ JQuery. extend (jQuery. expr [':'], { 'Css ': function (element, index, matches, set ){ // Modified matches [3]: width <100 Var parts = matches [3]. split (""); Var value implements parsefloat(jquery(element).css (parts [0]); Switch (parts [1]) { Case '<': Return value <parseInt (parts [2]); Case '<= ': Return value <= parseInt (parts [2]); Case '= ': Case '= ': Return value = parseInt (parts [2]); Case '> = ': Return value> = parseInt (parts [2]); Case '> ': Return value> parseInt (parts [2]); } } })

Call:

?

1 2 3 4

<Divstyle = "width: 500px;"> Desrunt mollit anim id estlaborum </div> <Divstyle = "width: 200px;"> 2222222 </div> <Divstyle = "width: 30px;"> 33333333333333333333333 </div> <Divstyle = "width: 300px;"> 4444444444444444 </div>

The Code is as follows:

$ ("Div: css (width <100)"). addClass ("heighlight ");

I hope this article will help you with jQuery programming.