I'm using

http://www.learningjquery.com/2007/10/a-plugin-development-pattern to
develop my own plugin and I am stuck whilst trying to pass information
into the generated 'object'.

Something along the lines of setting the date on a calendar from
outside... such as you can do with the UI datepicker.

Is there a simple example of how to do this somewhere?

I've abstracted the code below as much as I can, the short story is
that plugin builds a list of items you can pick from and populates the
input with text when the item is selected.

Some code...

(function($) {

        $.fn.dc_thingy = function(options) {

                this.each(function() {

                        var opts = $.extend({}, $.fn.dc_thingy.defaults, 
options);
                        var $input = $(this);
                        var selected = null;
                        var timeout = null;

                        // this is how I want the function to work !!!
                        function setfromOutside(s){
                                selected = s;
                                build_thingy();
                        }

                        function setContent(text) {
                                if (timeout) clearTimeout(timeout);
                                $input.val(text).focus();
                                $input.trigger('dc_select', [ text ] );
                                $box.hide();
                        };

                        function buildThingy(date) {
                                $box.empty();
                                // make the contents
                        }

                        // no autocomplete
                        $input.attr("autocomplete","off");

                        // create a container div for the popup
                        var $box = $("<div></div>"));
                        // add it to the end of the body add a class, give it 
absolute
position and then hide it
                        $box.appendTo("body")
                        .addClass(opts.popupClass)
                        .css("position", "absolute")
                        .hide();

                        buildThingy();

                        // Add a class to the relevent input box
                        $(this).addClass(opts.inputClass);

                        // set the position of the box using the dimensions 
plugin and show
it if the input gets focus
                        $(this).focus( function() {
                                var pos = $(this).offset();
                                $(".dc").hide();
                                $box
                                .css("top", pos.top + $(this).outerHeight() )
                                .css("left",pos.left)
                                .show();
                        });

                        // on mousedown reset position and reshow the box
                        $(this).mousedown( function() {
                                var pos = $(this).offset();
                                $box
                                .css("top", pos.top + $(this).outerHeight() )
                                .css("left",pos.left)
                                .show();
                        });

                        // hide the box when the input loses focus
                        $(this).blur( function() {
                                if (timeout) clearTimeout(timeout);
                                timeout = setTimeout( function(){ $box.hide(); 
}, 300);
                        });

                        $(this).keypress( function(e) {
                                switch (e.keyCode) {
                                        case 13: // ENTER
                                                if ($box.css("display") != 
"none") {
                                                        // select item
                                                        return false;
                                                }
                                                break;
                                        case 27: // ESC
                                                $input.focus();
                                                $box.hide();
                                                break;
                                }
                        })

                });
        };

        $.fn.dc_cal.defaults = {
                popupClass : 'dc',
                inputClass : 'dc_has',
        };

})(jQuery);

Reply via email to