Many times I have tried to implement cool jQuery plug-ins and many times I have read the descriptions about all the options and settings for each and every plug-in. Sometimes many examples and good documentation exists, but in every case for a long time now I have had this idea to build a tool which can do a standardalized auto discovering of plug-ins. “jquery.plugInReflector” plug-in is the outcome of these thoughts.

“If you take something from the net, you must give something back”

My philosophy perhaps is simply just a definition of the word “share”, but I feel that I need to write it – this plug-in is also put to the internet with the sharing in mind, so feel free to use the plug-in! I have even put it so github.com, a place with structured filesharing (find the link below). I am new to github.com and feel 100% novice, but the plug-in with examples will be available out there.

Why should you use plugInReflector?

If you are a person working with the internet implementing websites and use jQuery plug-ins you find on the net, you will probertly find plugInReflector usefull. Lets say that you apply a jQuery based image gallery (like jQuery Cycle) to an UL list called “gallery”. You can do it like this for instance:

jQuery('.gallery').cycle();

This will activate the gallery, but what about the settings? On the website for jQuery Cycle you will get the authors documentation, telling you that you need to change “easing” if you need to choose another way to do the animated sliding. But what if you could simply add “.plugInReflector()” and then get a “disassembled” look at the actual settings, properties, objects and functions used by the plug-in to accive the current effect? Would that not be handy? Simply add the plugInReflector plug-in and change your gallery inserting code to:

jQuery('.gallery').cycle().plugInReflector();

You will now get a full list of any settings bound to the gallery. Something like this (in plugInReflector 0.01):

The above output is auto generated HTML which is appended to the body, if you do not specify an element using the “output” option. The output option should be a jQuery selector (for instance #output).

What to expect in next versions

The current version – at the time of writing this post – is 0.01, which indicates the beta-alike state of the plug-in. I allready have several ideas for improvements here are some:

• Generate settings object.

  This will make it possibel to save and use the new settings on the plug-in reflected on.

• Dynamically update plug-in with the changed settings.

  This will make it possibel for you to play-around and instantly see changes to the plug-in relected upon.

• Reposetory with known settings for plug-ins.

  Imagine that you not just get a row saying that “easing” is a string. Imagine that when we talk about “easing” we could put a selectbox in the output from the reflection process. Such a service could be accived if people start to share the relected output on a reposetory – leaving “fingerprints” would make it possibel to get more friendly help for the outputed reflection result. Perhaps even ask plug-in developers to help with more information about which settings is relevant and a friendly description about it. What a wonderful world it would be…

..what will you share with me?

So please do leave your comments here, on plugInReflector at github, on twitter: netsi1964 or simply drop me an e-mail. If you have any comments or ideas they are welcome.

Links

• Download plugInreflector at github
• The above test page on code.netsi.dk: Example01.html