Last active
August 29, 2015 14:05
-
-
Save harisrozak/6cc8bd31a9811b201d95 to your computer and use it in GitHub Desktop.
HTML + JS :: Sample jQuery plugin, boilerplate OOP jQuery plugin
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
| <html> | |
| <head> | |
| <title>Sample jQuery Plugin</title> | |
| <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> | |
| <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> | |
| <script type="text/javascript" src="plugin.js"></script> | |
| <script type="text/javascript"> | |
| jQuery(document).ready(function($) { | |
| var plugin = $('#example').SamplePlugin({ | |
| 'separator': ", ", | |
| 'nextWords': "This is my first word dude!" | |
| }); | |
| $("#clickMe").click(function(){ | |
| plugin.doAlert(); | |
| }); | |
| }) | |
| </script> | |
| </head> | |
| <body> | |
| <div id="example"></div> | |
| <a href="javascript:;" id="clickMe">Click Me</a> | |
| </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
| /** | |
| * Sample jQuery Plugin (boilerplate) | |
| * | |
| * @author Haris Ainur Rozak | |
| * @since 0.1 | |
| */ | |
| ;(function($) { | |
| $.SamplePlugin = function(el, opt) | |
| { | |
| var base = this; | |
| base.el = el; | |
| base.$el = $(base.el); | |
| base.$pluginWrapper = base.$el.wrap("<div class='pluginWrapper' />"); | |
| base.pluginVar = "Hello World!"; | |
| base.initialize = function() | |
| { | |
| base.pluginFunction(); | |
| base.$pluginWrapper.html(base.pluginVar + opt.separator + opt.nextWords); | |
| } | |
| base.pluginFunction = function() | |
| { | |
| base.pluginVar = "Me Haris, " + base.pluginVar; | |
| } | |
| } | |
| /** | |
| * Implementation | |
| */ | |
| $.SamplePlugin.defaults = { | |
| 'separator': ", ", | |
| 'nextWords': "This is my first word" | |
| } | |
| $.fn.SamplePlugin = function(options) | |
| { | |
| var base = this; | |
| var opt = $.extend({}, $.SamplePlugin.defaults, options); | |
| var plugin = new $.SamplePlugin(base, opt); | |
| base.doAlert = function() | |
| { | |
| alert(plugin.pluginVar); | |
| } | |
| base.each(function() { | |
| plugin.initialize(); | |
| }); | |
| return base; | |
| }; | |
| })(jQuery); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment