mirror of
https://github.com/JangoSteve/jQuery-EasyTabs.git
synced 2026-06-10 15:37:02 +02:00
Created new basic demo with link. Deleted all extraneous demos.
This commit is contained in:
Steve Schwartz
@@ -1,44 +0,0 @@
|
||||
<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 – Basic - 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 ul { margin: 0; padding: 0; }
|
||||
#tab-container ul li { display: inline-block; background: #ccc; border: solid 1px; border-bottom: none; }
|
||||
#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: solid 1px; padding: 0 10px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){ $('#tab-container').easytabs({
|
||||
//cache: false
|
||||
}); });
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="tab-container">
|
||||
<ul>
|
||||
<li><a href="#tab-1-div">Tab 1</a></li>
|
||||
<li><a href="../examples/ajax_content.html div:first-child" data-target="#that-other-tab">The Second Tab</a></li>
|
||||
<li><a href="../examples/ajax_content.html #something" data-target="#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">
|
||||
</div>
|
||||
<div id="lastly">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,10 +0,0 @@
|
||||
<div>
|
||||
<p>
|
||||
Hi there. I'm the first div in ajax_content.html.
|
||||
</p>
|
||||
</div>
|
||||
<div id="something">
|
||||
<p>
|
||||
I'm some other content from ajax_content.html.
|
||||
</p>
|
||||
</div>
|
||||
@@ -1,46 +0,0 @@
|
||||
<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 – Basic - 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 ul { margin: 0; padding: 0; }
|
||||
#tab-container ul li { display: inline-block; background: #ccc; border: solid 1px; border-bottom: none; }
|
||||
#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: solid 1px; padding: 0 10px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){ $('#tab-container').easytabs(); });
|
||||
</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>
|
||||
@@ -1,51 +0,0 @@
|
||||
<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 – Bottom Tabs - 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.min.js" type="text/javascript"></script>
|
||||
|
||||
<style>
|
||||
#tab-container { width: 600px; padding: 0; }
|
||||
#tab-container ul { list-style: none; margin: 0; padding: 0; width: 600px; }
|
||||
#tab-container ul li { float: left; width: 200px; margin: 0; padding: 0; text-align: center; border-top: solid 1px; }
|
||||
#tab-container ul li a { display: block; padding: 15px 0; outline: none; }
|
||||
#tab-container ul li a:hover { text-decoration: underline; }
|
||||
#tab-container ul li.active { width: 198px; background: #fff; border: solid 1px; border-top: none; }
|
||||
#tab-container ul li a.active { font-weight: bold; text-decoration: none; }
|
||||
#tab-container .panel-container { border: solid 1px; border-bottom: none; padding: 10px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){ $('#tab-container').easytabs({
|
||||
animationSpeed: 2000,
|
||||
defaultTab: "li#the-second-tab"
|
||||
}); });
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="tab-container">
|
||||
<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>Configuration</h2>
|
||||
<p>This example displays the second tab by default. Also, the tab-switching animation is slowed down to 4 seconds (2sec fade-out and 2sec fade-in).</p>
|
||||
</div>
|
||||
<div id="lastly">
|
||||
<h2>Heading 3</h2>
|
||||
<p>More stuff from the last tab.</p>
|
||||
</div>
|
||||
</div>
|
||||
<ul>
|
||||
<li><a href="#tab-1-div">Tab 1</a></li>
|
||||
<li id="the-second-tab"><a href="#that-other-tab">The Second Tab</a></li>
|
||||
<li><a href="#lastly">Tab C</a></li>
|
||||
<br style="clear:both;" />
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,57 +0,0 @@
|
||||
<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 – Basic - 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>
|
||||
@@ -1,53 +0,0 @@
|
||||
<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 – Basic - Alfa Jango Blog</title>
|
||||
<script src="../javascripts/jquery-1.4.3.min.js" type="text/javascript"></script>
|
||||
<script src="../javascripts/jquery.easytabs.js" type="text/javascript"></script>
|
||||
|
||||
<style>
|
||||
.mpp_table_container ul { margin: 0; padding: 0; }
|
||||
.mpp_table_container ul li { display: inline-block; background: #ccc; border: solid 1px; border-bottom: none; }
|
||||
.mpp_table_container ul li a { display: block; padding: 5px; outline: none; }
|
||||
.mpp_table_container ul li a:hover { text-decoration: underline; }
|
||||
.mpp_table_container ul li.active-tab { background: #fff; padding-top: 6px; position: relative; top: 1px; }
|
||||
.mpp_table_container ul li a.active-tab { font-weight: bold; }
|
||||
.mpp_table_container .panel { border: solid 1px; padding: 0 10px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
$('.mpp_table_container').easytabs({
|
||||
tabs:'div#mpp_menu ul li',
|
||||
tabActiveClass:'active-tab',
|
||||
animate:false,
|
||||
updateHash: false
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="mpp_table_container_1" class="mpp_table_container">
|
||||
|
||||
<div id="mpp_menu" style="float:left;">
|
||||
<ul id="tabs_1" class="tabs">
|
||||
<li class="tab">
|
||||
<a href="#tabset_blah_panel_1" id="tab_blah_1" style="font-weight:bold;">Blah 1</a>
|
||||
<div class="tab-spacer"></div>
|
||||
</li>
|
||||
<li class="tab">
|
||||
<a href="#data" id="tab_blah_2" style="font-weight:bold;">Blah 2</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<br style="clear: both;" />
|
||||
<div class="panel" id="tabset_blah_panel_1">
|
||||
Panel 1
|
||||
</div>
|
||||
<div class="panel" id="data">
|
||||
Panel 2
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,109 @@
|
||||
<html>
|
||||
<head>
|
||||
<title></title>
|
||||
<script src="../vendor/jquery-1.7.1.min.js" type="text/javascript"></script>
|
||||
<script src="../vendor/jquery.hashchange.min.js" type="text/javascript"></script>
|
||||
<script src="../lib/jquery.easytabs.min.js" type="text/javascript"></script>
|
||||
|
||||
<style>
|
||||
/* Example Styles for Demo */
|
||||
.etabs { margin: 0; padding: 0; }
|
||||
.tab { display: inline-block; zoom:1; *display:inline; background: #eee; border: solid 1px #999; border-bottom: none; -moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; }
|
||||
.tab a { font-size: 14px; line-height: 2em; display: block; padding: 0 10px; outline: none; }
|
||||
.tab a:hover { text-decoration: underline; }
|
||||
.tab.active { background: #fff; padding-top: 6px; position: relative; top: 1px; border-color: #666; }
|
||||
.tab a.active { font-weight: bold; }
|
||||
.tab-container .panel-container { background: #fff; border: solid #666 1px; padding: 10px; -moz-border-radius: 0 4px 4px 4px; -webkit-border-radius: 0 4px 4px 4px; }
|
||||
.panel-container { margin-bottom: 10px; }
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready( function() {
|
||||
$('#tab-container').easytabs();
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h2><a href="http://os.alfajango.com/easytabs">View more demos and docs</a></h2>
|
||||
|
||||
<div id="tab-container" class='tab-container'>
|
||||
<ul class='etabs'>
|
||||
<li class='tab'><a href="#tabs1-html">HTML Markup</a></li>
|
||||
<li class='tab'><a href="#tabs1-js">Required JS</a></li>
|
||||
<li class='tab'><a href="#tabs1-css">Example CSS</a></li>
|
||||
</ul>
|
||||
<div class='panel-container'>
|
||||
<div id="tabs1-html">
|
||||
<h2>HTML Markup for these tabs</h2>
|
||||
|
||||
<pre>
|
||||
<code>
|
||||
<div id="tab-container" class="tab-container">
|
||||
<ul class='etabs'>
|
||||
<li class='tab'><a href="#tabs1-html">HTML Markup</a></li>
|
||||
<li class='tab'><a href="#tabs1-js">Required JS</a></li>
|
||||
<li class='tab'><a href="#tabs1-css">Example CSS</a></li>
|
||||
</ul>
|
||||
<div id="tabs1-html">
|
||||
<h2>HTML Markup for these tabs</h2>
|
||||
<!-- content -->
|
||||
</div>
|
||||
<div id="tabs1-js">
|
||||
<h2>JS for these tabs</h2>
|
||||
<!-- content -->
|
||||
</div>
|
||||
<div id="tabs1-css">
|
||||
<h2>CSS Styles for these tabs</h2>
|
||||
<!-- content -->
|
||||
</div>
|
||||
</div>
|
||||
</code>
|
||||
</pre>
|
||||
|
||||
<p>The HTML markup for your tabs and content can be arranged however you want. At the minimum, you need a container, a collection of links for your tabs (an unordered list by default), and matching divs for your tabbed content. Make sure the tab <code>href</code> attributes match the
|
||||
<code>id</code> of the target panel. This is standard semantic markup for in-page anchors.</p>
|
||||
<p>The class names above are just to make it easy to style. You can make them whatever you want, there's no magic here.</p>
|
||||
</div>
|
||||
<div id="tabs1-js">
|
||||
<h2>JS for these tabs</h2>
|
||||
|
||||
<pre>
|
||||
<code>
|
||||
<script src="/javascripts/jquery.js" type="text/javascript"></script>
|
||||
<script src="/javascripts/jquery.hashchange.js" type="text/javascript"></script>
|
||||
<script src="/javascripts/jquery.easytabs.js" type="text/javascript"></script>
|
||||
</code>
|
||||
</pre>
|
||||
|
||||
<p>Optionally include the jquery <a href="http://benalman.com/projects/jquery-hashchange-plugin/">hashchange plugin</a> (recommended) or <a href="http://www.asual.com/jquery/address/docs/">address plugin</a> to enable forward-
|
||||
and back-button functionality.</p>
|
||||
|
||||
<pre>
|
||||
<code>
|
||||
$('#tab-container').easytabs();
|
||||
</code>
|
||||
</pre>
|
||||
|
||||
</div>
|
||||
<div id="tabs1-css">
|
||||
<h2>CSS Styles for these tabs</h2>
|
||||
|
||||
<code>
|
||||
<pre>
|
||||
.etabs { margin: 0; padding: 0; }
|
||||
.tab { display: inline-block; zoom:1; *display:inline; background: #eee; border: solid 1px #999; border-bottom: none; -moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; }
|
||||
.tab a { font-size: 14px; line-height: 2em; display: block; padding: 0 10px; outline: none; }
|
||||
.tab a:hover { text-decoration: underline; }
|
||||
.tab.active { background: #fff; padding-top: 6px; position: relative; top: 1px; border-color: #666; }
|
||||
.tab a.active { font-weight: bold; }
|
||||
.tab-container .panel-container { background: #fff; border: solid #666 1px; padding: 10px; -moz-border-radius: 0 4px 4px 4px; -webkit-border-radius: 0 4px 4px 4px; }
|
||||
</pre>
|
||||
</code>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,49 +0,0 @@
|
||||
<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 – Disconnected Content - 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.min.js" type="text/javascript"></script>
|
||||
|
||||
<style>
|
||||
#tab-container ul { height: 52px; width: 100%; list-style: none; margin: 0; padding: 0; background: #ccc; }
|
||||
#tab-container ul li { float: left; width: 33.3%; margin: 0; padding: 0; text-align: center; }
|
||||
#tab-container ul li a { display: block; padding: 15px 0; line-height: 20px; outline: none; }
|
||||
#tab-container ul li a:hover { text-decoration: underline; }
|
||||
#tab-container ul li.active { background: #fff; position: relative; left: 1px; }
|
||||
#tab-container ul li a.active { font-weight: bold; text-decoration: none; border: solid 1px; }
|
||||
#tab-container .panel-container { padding: 10px; border: solid 1px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){ $('#tab-container').easytabs(); });
|
||||
</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>
|
||||
<br style="clear:both;" />
|
||||
<h3>Random Info</h3>
|
||||
<p>This information is not contained in the tabbed content and situated between the tabs and content divs</p>
|
||||
<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>
|
||||
@@ -1,106 +0,0 @@
|
||||
<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 – Basic - 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>
|
||||
* { padding: 0; margin: 0 } /* reset browser default margins and paddings */
|
||||
body { padding: 15px; }
|
||||
#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: #eee; 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; margin: 15px 0; }
|
||||
|
||||
#tab-container-2 { background: #fff; padding: 5px; border: solid 1px; }
|
||||
#tab-container-2 ul { margin: 0; padding: 5px 5px 0; background: #ccc; border: solid 1px; }
|
||||
#tab-container-2 ul li { display: inline-block; background: #eee; border: solid 1px; border-bottom: none; margin: 0; }
|
||||
#tab-container-2 ul li a { display: block; padding: 5px; outline: none; }
|
||||
#tab-container-2 ul li a:hover { text-decoration: underline; }
|
||||
#tab-container-2 ul li.active { background: #fff; padding-top: 6px; position: relative; top: 1px; }
|
||||
#tab-container-2 ul li a.active { font-weight: bold; }
|
||||
#tab-container-2 .panel-container { border: none; padding: 0 10px; background: #fff; margin: 15px 0; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
$('#tab-container').easytabs();
|
||||
|
||||
$('#tab-container-2').easytabs({
|
||||
collapsible: true,
|
||||
transitionIn: 'slideDown',
|
||||
transitionOut: 'slideUp',
|
||||
transitionCollapse: 'fadeOut',
|
||||
transitionUncollapse: 'fadeIn'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<h2>
|
||||
Automatically animating height difference between panels of differing heights
|
||||
</h2>
|
||||
<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>This tab has a lot of content, and so it's larger than the others.</p>
|
||||
<br />
|
||||
<p>The lim'rick packs laughs anatomical</p>
|
||||
<p>In space that is quite economical,</p>
|
||||
<p> But the good ones I've seen</p>
|
||||
<p> So seldom are clean,</p>
|
||||
<p>And the clean ones so seldom are comical.</p>
|
||||
</div>
|
||||
<div id="lastly">
|
||||
<h2>Heading 3</h2>
|
||||
<p>More stuff from the last tab.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br /><br />
|
||||
<h2>
|
||||
Using slideUp and slideDown to transition between tab changes,
|
||||
<br />
|
||||
and fadeOut and fadeIn for collapsing transitions
|
||||
</h2>
|
||||
<div id="tab-container-2">
|
||||
<ul>
|
||||
<li><a href="#tab1">Tab 1</a></li>
|
||||
<li><a href="#tab2">Tab 2</a></li>
|
||||
<li><a href="#tab3">Tab 3</a></li>
|
||||
</ul>
|
||||
<div class="panel-container">
|
||||
<div id="tab1">
|
||||
<h2>Heading 1</h2>
|
||||
<p>This is the content of the first tab.</p>
|
||||
</div>
|
||||
<div id="tab2">
|
||||
<h2>Heading 2</h2>
|
||||
<p>Stuff from the second tab.</p>
|
||||
</div>
|
||||
<div id="tab3">
|
||||
<h2>Heading 3</h2>
|
||||
<p>More stuff from the last tab.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,142 +0,0 @@
|
||||
<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 – Multiple on Same Page - 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 ul { margin: 0; padding: 0; }
|
||||
#tab-container ul li { display: inline-block; background: #ccc; border: solid 1px; border-bottom: none; }
|
||||
#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: solid 1px; padding: 0 10px; }
|
||||
|
||||
#tab-container-2 { width: 600px; padding: 0; margin: 20px 0 80px; }
|
||||
#tab-container-2 ul { list-style: none; margin: 0; padding: 0; width: 600px; }
|
||||
#tab-container-2 ul li { float: left; width: 200px; margin: 0; padding: 0; text-align: center; border-top: solid 1px; }
|
||||
#tab-container-2 ul li a { display: block; padding: 15px 0; outline: none; }
|
||||
#tab-container-2 ul li a:hover { text-decoration: underline; }
|
||||
#tab-container-2 ul li.active { width: 198px; background: #fff; border: solid 1px; border-top: none; }
|
||||
#tab-container-2 ul li a.active { font-weight: bold; text-decoration: none; }
|
||||
#tab-container-2 .panel-container { border: solid 1px; border-bottom: none; padding: 10px; }
|
||||
|
||||
#tab-container-3 { border: solid 1px; height: 300px; }
|
||||
#tab-container-3 ul { height: 300px; list-style: none; margin: 0; padding: 0; background: #ccc; float: left; border-right: solid 1px; }
|
||||
#tab-container-3 ul li { width: 100px; margin: 0; padding: 0; text-align: center; }
|
||||
#tab-container-3 ul li a { display: block; padding: 15px 0; outline: none; }
|
||||
#tab-container-3 ul li a:hover { text-decoration: underline; }
|
||||
#tab-container-3 ul li.selected-tab { background: #fff; position: relative; left: 1px; border-style: solid; border-width: 1px 0; }
|
||||
#tab-container-3 ul li:first-child.selected-tab { border-top: none; }
|
||||
#tab-container-3 ul li a.selected-tab { font-weight: bold; text-decoration: none; }
|
||||
#tab-container-3 .panel-container { padding-top: 5px; padding-left: 120px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
$('#tab-container').easytabs();
|
||||
|
||||
$('#select-second-tab').click(function(){
|
||||
// Selects the 2nd tab
|
||||
$('#tab-container').easytabs('select', 'li:nth-child(2)');
|
||||
});
|
||||
$('#select-third-tab').click(function(){
|
||||
// Selects the 2nd tab
|
||||
$('#tab-container').easytabs('select', '#lastly');
|
||||
});
|
||||
|
||||
$('#tab-container-2').easytabs({
|
||||
animationSpeed: 1000,
|
||||
defaultTab: "li#default",
|
||||
cycle: 3000
|
||||
});
|
||||
|
||||
$('#tab-container-3').easytabs({
|
||||
animate: false,
|
||||
tabActiveClass: "selected-tab",
|
||||
panelActiveClass: "displayed"
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="tab-container">
|
||||
<ul>
|
||||
<li><a href="#tab-1-div">Tab 1</a></li>
|
||||
<li class="that-one"><a href="#that-other-tab">The Second Tab</a></li>
|
||||
<li><a href="#lastly">Tab C</a></li>
|
||||
</ul>
|
||||
<div id="wha" class="panel-container" class="tab-container">
|
||||
<div id="tab-1-div">
|
||||
<h2>Heading 1</h2>
|
||||
<p>This is the content of the first tab.</p>
|
||||
<p>
|
||||
<button id="select-second-tab">Select second tab</button>
|
||||
</p>
|
||||
<p>
|
||||
<button id="select-third-tab">Select third panel by ID</button>
|
||||
</p>
|
||||
</div>
|
||||
<div id="that-other-tab" class="tab-container">
|
||||
<h2>Heading 2</h2>
|
||||
<p>Stuff from the second tab.</p>
|
||||
</div>
|
||||
<div id="lastly" class="tab-container">
|
||||
<h2>Heading 3</h2>
|
||||
<p>More stuff from the last tab.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br style="clear:both;" />
|
||||
|
||||
<div id="tab-container-2">
|
||||
<div class="panel-container">
|
||||
<div id="2-tab-1-div" class="tab-container-2">
|
||||
<h2>Heading 1</h2>
|
||||
<p>This is the content of the first tab.</p>
|
||||
</div>
|
||||
<div id="2-that-other-tab" class="tab-container-2">
|
||||
<h2>Configuration</h2>
|
||||
<p>This example displays the second tab by default. Also, the tab-switching animation is slowed down to 2 seconds (1sec fade-out and 1sec fade-in).</p>
|
||||
</div>
|
||||
<div id="2-lastly" class="tab-container-2">
|
||||
<h2>Heading 3</h2>
|
||||
<p>More stuff from the last tab.</p>
|
||||
</div>
|
||||
</div>
|
||||
<ul>
|
||||
<li><a href="#2-tab-1-div">Tab 1</a></li>
|
||||
<li id="default"><a href="#2-that-other-tab">The Second Tab</a></li>
|
||||
<li><a href="#2-lastly">Tab C</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<br style="clear:both;" />
|
||||
|
||||
<div id="tab-container-3">
|
||||
<ul>
|
||||
<li><a href="#3-tab-1-div">Tab 1</a></li>
|
||||
<li><a href="#3-that-other-tab">The Second Tab</a></li>
|
||||
<li><a href="#3-lastly">Tab C</a></li>
|
||||
</ul>
|
||||
<div class="panel-container">
|
||||
<div id="3-tab-1-div" class="tab-container-3">
|
||||
<h2>Configurations</h2>
|
||||
<p>This example has the animation disabled, so tab-switching is instantaneous. It also sets the active class names to custom names for more control over CSS stylization.</p>
|
||||
</div>
|
||||
<div id="3-that-other-tab" class="tab-container-3">
|
||||
<h2>Heading 2</h2>
|
||||
<p>Stuff from the second tab.</p>
|
||||
</div>
|
||||
<div id="3-lastly" class="tab-container-3">
|
||||
<h2>Heading 3</h2>
|
||||
<p>More stuff from the last tab.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,70 +0,0 @@
|
||||
<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 – Basic - Alfa Jango Blog</title>
|
||||
<script src="../javascripts/jquery-1.6.2.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 ul { margin: 0; padding: 0; }
|
||||
.tab-container ul li { display: inline-block; background: #ccc; border: solid 1px; border-bottom: none; }
|
||||
.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: solid 1px; padding: 0 10px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){ $('#outer-container').easytabs(); });
|
||||
$(document).ready(function(){ $('#inner-container').easytabs(); });
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="tab-container" id="outer-container">
|
||||
<ul>
|
||||
<li><a href="#tab-1">Tab 1</a></li>
|
||||
<li><a href="#tab-2">Tab 2</a></li>
|
||||
<li><a href="#tab-3">Tab 3</a></li>
|
||||
</ul>
|
||||
<div class="panel-container">
|
||||
<div id="tab-1">
|
||||
<h2>Heading 1</h2>
|
||||
<p>This is the content of the first tab.</p>
|
||||
</div>
|
||||
<div id="tab-2">
|
||||
<h2>Heading 2</h2>
|
||||
<p>Stuff from the second tab.</p>
|
||||
</div>
|
||||
<div id="tab-3">
|
||||
<h2>Heading 3</h2>
|
||||
<p>More stuff from the last tab.</p>
|
||||
|
||||
<div class="tab-container" id="inner-container">
|
||||
<ul>
|
||||
<li><a href="#tab-a">Subtab A</a></li>
|
||||
<li><a href="#tab-b">Subtab B</a></li>
|
||||
<li><a href="#tab-c">Subtab C</a></li>
|
||||
</ul>
|
||||
<div class="panel-container">
|
||||
<div id="tab-a">
|
||||
<h3>Heading A</h3>
|
||||
<p>This is a nested first tab</p>
|
||||
</div>
|
||||
<div id="tab-b">
|
||||
<h3>Heading B</h3>
|
||||
<p>This is a nested second tab</p>
|
||||
</div>
|
||||
<div id="tab-c">
|
||||
<h3>Heading C</h3>
|
||||
<p>This is a nested third tab</p>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,42 +0,0 @@
|
||||
<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 – Basic - 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 ul { margin: 0; padding: 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; }
|
||||
#tab-container ul li a.active { font-weight: bold; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){ $('#tab-container').easytabs({tabs: "legend ul li"}); });
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<form id="tab-container">
|
||||
<legend>
|
||||
Form parts:
|
||||
<ul>
|
||||
<li><a href="#tab1">Tab 1</a></li>
|
||||
<li><a href="#tab2">Tab 2</a></li>
|
||||
</ul>
|
||||
</legend>
|
||||
<div class="field-container">
|
||||
<fieldset id="tab1">
|
||||
<label>Tab 1 input</label>
|
||||
<input type="text" />
|
||||
</fieldset>
|
||||
<fieldset id="tab2">
|
||||
<label>Tab 2 input</label>
|
||||
<input type="text" />
|
||||
</fieldset>
|
||||
</div>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,102 +0,0 @@
|
||||
<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 try out custom Next/previous links</title>
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.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>
|
||||
* { padding: 0; margin: 0 } /* reset browser default margins and paddings */
|
||||
body { padding: 15px; }
|
||||
|
||||
#tabs { background: #fff; padding: 5px; border: solid 1px; width:500px}
|
||||
#tabs ul { margin: 0; padding: 5px 5px 0; background: #ccc; border: solid 1px; }
|
||||
#tabs ul li { display: inline-block; background: #eee; border: solid 1px; border-bottom: none; margin: 0; }
|
||||
#tabs ul li a { display: block; padding: 5px; outline: none; }
|
||||
#tabs ul li a:hover { text-decoration: underline; }
|
||||
#tabs ul li.active { background: #fff; padding-top: 6px; position: relative; top: 1px; }
|
||||
#tabs ul li a.active { font-weight: bold; }
|
||||
#tabs .panel-container { border: none; padding: 0 10px; background: #fff; margin: 15px 0; }
|
||||
.prev-tab{}
|
||||
.next-tab{float:right}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
|
||||
$('#tabs').easytabs({
|
||||
collapsible: true,
|
||||
transitionIn: 'slideDown',
|
||||
transitionOut: 'slideUp',
|
||||
transitionCollapse: 'fadeOut',
|
||||
transitionUncollapse: 'fadeIn'
|
||||
});
|
||||
|
||||
|
||||
var $tabs = $('#tabs').data('easytabs').tabs;
|
||||
|
||||
$(".ui-tabs-panel").each(function(i){
|
||||
var totalSize = $(".ui-tabs-panel").size();
|
||||
if (i != totalSize) {
|
||||
next = i + 1;
|
||||
$(this).append("<a href='#' class='next-tab mover' rel='" + next + "'>Next Page »</a>");
|
||||
}
|
||||
if (i != 0) {
|
||||
prev = i - 1;
|
||||
$(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>« Prev Page</a>");
|
||||
}
|
||||
});
|
||||
|
||||
$('.next-tab, .prev-tab').click(function() {
|
||||
var i = parseInt($(this).attr('rel'));
|
||||
var tabSelector = $tabs.children('a:eq(' + i + ')').attr('href');
|
||||
$('#tabs').easytabs('select', tabSelector);
|
||||
return false;
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
|
||||
|
||||
<h2>
|
||||
Next/previous links,
|
||||
<br />
|
||||
and fadeOut and fadeIn for collapsing transitions
|
||||
</h2>
|
||||
<div id="tabs">
|
||||
<ul>
|
||||
|
||||
<li><a href="#tab1">Tab 1</a></li>
|
||||
<li><a href="#tab2">Tab 2</a></li>
|
||||
<li><a href="#tab3">Tab 3</a></li>
|
||||
</ul>
|
||||
<div class="panel-container">
|
||||
<div id="tab1" class="ui-tabs-panel">
|
||||
<h2>Heading 1</h2>
|
||||
|
||||
<p>This is the content of the first tab.</p>
|
||||
</div>
|
||||
<div id="tab2" class="ui-tabs-panel">
|
||||
<h2>Heading 2</h2>
|
||||
<p>Stuff from the second tab.</p>
|
||||
</div>
|
||||
<div id="tab3" class="ui-tabs-panel">
|
||||
|
||||
<h2>Heading 3</h2>
|
||||
<p>More stuff from the last tab.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,53 +0,0 @@
|
||||
<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 – Side Tabs - 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.min.js" type="text/javascript"></script>
|
||||
|
||||
<style>
|
||||
#tab-container { border: solid 1px; height: 300px; }
|
||||
#tab-container ul { height: 300px; list-style: none; margin: 0; padding: 0; background: #ccc; float: left; border-right: solid 1px; }
|
||||
#tab-container ul li { width: 100px; margin: 0; padding: 0; text-align: center; }
|
||||
#tab-container ul li a { display: block; padding: 15px 0; outline: none; }
|
||||
#tab-container ul li a:hover { text-decoration: underline; }
|
||||
#tab-container ul li.selected-tab { background: #fff; position: relative; left: 1px; border-style: solid; border-width: 1px 0; }
|
||||
#tab-container ul li:first-child.selected-tab { border-top: none; }
|
||||
#tab-container ul li a.selected-tab { font-weight: bold; text-decoration: none; }
|
||||
#tab-container .panel-container { padding-top: 5px; padding-left: 120px; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){ $('#tab-container').easytabs({
|
||||
animate: false,
|
||||
tabActiveClass: "selected-tab",
|
||||
panelActiveClass: "displayed"
|
||||
}); });
|
||||
</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>
|
||||
<br style="clear:both;" />
|
||||
</ul>
|
||||
<div class="panel-container">
|
||||
<div id="tab-1-div">
|
||||
<h2>Configurations</h2>
|
||||
<p>This example has the animation disabled, so tab-switching is instantaneous. It also sets the active class names to custom names for more control over CSS stylization.</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>
|
||||
Reference in New Issue
Block a user