But I do miss a bit of Object Orientation in most of them.
I decided to take a bit of each, and create my own approach.
I won’t explain it much, it should be understandable with the comments in code:
(function($){/**
** Seperate object. So each element applied with this plugin has an object structure
**/function PluginObject(container,options){//I like to keep a reference to the object I'm working onvar holder = container;//Store 'this' as an instance variable. This comes in handy when you want to speak to it as a reference in clickhandlers etc.var _self =this;this.init=function(){//initialize UI and data here}this.test=function(){//This function serves as a demo method that can be called from outside}this.render=function(){// Do complicated rendering here// Trigger the onRender that could be set through the optionsthis.trigger('onRender');}this.init();}
$.fn.myplugin=function(action,options){/**
** 'action' can be an argument for a function to call
** If no action is defined, and we just start with the options, initialize is called
**/if(typeof(action)=='object'){
options = action;
action ='initialize';}elseif(action == undefined){
action ='initialize';}if(options == undefined){
options ={};}/**
** Set, or update the options
**/function setOptions(el){// If any of the options is a function, bind that as an event// this can be something like: 'onRender'
$.each(options,function(event, fn){if(typeof(fn)=='function'){//Unbind the event if it was already bound
el.unbind(event);//Bind the event with the given function
el.bind(event, fn);}});//Extend the options with the defaults, and the options already saved in the object
options = $.extend({}, defaults, el.data('shelf.options'), options);// Save the options in the object's data
el.data('shelf.options', options);};// Default optionsvar defaults ={
width:'900px',
title:'Cool Stuff'};/**
** This is called everytime we do $(..).myplugin(..)
**/returnthis.each(function(el){
el = $(this);
setOptions(el);if(action =='initialize'|| el.data('shelf')== undefined){// Initialize the object, save it in itself
el.data('shelf',new PluginObject(el, options));}// if called like $(..).myplugin('test'), this is calledif(action =='test')
el.data('shelf').test();// This will call render(), render will also trigger 'onRender'if(action =='render')
el.data('shelf').render();});};})(jQuery);
Do you develop plugins differently? Or got a good link? I would love to hear about it!
Getting the values of radio buttons in Javascript can be a bit of a pain in the behind at times.
You’ll have to assign a different ID to each radiobutton, loop over them to see which one is checked, and return that value.
Too much hassle.
However, jQuery selectors to the rescue!
Suppose you have the following radio buttons:
Strong note: These aren’t actually buttons, they can’t really be used as form-submit buttons as they can only respond to Javascript onClick events! My newer post on the real buttons does do this! Tested in FF 3.6, Chrome 5, IE8
