Firehed's Blog

Updating to jQuery1.3 + jQueryUI1.7

A quick heads-up for changes I’ve noticed so far when upgrading from jQuery 1.2.6+UI1.5.x to 1.3+UI1.7:

UI.tabs() now expects to be run on a wrapper element containing both the tabs and their respective panels. Previously I would have something like this:

<ul id="nav">
<li><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
</ul>
<div id="tab1">Tab 1 content</div>
<div id="tab2">Tab 2 content</div>
<script type="text/javascript">
jQuery("#nav").tabs();
</script>

Since UI1.7, I need the following structure:

<div id="tabs_wrapper">
<ul id="nav">
<li><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
</ul>
<div id="tab1">Tab 1 content</div>
<div id="tab2">Tab 2 content</div>
</div>
<script type="text/javascript">
jQuery("#tabs_wrapper").tabs();
</script>

Minor change, but previously I had ul#nav in div#top and the panels in div#middle, so I needed to do some minor restructuring for UI1.7 compatibility.

Also another minor tweak: UI.dialog.overlay seems to have been shifted from a settable javascript property to styles in div.ui-widget-overlay that’s created for modal dialogs (perhaps non-modal dialogs as well; I haven’t tested).

Old version:

<script type="text/javascript">
jQuery("#dialog").dialog({
autoOpen: false,
modal: true,
resizable: false,
draggable: false,
overlay: {
background-color:'#000',
opacity:0.75
}
});
</script>

New version:

<script type="text/javascript">
jQuery("#dialog").dialog({
autoOpen: false,
modal: true,
resizable: false,
draggable: false
});
</script>
<style type="text/css">
.ui-widget-overlay {
background-color:#000;
opacity:0.75;
}
</style>

If I find other changes (that don’t appear to be documented at docs.jquery.com) I’ll post them up here.