Last active
January 2, 2016 03:49
-
-
Save nola/8246757 to your computer and use it in GitHub Desktop.
jquery extension example. Notice the use of chaining the styles together
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // creates a function that will add a 2px blue border around each div with the class "blue" | |
| $.fn.blueBorder = function(){ | |
| this.each(function(){ | |
| $(this).css("border","solid blue 2px"); | |
| }); | |
| return this; | |
| }; | |
| //creates a function that will turn the text color blue of each div | |
| $.fn.blueText = function(){ | |
| this.each(function(){ | |
| $(this).css("color","blue"); | |
| }); | |
| return this; | |
| }; | |
| //on click, apply the functinos to EACH blue div | |
| $("#b").click(function(){ | |
| $('.blue').blueBorder().blueText(); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <input id="b" type="button" value="Apply" /><br /> | |
| <div class="blue">1</div> | |
| <div class="blue">2</div> | |
| <div class="blue">3</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment