Stuck on structure of this jquery plugin

Question

I'm practicing jquery plugins and need help finishing this one, especially the outside skeleton.

Let's say I have this markup

<div class="tochange"></div>
<div class="tochange"></div>
<div class="tochange"></div>

and I want the plugin to add to div.tochange this markup

<div class="root">Root</div>

so that it's

<div class="tochange">
   <div class="root">Root</div>
</div>

Then if the root is clicked, replace it with 2 divs so the markup looks like this

<div class="tochange">
   <div class="child">Child</div>
   <div class="child">Child</div>
</div>

If the child is clicked, it goes back to parent

<div class="tochange">
   <div class="root">Root</div>
</div>

I'm following documentation but I don't know if I need methods for this. My guess is that I do but I can't finalize the structure of this plugin in my head. This is my first plugin and I thought a practical idea of my own is the best way to learn, but I'm stuck. Can someone who's done this before set me on the right track. I'm a little lost on this.

(function($){
    $.fn.sample = function(options) {

        var settings = {
            'possibleparam1' : 'value1',
        };

        var methods = {
            init: function( options ) { },
            tochildren : function( ) { },
            toparent : function( ) { },
        };


        return this.each(function() { /*(i) {*/
            // If options exist, merge them with our default settings
            if (options) { 
                $.extend(settings, options);
            }

            // plugin code goes here

        });

    };
})( jQuery );

Try and write the jquery code for a simple case first. Then extend it and make it a plugin (for the general case). — davin, Feb 05 '11 at 12:39
@davin, My concern is about getting the structure of the plugin right. I'm having trouble making sure the skeleton is correct. — zmol, Feb 05 '11 at 12:47

score 0 · Answer 1 · edited May 23 '17 at 11:55

You can use several methods: Try $("field_name").update("New text"); or $(this).replaceWith.

I have something like this in my site and I'm using: (don't mind the func name - its my ajax callback)

function setOutput()
            {

                if(httpObject.readyState == 4)
                {
                    document.getElementById('photos').innerHTML = "<div id=\"gallery\" clas.....</ul></div>";

                }
            }

Stuck on structure of this jquery plugin

1 Answers1