averello/jQuery-EasyTabs-mirror
1
0
Fork 0
mirror of https://github.com/JangoSteve/jQuery-EasyTabs.git synced 2026-06-10 15:37:02 +02:00
Code Issues Packages Projects Releases Wiki Activity

Added demo page for collapsible and cancel event features. Added useful data to event hooks.

Browse Source
This commit is contained in:
Steve Schwartz
2011-03-21 02:27:19 -04:00
parent eae5277455
commit 150407ea39
2 changed files with 63 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/collapsible-and-cancel.html
+57
View File
@@ -0,0 +1,57 @@
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JQuery EasyTabs Demo &#8211; Basic &#45; Alfa Jango Blog</title>
<script src="../javascripts/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="../javascripts/jquery.hashchange.min.js" type="text/javascript"></script>
<script src="../javascripts/jquery.easytabs.js" type="text/javascript"></script>
<style>
#tab-container { background: #fff; padding: 5px; border: solid 1px; }
#tab-container ul { margin: 0; padding: 5px 5px 0; background: #ccc; border: solid 1px; }
#tab-container ul li { display: inline-block; background: #ccc; border: solid 1px; border-bottom: none; margin: 0; }
#tab-container ul li a { display: block; padding: 5px; outline: none; }
#tab-container ul li a:hover { text-decoration: underline; }
#tab-container ul li.active { background: #fff; padding-top: 6px; position: relative; top: 1px; }
#tab-container ul li a.active { font-weight: bold; }
#tab-container .panel-container { border: none; padding: 0 10px; background: #fff; }
</style>
<script type="text/javascript">
$(document).ready(function(){
$('#tab-container').easytabs({
collapsible: true
});
$('#tab-container').bind('easytabs:before', function(e, tab){
if ( ! tab.hasClass('active') && ! tab.hasClass('collapsed') ) {
return confirm("Are you sure you want to switch tabs?");
}
});
});
</script>
</head>
<body>
<div id="tab-container">
<ul>
<li><a href="#tab-1-div">Tab 1</a></li>
<li><a href="#that-other-tab">The Second Tab</a></li>
<li><a href="#lastly">Tab C</a></li>
</ul>
<div class="panel-container">
<div id="tab-1-div">
<h2>Heading 1</h2>
<p>This is the content of the first tab.</p>
</div>
<div id="that-other-tab">
<h2>Heading 2</h2>
<p>Stuff from the second tab.</p>
</div>
<div id="lastly">
<h2>Heading 3</h2>
<p>More stuff from the last tab.</p>
</div>
</div>
</div>
</body>
</html>
javascripts/jquery.easytabs.js
+6 -6
View File
@@ -165,7 +165,7 @@
if( opts.collapsible && ! skipUpdateToHash && ($clicked.hasClass(opts.tabActiveClass) || $clicked.hasClass(opts.collapsedClass)) ) {
$panels.stop(true,true);
if( fire($container,"easytabs:before") ){
if( fire($container,"easytabs:before", [$clicked, $targetPanel, data]) ){
$tabs.filter("." + opts.tabActiveClass).removeClass(opts.tabActiveClass).children().removeClass(opts.tabActiveClass);
if( $clicked.hasClass(opts.collapsedClass) ){
$clicked.parent()
@@ -177,7 +177,7 @@
$targetPanel
.addClass(opts.panelActiveClass)
[transitions.uncollapse](transitions.speed, function(){
$container.trigger('easytabs:midTransition');
$container.trigger('easytabs:midTransition', [$clicked, $targetPanel, data]);
if(typeof callback == 'function') callback();
});
} else {
@@ -185,14 +185,14 @@
$targetPanel
.removeClass(opts.panelActiveClass)
[transitions.collapse](transitions.speed, function(){
$container.trigger("easytabs:midTransition");
$container.trigger("easytabs:midTransition", [$clicked, $targetPanel, data]);
if(typeof callback == 'function') callback();
});
}
}
} else if( ! $clicked.hasClass(opts.tabActiveClass) || ! $targetPanel.hasClass(opts.panelActiveClass) ){
$panels.stop(true,true);
if( fire($container,"easytabs:before") ){
if( fire($container,"easytabs:before", [$clicked, $targetPanel, data]) ){
var $visiblePanel = $panels.filter(":visible"),
showPanel = function(){
$targetPanel
@@ -200,7 +200,7 @@
// Save the new tabs and panels to the container data (with new active tab/panel)
$container.data("easytabs").tabs = $tabs;
$container.data("easytabs").panels = $panels;
$container.trigger("easytabs:after");
$container.trigger("easytabs:after", [$clicked, $targetPanel, data]);
// callback only gets called if selectTab actually does something, since it's inside the if block
if(typeof callback == 'function'){
callback();
@@ -217,7 +217,7 @@
$targetPanel.addClass(opts.panelActiveClass);
// At this point, the previous panel is hidden, and the new one will be selected
$container.trigger("easytabs:midTransition");
$container.trigger("easytabs:midTransition", [$clicked, $targetPanel, data]);
if ( opts.updateHash && ! skipUpdateToHash ) {
//window.location = url.toString().replace((url.pathname + hash), (url.pathname + $clicked.attr("href")));
// Not sure why this behaves so differently, but it's more straight forward and seems to have less side-effects