Last active
December 11, 2015 07:09
-
-
Save s-hiroshi/4564654 to your computer and use it in GitHub Desktop.
JavaScript > snippets > jQuery plugin template
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
| <!DOCTYPE html> | |
| <html lang="ja" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>JQuery plugin template</title> | |
| <meta name="description" content="jquery plugin template"> | |
| <meta name="keywords" content="dorpdown"> | |
| <link rel="stylesheet" href="style.css" media="all"> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> | |
| <script src="template.js"></script> | |
| <script> | |
| jQuery(function($) { | |
| $('.orange-link').setLinkHoverColor('orange'); | |
| $('.olive-link').setLinkHoverColor('olive'); | |
| }) | |
| </script> | |
| </head> | |
| <body> | |
| <ul> | |
| <li><a href="#">default link</a></li> | |
| <li><a class="orange-link" href="#">orange link</a></li> | |
| <li><a class="olive-link" href="#">olive link</a></li> | |
| <li><a class="orange-link" href="#">orange link</a></li> | |
| </ul> | |
| </body> | |
| </html> |
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
| /** | |
| * jQuery plugin template | |
| * | |
| * Set link hover color | |
| * $('selector').setLinkHoverColor('color'); | |
| * | |
| * @param {String} color | |
| * colorはblue, orangeなどのHTML color name | |
| */ | |
| jQuery.fn.setLinkHoverColor = function(color) { | |
| // thisは$('selector').setLinkHoverColorを実行したselectorのjQueryオブジェクトを指す | |
| // jQuery.selectorは$('selector').setLinkHoverColorを実行したセレクタ文字列。 $(window)のときは空文字。 | |
| var selector = (this.selector !== '') ? this.selector : ''; | |
| color = color || 'blue'; | |
| // 即時実行でイベントハンドラを設定 | |
| return function() { | |
| // thisはwindowオブジェクトを指す | |
| $('a' + selector).hover(function() { | |
| // thisはaオブジェクト | |
| $(this).css('color', color); | |
| }, function() { | |
| // thisはaオブジェクト | |
| $(this).css('color', 'blue'); | |
| }); | |
| }(); | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment