Hello all

I am building a plugin that is to be a small applet so to say - its not a function as such that you can apply many times to a selector - basically it will just be appended to the body.

My first question is about how I create a function inside the plugin that can become chainable?

So far the applet is made up of a container with a header and body - the body holds a accordion and the accordion holds widgets (its not programmed like this right now, thats how I want it to be - at the moment I have just one by one created all the elements and then appended or prepended them in as needed.

I would however like to create a widget function that will render the widget for me when I call it - it will not have to be 100% open ended (as in you can just create a random widget) - the widgets will be pre-defined by me inside the function and I will via a variable then call which of the widgets I want rendered and appended/prepended/html'ed inside the parent container (also defined by a variable).

The reason for this is that I want freedom when it comes to using and manipulating the elements (for instance being able to drag a widget out of the accordion inside the panel and dock it somewhere), as well as I would like to make the code as tiny as possible.

What I had in mind when I tried this was to do it by switch and case - and make it go something like this.

Declare the function and variables
Prepare the widget container (add id via a prefix and widget-name/type as defined in the variable when calling the function)
Go through the case options, find the one wanted - prepare the content
End the case options
Append the widget container to the parent
Append the widget content to the widget container

This way I would only have to write the appending code once for all of it and it would be as "open ended" as possible (right word here guys???)

Now keep in mind that I am very new to both Javascript and jQuery please, I know basic PHP (and I'm not good at it, but I am great at manipulating existing code to my own purposes lol) but am (in my own eyes lol) really good at HTML and CSS (know thats not code, but if you wanna do that the right way, then that can be enough hehe).

Here is how I tried to make it work (and I can make the switch case stuff work, but the rendering of the elements does not work out right for me.

1. function widget(widgetname,parent) {
2.         var p = 'mw-widget-'+widgetname;
3.         var widget = '<div id="'+p+'"></div>';
4.         switch(widgetname) {
5.                 case color:
   
6.                         var content = '<h4>Color</h4>'+
7.                         '<p>Color: <span id="'+p+'-getcolor">'+dColor+'</span></p>';
8.                         break;
9.                 case text:
10.                         var content = '<h4>Text</h4>'+
11.                         '<p>Color: <span id="'+p+'-gettext">'+dText+'</span></p>';
12.                         break;
13.                 default:
14.         }
15.         $(widget).appendTo(parent);
16.         $(content).appendTo('#'+p);
    }
    

Line 3: Is it better to create it and append it right away to the parent and then do it like this instead:

1. var $widget = $('<div id="'+p+></div>').appendTo(parent);

However this is not an option for the content variable - I want that as a variable so I can limit the code to append the widget itself to line16 instead of inside each case.

Using jQuery 1.4.2 (which I should have started with right away, started on 1.3.2 duh!) I think I've seen divs declared when appended something like this...

1. $('<div />)
2. .attr({
3.         id: p
4. })
5. .appendTo(parent);

But not sure if its .attr or what it is that whould be used....

Well anyways - hope to some will reply