Repository: aarondo/tabulous.js
Branch: master
Commit: cf4b029bf788
Files: 9
Total size: 29.0 KB
Directory structure:
gitextract_oid7um63/
├── .gitattributes
├── .gitignore
├── README.md
└── demo/
├── demo/
│ ├── index.html
│ ├── js.js
│ ├── tabulous.css
│ └── tabulous.js
└── src/
├── tabulous.css
└── tabulous.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitattributes
================================================
# Auto detect text files and perform LF normalization
* text=auto
# Custom for Visual Studio
*.cs diff=csharp
*.sln merge=union
*.csproj merge=union
*.vbproj merge=union
*.fsproj merge=union
*.dbproj merge=union
# Standard to msysgit
*.doc diff=astextplain
*.DOC diff=astextplain
*.docx diff=astextplain
*.DOCX diff=astextplain
*.dot diff=astextplain
*.DOT diff=astextplain
*.pdf diff=astextplain
*.PDF diff=astextplain
*.rtf diff=astextplain
*.RTF diff=astextplain
================================================
FILE: .gitignore
================================================
#################
## Eclipse
#################
*.pydevproject
.project
.metadata
bin/
tmp/
*.tmp
*.bak
*.swp
*~.nib
local.properties
.classpath
.settings/
.loadpath
# External tool builders
.externalToolBuilders/
# Locally stored "Eclipse launch configurations"
*.launch
# CDT-specific
.cproject
# PDT-specific
.buildpath
#################
## Visual Studio
#################
## Ignore Visual Studio temporary files, build results, and
## files generated by popular Visual Studio add-ons.
# User-specific files
*.suo
*.user
*.sln.docstates
# Build results
[Dd]ebug/
[Rr]elease/
x64/
build/
[Bb]in/
[Oo]bj/
# MSTest test Results
[Tt]est[Rr]esult*/
[Bb]uild[Ll]og.*
*_i.c
*_p.c
*.ilk
*.meta
*.obj
*.pch
*.pdb
*.pgc
*.pgd
*.rsp
*.sbr
*.tlb
*.tli
*.tlh
*.tmp
*.tmp_proj
*.log
*.vspscc
*.vssscc
.builds
*.pidb
*.log
*.scc
# Visual C++ cache files
ipch/
*.aps
*.ncb
*.opensdf
*.sdf
*.cachefile
# Visual Studio profiler
*.psess
*.vsp
*.vspx
# Guidance Automation Toolkit
*.gpState
# ReSharper is a .NET coding add-in
_ReSharper*/
*.[Rr]e[Ss]harper
# TeamCity is a build add-in
_TeamCity*
# DotCover is a Code Coverage Tool
*.dotCover
# NCrunch
*.ncrunch*
.*crunch*.local.xml
# Installshield output folder
[Ee]xpress/
# DocProject is a documentation generator add-in
DocProject/buildhelp/
DocProject/Help/*.HxT
DocProject/Help/*.HxC
DocProject/Help/*.hhc
DocProject/Help/*.hhk
DocProject/Help/*.hhp
DocProject/Help/Html2
DocProject/Help/html
# Click-Once directory
publish/
# Publish Web Output
*.Publish.xml
*.pubxml
# NuGet Packages Directory
## TODO: If you have NuGet Package Restore enabled, uncomment the next line
#packages/
# Windows Azure Build Output
csx
*.build.csdef
# Windows Store app package directory
AppPackages/
# Others
sql/
*.Cache
ClientBin/
[Ss]tyle[Cc]op.*
~$*
*~
*.dbmdl
*.[Pp]ublish.xml
*.pfx
*.publishsettings
# RIA/Silverlight projects
Generated_Code/
# Backup & report files from converting an old project file to a newer
# Visual Studio version. Backup files are not needed, because we have git ;-)
_UpgradeReport_Files/
Backup*/
UpgradeLog*.XML
UpgradeLog*.htm
# SQL Server files
App_Data/*.mdf
App_Data/*.ldf
#############
## Windows detritus
#############
# Windows image file caches
Thumbs.db
ehthumbs.db
# Folder config file
Desktop.ini
# Recycle Bin used on file shares
$RECYCLE.BIN/
# Mac crap
.DS_Store
#############
## Python
#############
*.py[co]
# Packages
*.egg
*.egg-info
dist/
build/
eggs/
parts/
var/
sdist/
develop-eggs/
.installed.cfg
# Installer logs
pip-log.txt
# Unit test / coverage reports
.coverage
.tox
#Translations
*.mo
#Mr Developer
.mr.developer.cfg
================================================
FILE: README.md
================================================
tabulous.js
===========
A jQuery tabs module for todays web!
### Documentation
Tabulous.js can be used with any contents you choose in the tabs and it couldn't be more simpler to use.
#### ..:: Getting Started
##### Include the relevant files
Firstly include jQuery and the tabulous.css and tabulous.js files. Place these before `<head>` section
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="tabulous.js"></script>
<script type="text/javascript" src="js.js"></script>
##### Create the tabs
`````
<div id="tabs">
<ul>
<li><a href="#tabs-1" title="">Tab 1</a></li>
<li><a href="#tabs-2" title="">Tab 2</a></li>
<li><a href="#tabs-3" title="">Tab 3</a></li>
</ul>
<div id="tabs_container">
<div id="tabs-1">
<!--tab content-->
</div>
<div id="tabs-2">
<!--tab content-->
</div>
<div id="tabs-3">
<!--tab content-->
</div>
</div><!--End tabs container-->
</div><!--End tabs-->
`````
##### Initiate the plugin
Once you have created your tabs you will need to initiate the plugin.
At its most basic level you can initiate the plugin like:
`````
$(document).ready(function ($) {
$('#tabs').tabulous();
});
`````
If you want to initiate the plugin with options then you can do so like:
`````
$('#tabs').tabulous({
effect: 'scale'
});
`````
#### ..:: Options
<table>
<thead>
<tr>
<th>Variable</th>
<th>Default Value</th>
<th>Description</th>
<th>Valid Options</th>
</tr>
</thead>
<tbody>
<tr>
<td>effect</td>
<td>scale</td>
<td>The effect to use for the transition</td>
<td>scale / slideLeft / scaleUp / flip</td>
</tr>
</tbody>
</table>
================================================
FILE: demo/demo/index.html
================================================
<html>
<head>
<title>Tabulous.js</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
<link href='tabulous.css' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="wrapper">
<div id="tabs">
<ul>
<li><a href="#tabs-1" title="">Tab 1</a></li>
<li><a href="#tabs-2" title="">Tab 2</a></li>
<li><a href="#tabs-3" title="">Tab 3</a></li>
</ul>
<div id="tabs_container">
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus.</p><p>Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor.</p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem.</p><p> Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales.</p>
</div>
</div><!--End tabs container-->
</div><!--End tabs-->
<div id="tabs2">
<ul>
<li><a href="#tabs-1" title="">Tab 1</a></li>
<li><a href="#tabs-2" title="">Tab 2</a></li>
<li><a href="#tabs-3" title="">Tab 3</a></li>
</ul>
<div id="tabs_container">
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus.</p><p>Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor.</p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem.</p><p> Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales.</p>
</div>
</div><!--End tabs container-->
</div><!--End tabs-->
<div id="tabs3">
<ul>
<li><a href="#tabs-1" title="">Tab 1</a></li>
<li><a href="#tabs-2" title="">Tab 2</a></li>
<li><a href="#tabs-3" title="">Tab 3</a></li>
</ul>
<div id="tabs_container">
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus.</p><p>Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor.</p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem.</p><p> Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales.</p>
</div>
</div><!--End tabs container-->
</div><!--End tabs-->
<div id="tabs4">
<ul>
<li><a href="#tabs-1" title="">Tab 1</a></li>
<li><a href="#tabs-2" title="">Tab 2</a></li>
<li><a href="#tabs-3" title="">Tab 3</a></li>
</ul>
<div id="tabs_container">
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus.</p><p>Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor.</p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem.</p><p> Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales.</p>
</div>
</div><!--End tabs container-->
</div><!--End tabs-->
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="tabulous.js"></script>
<script type="text/javascript" src="js.js"></script>
</body>
</html>
================================================
FILE: demo/demo/js.js
================================================
$(document).ready(function($) {
$('#tabs').tabulous({
effect: 'scale'
});
$('#tabs2').tabulous({
effect: 'slideLeft'
});
$('#tabs3').tabulous({
effect: 'scaleUp'
});
$('#tabs4').tabulous({
effect: 'flip'
});
});
================================================
FILE: demo/demo/tabulous.css
================================================
html{
background: rgb(101, 92, 137);
font-family: "Lato", sans-serif;
}
a:active,a:focus {
outline: expression(hideFocus='true');
}
p {
margin-bottom: 20px;
}
#wrapper {
width: 960px;
margin: 0 auto;
margin-top: 100px;
}
#tabs,#tabs2,#tabs3,#tabs4,#tabs5 {
width: 500px;
margin: 0 auto;
margin-bottom: 40px;
}
#tabs li,#tabs2 li,#tabs3 li,#tabs4 li,#tabs5 li {
float: left;
margin-right: 2px;
}
#tabs li a,#tabs2 li a,#tabs3 li a,#tabs4 li a,#tabs5 li a {
display: block;
padding: 17px 30px;
background: #544f6b;
text-decoration: none;
color: #8478B3;
}
#tabs li a:hover,#tabs2 li a:hover,#tabs3 li a:hover,#tabs4 li a:hover,#tabs5 li a:hover {
background: rgb(78, 74, 99);
}
#tabs_container {
padding: 40px;
overflow: hidden;
position: relative;
background: white;
}
#tabs_container div {
margin-right: 40px;
}
.transition {
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
-webkit-transition-delay: .3s;
-moz-transition-delay: .3s;
-o-transition-delay: .3s;
-ms-transition-delay: .3s;
transition-delay: .3s;
}
.make_transist {
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.hidescale {
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-o-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
filter: alpha(opacity=0);
opacity: 0;
}
.showscale {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition-delay: .3s;
-moz-transition-delay: .3s;
-o-transition-delay: .3s;
-ms-transition-delay: .3s;
transition-delay: .3s;
}
.hideleft {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-o-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.showleft {
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-o-transform: translateX(0px);
-ms-transform: translateX(0px);
transform: translateX(0px);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition-delay: .3s;
-moz-transition-delay: .3s;
-o-transition-delay: .3s;
-ms-transition-delay: .3s;
transition-delay: .3s;
}
.hidescaleup {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.showscaleup {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition-delay: .3s;
-moz-transition-delay: .3s;
-o-transition-delay: .3s;
-ms-transition-delay: .3s;
transition-delay: .3s;
}
.hideflip {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: rotatey(-90deg) scale(1.1);
-moz-transform: rotatey(-90deg) scale(1.1);
-o-transform: rotatey(-90deg) scale(1.1);
-ms-transform: rotatey(-90deg) scale(1.1);
transform: rotatey(-90deg) scale(1.1);
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.showflip {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition-delay: .3s;
-moz-transition-delay: .3s;
-o-transition-delay: .3s;
-ms-transition-delay: .3s;
transition-delay: .3s;
-webkit-transform: rotatey(0deg) scale(1);
-moz-transform: rotatey(0deg) scale(1);
-o-transform: rotatey(0deg) scale(1);
-ms-transform: rotatey(0deg) scale(1);
transform: rotatey(0deg) scale(1);
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.tabulous_active {
background: white !important;
color: #655c89 !important;
}
.tabulousclear {
display: block;
clear: both;
}
================================================
FILE: demo/demo/tabulous.js
================================================
/*!
* strength.js
* Original author: @aaronlumsden
* Further changes, comments: @aaronlumsden
* Licensed under the MIT license
*/
;(function ( $, window, document, undefined ) {
var pluginName = "tabulous",
defaults = {
effect: 'scale'
};
// $('<style>body { background-color: red; color: white; }</style>').appendTo('head');
function Plugin( element, options ) {
this.element = element;
this.$elem = $(this.element);
this.options = $.extend( {}, defaults, options );
this._defaults = defaults;
this._name = pluginName;
this.init();
}
Plugin.prototype = {
init: function() {
var links = this.$elem.find('a');
var firstchild = this.$elem.find('li:first-child').find('a');
var lastchild = this.$elem.find('li:last-child').after('<span class="tabulousclear"></span>');
if (this.options.effect == 'scale') {
tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hidescale');
} else if (this.options.effect == 'slideLeft') {
tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hideleft');
} else if (this.options.effect == 'scaleUp') {
tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hidescaleup');
} else if (this.options.effect == 'flip') {
tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hideflip');
}
var firstdiv = this.$elem.find('#tabs_container');
var firstdivheight = firstdiv.find('div:first').height();
var alldivs = this.$elem.find('div:first').find('div');
alldivs.css({'position': 'absolute','top':'40px'});
firstdiv.css('height',firstdivheight+'px');
firstchild.addClass('tabulous_active');
links.bind('click', {myOptions: this.options}, function(e) {
e.preventDefault();
var $options = e.data.myOptions;
var effect = $options.effect;
var mythis = $(this);
var thisform = mythis.parent().parent().parent();
var thislink = mythis.attr('href');
firstdiv.addClass('transition');
links.removeClass('tabulous_active');
mythis.addClass('tabulous_active');
thisdivwidth = thisform.find('div'+thislink).height();
if (effect == 'scale') {
alldivs.removeClass('showscale').addClass('make_transist').addClass('hidescale');
thisform.find('div'+thislink).addClass('make_transist').addClass('showscale');
} else if (effect == 'slideLeft') {
alldivs.removeClass('showleft').addClass('make_transist').addClass('hideleft');
thisform.find('div'+thislink).addClass('make_transist').addClass('showleft');
} else if (effect == 'scaleUp') {
alldivs.removeClass('showscaleup').addClass('make_transist').addClass('hidescaleup');
thisform.find('div'+thislink).addClass('make_transist').addClass('showscaleup');
} else if (effect == 'flip') {
alldivs.removeClass('showflip').addClass('make_transist').addClass('hideflip');
thisform.find('div'+thislink).addClass('make_transist').addClass('showflip');
}
firstdiv.css('height',thisdivwidth+'px');
});
},
yourOtherFunction: function(el, options) {
// some logic
}
};
// A really lightweight plugin wrapper around the constructor,
// preventing against multiple instantiations
$.fn[pluginName] = function ( options ) {
return this.each(function () {
new Plugin( this, options );
});
};
})( jQuery, window, document );
================================================
FILE: demo/src/tabulous.css
================================================
/* Don't forget to include a CSS reset file otherwise it might look a little bit strange*/
a:active,a:focus {
outline: expression(hideFocus='true');
}
p {
margin-bottom: 20px;
}
#wrapper {
width: 960px;
margin: 0 auto;
margin-top: 100px;
}
#tabs,#tabs2,#tabs3,#tabs4,#tabs5 {
width: 500px;
margin: 0 auto;
margin-bottom: 40px;
}
#tabs li,#tabs2 li,#tabs3 li,#tabs4 li,#tabs5 li {
float: left;
margin-right: 2px;
}
#tabs li a,#tabs2 li a,#tabs3 li a,#tabs4 li a,#tabs5 li a {
display: block;
padding: 17px 30px;
background: #544f6b;
text-decoration: none;
color: #8478B3;
}
#tabs li a:hover,#tabs2 li a:hover,#tabs3 li a:hover,#tabs4 li a:hover,#tabs5 li a:hover {
background: rgb(78, 74, 99);
}
#tabs_container {
padding: 40px;
overflow: hidden;
position: relative;
background: white;
}
#tabs_container div {
margin-right: 40px;
}
.transition {
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
-webkit-transition-delay: .3s;
-moz-transition-delay: .3s;
-o-transition-delay: .3s;
-ms-transition-delay: .3s;
transition-delay: .3s;
}
.make_transist {
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.hidescale {
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-o-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
filter: alpha(opacity=0);
opacity: 0;
}
.showscale {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition-delay: .3s;
-moz-transition-delay: .3s;
-o-transition-delay: .3s;
-ms-transition-delay: .3s;
transition-delay: .3s;
}
.hideleft {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-o-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.showleft {
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-o-transform: translateX(0px);
-ms-transform: translateX(0px);
transform: translateX(0px);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition-delay: .3s;
-moz-transition-delay: .3s;
-o-transition-delay: .3s;
-ms-transition-delay: .3s;
transition-delay: .3s;
}
.hidescaleup {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.showscaleup {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition-delay: .3s;
-moz-transition-delay: .3s;
-o-transition-delay: .3s;
-ms-transition-delay: .3s;
transition-delay: .3s;
}
.hideflip {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: rotatey(-90deg) scale(1.1);
-moz-transform: rotatey(-90deg) scale(1.1);
-o-transform: rotatey(-90deg) scale(1.1);
-ms-transform: rotatey(-90deg) scale(1.1);
transform: rotatey(-90deg) scale(1.1);
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.showflip {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition-delay: .3s;
-moz-transition-delay: .3s;
-o-transition-delay: .3s;
-ms-transition-delay: .3s;
transition-delay: .3s;
-webkit-transform: rotatey(0deg) scale(1);
-moz-transform: rotatey(0deg) scale(1);
-o-transform: rotatey(0deg) scale(1);
-ms-transform: rotatey(0deg) scale(1);
transform: rotatey(0deg) scale(1);
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.tabulous_active {
background: white !important;
color: #655c89 !important;
}
.tabulousclear {
display: block;
clear: both;
}
================================================
FILE: demo/src/tabulous.js
================================================
/*!
* strength.js
* Original author: @aaronlumsden
* Further changes, comments: @aaronlumsden
* Licensed under the MIT license
*/
;(function ( $, window, document, undefined ) {
var pluginName = "tabulous",
defaults = {
effect: 'scale'
};
// $('<style>body { background-color: red; color: white; }</style>').appendTo('head');
function Plugin( element, options ) {
this.element = element;
this.$elem = $(this.element);
this.options = $.extend( {}, defaults, options );
this._defaults = defaults;
this._name = pluginName;
this.init();
}
Plugin.prototype = {
init: function() {
var links = this.$elem.find('a');
var firstchild = this.$elem.find('li:first-child').find('a');
var lastchild = this.$elem.find('li:last-child').after('<span class="tabulousclear"></span>');
if (this.options.effect == 'scale') {
tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hidescale');
} else if (this.options.effect == 'slideLeft') {
tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hideleft');
} else if (this.options.effect == 'scaleUp') {
tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hidescaleup');
} else if (this.options.effect == 'flip') {
tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hideflip');
}
var firstdiv = this.$elem.find('#tabs_container');
var firstdivheight = firstdiv.find('div:first').height();
var alldivs = this.$elem.find('div:first').find('div');
alldivs.css({'position': 'absolute','top':'40px'});
firstdiv.css('height',firstdivheight+'px');
firstchild.addClass('tabulous_active');
links.bind('click', {myOptions: this.options}, function(e) {
e.preventDefault();
var $options = e.data.myOptions;
var effect = $options.effect;
var mythis = $(this);
var thisform = mythis.parent().parent().parent();
var thislink = mythis.attr('href');
firstdiv.addClass('transition');
links.removeClass('tabulous_active');
mythis.addClass('tabulous_active');
thisdivwidth = thisform.find('div'+thislink).height();
if (effect == 'scale') {
alldivs.removeClass('showscale').addClass('make_transist').addClass('hidescale');
thisform.find('div'+thislink).addClass('make_transist').addClass('showscale');
} else if (effect == 'slideLeft') {
alldivs.removeClass('showleft').addClass('make_transist').addClass('hideleft');
thisform.find('div'+thislink).addClass('make_transist').addClass('showleft');
} else if (effect == 'scaleUp') {
alldivs.removeClass('showscaleup').addClass('make_transist').addClass('hidescaleup');
thisform.find('div'+thislink).addClass('make_transist').addClass('showscaleup');
} else if (effect == 'flip') {
alldivs.removeClass('showflip').addClass('make_transist').addClass('hideflip');
thisform.find('div'+thislink).addClass('make_transist').addClass('showflip');
}
firstdiv.css('height',thisdivwidth+'px');
});
},
yourOtherFunction: function(el, options) {
// some logic
}
};
// A really lightweight plugin wrapper around the constructor,
// preventing against multiple instantiations
$.fn[pluginName] = function ( options ) {
return this.each(function () {
new Plugin( this, options );
});
};
})( jQuery, window, document );
gitextract_oid7um63/
├── .gitattributes
├── .gitignore
├── README.md
└── demo/
├── demo/
│ ├── index.html
│ ├── js.js
│ ├── tabulous.css
│ └── tabulous.js
└── src/
├── tabulous.css
└── tabulous.js
SYMBOL INDEX (2 symbols across 2 files)
FILE: demo/demo/tabulous.js
function Plugin (line 16) | function Plugin( element, options ) {
FILE: demo/src/tabulous.js
function Plugin (line 16) | function Plugin( element, options ) {
Condensed preview — 9 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (32K chars).
[
{
"path": ".gitattributes",
"chars": 483,
"preview": "# Auto detect text files and perform LF normalization\n* text=auto\n\n# Custom for Visual Studio\n*.cs diff=csharp\n*.sln"
},
{
"path": ".gitignore",
"chars": 2643,
"preview": "#################\n## Eclipse\n#################\n\n*.pydevproject\n.project\n.metadata\nbin/\ntmp/\n*.tmp\n*.bak\n*.swp\n*~.nib\nloc"
},
{
"path": "README.md",
"chars": 1904,
"preview": "tabulous.js\n===========\n\nA jQuery tabs module for todays web!\n\n### Documentation\n\nTabulous.js can be used with any conte"
},
{
"path": "demo/demo/index.html",
"chars": 6604,
"preview": "<html>\n<head>\n\t<title>Tabulous.js</title>\n<link rel=\"stylesheet\" type=\"text/css\" href=\"http://yui.yahooapis.com/3.3.0/bu"
},
{
"path": "demo/demo/js.js",
"chars": 295,
"preview": "$(document).ready(function($) {\n \n\n $('#tabs').tabulous({\n \teffect: 'scale'\n });\n\n $('#tabs2').tabulous("
},
{
"path": "demo/demo/tabulous.css",
"chars": 4747,
"preview": "html{\n\tbackground: rgb(101, 92, 137);\n\t\tfont-family: \"Lato\", sans-serif;\n}\na:active,a:focus {\n\toutline: expression(hideF"
},
{
"path": "demo/demo/tabulous.js",
"chars": 4126,
"preview": "/*!\n * strength.js\n * Original author: @aaronlumsden\n * Further changes, comments: @aaronlumsden\n * Licensed under the M"
},
{
"path": "demo/src/tabulous.css",
"chars": 4763,
"preview": "/* Don't forget to include a CSS reset file otherwise it might look a little bit strange*/\na:active,a:focus {\n\toutline: "
},
{
"path": "demo/src/tabulous.js",
"chars": 4126,
"preview": "/*!\n * strength.js\n * Original author: @aaronlumsden\n * Further changes, comments: @aaronlumsden\n * Licensed under the M"
}
]
About this extraction
This page contains the full source code of the aarondo/tabulous.js GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 9 files (29.0 KB), approximately 8.6k tokens, and a symbol index with 2 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.