Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
jQuery Plug-In Template
///
/// jqury.plugintemplate.js
/// A short explanation of what it does right here
///
///
/// Intended HTML structure for targeted complex form (if applicable)
/// .postal-code-form - outer wrapper
/// .locationInputs - wrapper around all inputs
/// .postal-input - postal code input
/// .region-input - country input
/// .locationMetaData - wrapper for showing/hiding the location meta-data
/// .locationMetaDataContent - text content for the content meta-data
///
(function ($) {
// TODO: Define the plugin name here
$.fn.postalcode = function (options) {
// TODO: Set default options here
var settings = $.extend({
}, options);
// Safe for chaining
return this.each(function () {
// Parent element is the form, look into it for each field
var $this = $(this);
// Pull each field only once for this instance
// EG: var postalCodeInput = $this.find(".postal-input");
// Make an object for containing all functions
var self = {
// TODO: Add other functions that use "self" instead of "this" for object state
// Initial UI Setup stuff, using the methods in the object
// and the variable already pulled out above this object's declaration
init: function () {
// TODO: Perform all first time setup, including UI event handlers
metaDataTarget.hide();
metaDataTarget.click(function (event) {
locationInputs.show();
metaDataTarget.hide();
});
}
};
self.init();
});
};
}(jQuery));
// TODO: Optionally create a bootstrapping plugin by initializing at the bottom of the file
$(function () {
// Find anything with class postal-code-form and make it so
// EG: $(".postal-code-form").postalcode();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment