2nd Issue is: Once select returns false in the callback you cannot tab
away even if you click on “YES, I am sure I want to Tab away”. You are
stuck with the same tab untill you refresh the screen.
-------------------------------------------------------------------------
In the following example I am only using static tabs instead of Ajax
Tabs before. For Ajax Tabs, Tab contents refresh even if you stay on
the same tab. But for static tabs, tab contents are not refreshed.
-------------------------------------------------------------------------
before using this example please make sure you have jquery-1.2.6.js,
ui.core.js, ui.tabs.js & ui.tabs.css in the same folder as where you
have following:
------------tab_index.htm----------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/
javascript">
<title>jQuery UI Tabs / Tabs 3</title>
<link rel="stylesheet" href="ui.tabs.css" type="text/css"
media="print, projection, screen">
<script src="jquery-1.2.6.js" type="text/javascript"></script>
<script src="ui.core.js" type="text/javascript"></script>
<script src="ui.tabs.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#ap > ul').tabs({
fx: { opacity: 'toggle', duration: 'fast' }
});
});
function checkChangeFlag()
{
var agree = confirm("Are you sure you want to
tab away without
saving?");
if (agree)
{
return true ;
}
else
{
//stay on the same tab
$('#ap > ul').tabs({
select: function(e, ui) {
return false ;
}
});
}
}
</script>
</head>
<body>
<h2>Testing Tab Library</h2>
<div id="ap">
<ul>
<li><a href="#fragment-16" onclick="return
checkChangeFlag()"><span>One</span></a></li>
<li><a href="#fragment-17" onclick="return
checkChangeFlag()"><span>Tab Two</span></a></li>
<li><a href="#fragment-18" onclick="return
checkChangeFlag()"><span>Tab Three</span></a></li>
</ul>
<div id="fragment-16">
<p>
Define callback functions that are invoked at
different points in time during the tab switch process.
<br>
If the select callback returns false, the clicked
tab won't be selected. This is useful if switching
tabs requires form validation before for example.
This is Page One.
</p>
</div>
<div id="fragment-17">
<p>Page Two from Div</p>
</div>
<div id="fragment-18">
<p>Page Three from DIV</p>
</div>
</body>
</html>
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
