Firehed's Blog

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.