I originally started this on the jquery forum, but was redirected to
this forum. here is the original post
http://groups.google.com/group/jquery-en/browse_thread/thread/dfe79943ef15563e.
plugin references:
the spinner is jQuery.ui.spinner 1.10 written by Brant Burnett.
jquery-ui-1.7.2.custom.min.js. I'm using modals, tabs and datepicker.
scenario:
I have a set of tabs that load with ajax content. within this content
is a textbox that will transformed into a spinner.
the spinner calculates the height/width/margins of the controls using
the element's outerHeight/Width() property. until the content is
attached to the DOM the value is zero.
calling $("text", ui.panel).spinner(); in the load event will use 0 in
the calculations. calling $("text", ui.panel).spinner(); in the show
event produces the the proper results.
so far so good.
also within the ajaxed tab is a link that will change the current tabs
url and reload it.
$("a").live("click", function(){
var index = $("#tabs").tabs("option", "selected");
$("#tabs").tabs("url", index, this.href).tabs("load", index);
});
however this won't call the show function to transform the text into a
spinner. changing the a.click to
$("a").live("click", function(){
var index = $("#tabs").tabs("option", "selected");
$("#tabs").tabs("url", index, this.href).tabs("select", index);
});
doesn't do anything because the current tab is already selected.
I also experimented with 2 other options, detailed in the link above,
but i didn't like the "flash".
I created plugin to work with the spinner and hard code the height/
width/margins for me and put the spinner call in the load function.
the final result looks like this
$("#tabs").tabs({
load: function(event, ui){
$("text", ui.panel).spinner().forceSpinnerStyling();
}
});
where forceSpinnerStyling will traverse the spinner and set the style
attribute with hard coded values.
adding <script>$(function(){$("text").spinner();});<script> to the
ajaxed content doesn't work either. it executes before the
outherHeight/Width() are set for the text element.
Ideally I would like to call show after loading, but there doesn't
seem to be a $("#tabs").tabs("show", index); option.
--
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en.
