[jQuery] Passing Values into internal variables
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);