[ { "path": ".gitattributes", "content": "# Auto detect text files and perform LF normalization\n* text=auto\n\n# Custom for Visual Studio\n*.cs diff=csharp\n*.sln merge=union\n*.csproj merge=union\n*.vbproj merge=union\n*.fsproj merge=union\n*.dbproj merge=union\n\n# Standard to msysgit\n*.doc\t diff=astextplain\n*.DOC\t diff=astextplain\n*.docx diff=astextplain\n*.DOCX diff=astextplain\n*.dot diff=astextplain\n*.DOT diff=astextplain\n*.pdf diff=astextplain\n*.PDF\t diff=astextplain\n*.rtf\t diff=astextplain\n*.RTF\t diff=astextplain\n" }, { "path": ".gitignore", "content": "#################\n## Eclipse\n#################\n\n*.pydevproject\n.project\n.metadata\nbin/\ntmp/\n*.tmp\n*.bak\n*.swp\n*~.nib\nlocal.properties\n.classpath\n.settings/\n.loadpath\n\n# External tool builders\n.externalToolBuilders/\n\n# Locally stored \"Eclipse launch configurations\"\n*.launch\n\n# CDT-specific\n.cproject\n\n# PDT-specific\n.buildpath\n\n\n#################\n## Visual Studio\n#################\n\n## Ignore Visual Studio temporary files, build results, and\n## files generated by popular Visual Studio add-ons.\n\n# User-specific files\n*.suo\n*.user\n*.sln.docstates\n\n# Build results\n\n[Dd]ebug/\n[Rr]elease/\nx64/\nbuild/\n[Bb]in/\n[Oo]bj/\n\n# MSTest test Results\n[Tt]est[Rr]esult*/\n[Bb]uild[Ll]og.*\n\n*_i.c\n*_p.c\n*.ilk\n*.meta\n*.obj\n*.pch\n*.pdb\n*.pgc\n*.pgd\n*.rsp\n*.sbr\n*.tlb\n*.tli\n*.tlh\n*.tmp\n*.tmp_proj\n*.log\n*.vspscc\n*.vssscc\n.builds\n*.pidb\n*.log\n*.scc\n\n# Visual C++ cache files\nipch/\n*.aps\n*.ncb\n*.opensdf\n*.sdf\n*.cachefile\n\n# Visual Studio profiler\n*.psess\n*.vsp\n*.vspx\n\n# Guidance Automation Toolkit\n*.gpState\n\n# ReSharper is a .NET coding add-in\n_ReSharper*/\n*.[Rr]e[Ss]harper\n\n# TeamCity is a build add-in\n_TeamCity*\n\n# DotCover is a Code Coverage Tool\n*.dotCover\n\n# NCrunch\n*.ncrunch*\n.*crunch*.local.xml\n\n# Installshield output folder\n[Ee]xpress/\n\n# DocProject is a documentation generator add-in\nDocProject/buildhelp/\nDocProject/Help/*.HxT\nDocProject/Help/*.HxC\nDocProject/Help/*.hhc\nDocProject/Help/*.hhk\nDocProject/Help/*.hhp\nDocProject/Help/Html2\nDocProject/Help/html\n\n# Click-Once directory\npublish/\n\n# Publish Web Output\n*.Publish.xml\n*.pubxml\n\n# NuGet Packages Directory\n## TODO: If you have NuGet Package Restore enabled, uncomment the next line\n#packages/\n\n# Windows Azure Build Output\ncsx\n*.build.csdef\n\n# Windows Store app package directory\nAppPackages/\n\n# Others\nsql/\n*.Cache\nClientBin/\n[Ss]tyle[Cc]op.*\n~$*\n*~\n*.dbmdl\n*.[Pp]ublish.xml\n*.pfx\n*.publishsettings\n\n# RIA/Silverlight projects\nGenerated_Code/\n\n# Backup & report files from converting an old project file to a newer\n# Visual Studio version. Backup files are not needed, because we have git ;-)\n_UpgradeReport_Files/\nBackup*/\nUpgradeLog*.XML\nUpgradeLog*.htm\n\n# SQL Server files\nApp_Data/*.mdf\nApp_Data/*.ldf\n\n#############\n## Windows detritus\n#############\n\n# Windows image file caches\nThumbs.db\nehthumbs.db\n\n# Folder config file\nDesktop.ini\n\n# Recycle Bin used on file shares\n$RECYCLE.BIN/\n\n# Mac crap\n.DS_Store\n\n\n#############\n## Python\n#############\n\n*.py[co]\n\n# Packages\n*.egg\n*.egg-info\ndist/\nbuild/\neggs/\nparts/\nvar/\nsdist/\ndevelop-eggs/\n.installed.cfg\n\n# Installer logs\npip-log.txt\n\n# Unit test / coverage reports\n.coverage\n.tox\n\n#Translations\n*.mo\n\n#Mr Developer\n.mr.developer.cfg\n" }, { "path": "README.md", "content": "tabulous.js\n===========\n\nA jQuery tabs module for todays web!\n\n### Documentation\n\nTabulous.js can be used with any contents you choose in the tabs and it couldn't be more simpler to use.\n\n#### ..:: Getting Started\n\n##### Include the relevant files\n\nFirstly include jQuery and the tabulous.css and tabulous.js files. Place these before `` section\n\n \n\t\n\t\n\t\t\t\t\t\n\n##### Create the tabs\n\n`````\n
\n \t\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\t
\n\t\t\t\t \n\t\t\t
\n\t\t\t
\n\t\t\t\t \n\t\t\t
\n\t\t
\t\n
\n`````\n##### Initiate the plugin\n\nOnce you have created your tabs you will need to initiate the plugin.\n\nAt its most basic level you can initiate the plugin like:\n\n`````\t\t\t\t\t\n\t$(document).ready(function ($) {\n\n $('#tabs').tabulous(); \n\n});\n`````\n\t\t\t\t\t\n\nIf you want to initiate the plugin with options then you can do so like:\n\n`````\n$('#tabs').tabulous({\n effect: 'scale'\n });\t\n`````\n\n#### ..:: Options\n\n\n \t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
VariableDefault ValueDescriptionValid Options
effectscaleThe effect to use for the transitionscale / slideLeft / scaleUp / flip
\n" }, { "path": "demo/demo/index.html", "content": "\n\n\tTabulous.js\n\n\n\t\n\n\n\n\t
\n\n\t\t\t\t
\n\t\t\n\n\t\t
\n\t\t\t\n\n\n\n\t\t
\n\t\t\t

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.

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.

\n\t\t
\n\n\t\t
\n\t\t\t

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.

\n\t\n\t\t
\n\n\t\t
\n\t\t\t

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.

Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales.

\n\t\t
\n\n\t\t
\n\t\t\n\t
\n\n\n\n\n\t\t\t
\n\t\t\n\n\t\t
\n\t\t\t\n\n\n\n\t\t
\n\t\t\t

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.

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.

\n\t\t
\n\n\t\t
\n\t\t\t

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.

\n\t\n\t\t
\n\n\t\t
\n\t\t\t

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.

Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales.

\n\t\t
\n\n\t\t
\n\t\t\n\t
\n\n\n\t
\n\t\t\n\n\t\t
\n\t\t\t\n\n\t\t\t
\n\t\t\t\t

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.

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.

\n\t\t\t
\n\n\t\t\t
\n\t\t\t\t

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.

\n\t\t\n\t\t\t
\n\n\t\t\t
\n\t\t\t\t

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.

Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales.

\n\t\t\t
\n\n\t\t
\n\t\t\n\t
\n\n\n\n\t
\n\t\t\n\n\t\t
\n\t\t\t\n\n\n\n\t\t
\n\t\t\t

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.

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.

\n\t\t
\n\n\t\t
\n\t\t\t

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.

\n\t\n\t\t
\n\n\t\t
\n\t\t\t

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.

Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales.

\n\t\t
\n\n\t\t
\n\t\t\n\t
\n\n\t\t\n\t
\n\n\t\n\n\n\n\n" }, { "path": "demo/demo/js.js", "content": "$(document).ready(function($) {\n \n\n $('#tabs').tabulous({\n \teffect: 'scale'\n });\n\n $('#tabs2').tabulous({\n \teffect: 'slideLeft'\n });\n\n $('#tabs3').tabulous({\n \teffect: 'scaleUp'\n });\n\n $('#tabs4').tabulous({\n \teffect: 'flip'\n });\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n});" }, { "path": "demo/demo/tabulous.css", "content": "html{\n\tbackground: rgb(101, 92, 137);\n\t\tfont-family: \"Lato\", sans-serif;\n}\na:active,a:focus {\n\toutline: expression(hideFocus='true');\n}\n\np {\n\tmargin-bottom: 20px;\n}\n\n#wrapper {\n\twidth: 960px;\n\tmargin: 0 auto;\n\tmargin-top: 100px;\n}\n#tabs,#tabs2,#tabs3,#tabs4,#tabs5 {\n\twidth: 500px;\n\tmargin: 0 auto;\n\tmargin-bottom: 40px;\n}\n\n#tabs li,#tabs2 li,#tabs3 li,#tabs4 li,#tabs5 li {\n\tfloat: left;\n\tmargin-right: 2px;\n}\n\n#tabs li a,#tabs2 li a,#tabs3 li a,#tabs4 li a,#tabs5 li a {\n\tdisplay: block;\n\tpadding: 17px 30px;\n\tbackground: #544f6b;\n\ttext-decoration: none;\n\tcolor: #8478B3;\n}\n\n#tabs li a:hover,#tabs2 li a:hover,#tabs3 li a:hover,#tabs4 li a:hover,#tabs5 li a:hover {\n\tbackground: rgb(78, 74, 99);\n}\n\n#tabs_container {\n\tpadding: 40px;\n\toverflow: hidden;\n\tposition: relative;\n\tbackground: white;\n}\n\n#tabs_container div {\n\tmargin-right: 40px;\n}\n\n.transition {\n\t-webkit-transition: all .3s ease-in-out;\n\t-moz-transition: all .3s ease-in-out;\n\t-o-transition: all .3s ease-in-out;\n\t-ms-transition: all .3s ease-in-out;\n\ttransition: all .3s ease-in-out;\n\n\t-webkit-transition-delay: .3s;\n\t-moz-transition-delay: .3s;\n\t-o-transition-delay: .3s;\n\t-ms-transition-delay: .3s;\n\ttransition-delay: .3s;\n}\n\n.make_transist {\n\t-webkit-transition: all .3s ease-in-out;\n\t-moz-transition: all .3s ease-in-out;\n\t-o-transition: all .3s ease-in-out;\n\t-ms-transition: all .3s ease-in-out;\n\ttransition: all .3s ease-in-out;\n}\n\n.hidescale {\n\t-webkit-transform: scale(0.9);\n\t-moz-transform: scale(0.9);\n\t-o-transform: scale(0.9);\n\t-ms-transform: scale(0.9);\n\ttransform: scale(0.9);\n\t-ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";\n\tfilter: alpha(opacity=0);\n\tfilter: alpha(opacity=0);\n\topacity: 0;\n}\n\n.showscale {\n\t-webkit-transform: scale(1);\n\t-moz-transform: scale(1);\n\t-o-transform: scale(1);\n\t-ms-transform: scale(1);\n\ttransform: scale(1);\n\t-ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)\";\n\tfilter: alpha(opacity=100);\n\topacity: 1;\n\n\t-webkit-transition-delay: .3s;\n\t-moz-transition-delay: .3s;\n\t-o-transition-delay: .3s;\n\t-ms-transition-delay: .3s;\n\ttransition-delay: .3s;\n}\n\n.hideleft {\n\t-webkit-transform: translateX(-100%);\n\t-moz-transform: translateX(-100%);\n\t-o-transform: translateX(-100%);\n\t-ms-transform: translateX(-100%);\n\ttransform: translateX(-100%);\n\t-ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";\n\tfilter: alpha(opacity=0);\n\topacity: 0;\n}\n\n.showleft {\n\t-webkit-transform: translateX(0px);\n\t-moz-transform: translateX(0px);\n\t-o-transform: translateX(0px);\n\t-ms-transform: translateX(0px);\n\ttransform: translateX(0px);\n\t-ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)\";\n\tfilter: alpha(opacity=100);\n\topacity: 1;\n\n\t-webkit-transition-delay: .3s;\n\t-moz-transition-delay: .3s;\n\t-o-transition-delay: .3s;\n\t-ms-transition-delay: .3s;\n\ttransition-delay: .3s;\n}\n\n.hidescaleup {\n\t-webkit-transform: scale(1.1);\n\t-moz-transform: scale(1.1);\n\t-o-transform: scale(1.1);\n\t-ms-transform: scale(1.1);\n\ttransform: scale(1.1);\n\t-ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";\n\tfilter: alpha(opacity=0);\n\topacity: 0;\n}\n\n.showscaleup {\n\t-webkit-transform: scale(1);\n\t-moz-transform: scale(1);\n\t-o-transform: scale(1);\n\t-ms-transform: scale(1);\n\ttransform: scale(1);\n\t-ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)\";\n\tfilter: alpha(opacity=100);\n\topacity: 1;\n\n\t-webkit-transition-delay: .3s;\n\t-moz-transition-delay: .3s;\n\t-o-transition-delay: .3s;\n\t-ms-transition-delay: .3s;\n\ttransition-delay: .3s;\n}\n\n.hideflip {\n\t-ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";\n\tfilter: alpha(opacity=0);\n\topacity: 0;\n\n\t-webkit-transform: rotatey(-90deg) scale(1.1);\n\t-moz-transform: rotatey(-90deg) scale(1.1);\n\t-o-transform: rotatey(-90deg) scale(1.1);\n\t-ms-transform: rotatey(-90deg) scale(1.1);\n\ttransform: rotatey(-90deg) scale(1.1);\n\n\t-webkit-transform-origin: 50% 50%;\n\t-moz-transform-origin: 50% 50%;\n\t-o-transform-origin: 50% 50%;\n\t-ms-transform-origin: 50% 50%;\n\ttransform-origin: 50% 50%;\n}\n\n.showflip {\n\t-ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)\";\n\tfilter: alpha(opacity=100);\n\topacity: 1;\n\n\t-webkit-transition-delay: .3s;\n\t-moz-transition-delay: .3s;\n\t-o-transition-delay: .3s;\n\t-ms-transition-delay: .3s;\n\ttransition-delay: .3s;\n\n\t-webkit-transform: rotatey(0deg) scale(1);\n\t-moz-transform: rotatey(0deg) scale(1);\n\t-o-transform: rotatey(0deg) scale(1);\n\t-ms-transform: rotatey(0deg) scale(1);\n\ttransform: rotatey(0deg) scale(1);\n\n\t-webkit-transform-origin: 50% 50%;\n\t-moz-transform-origin: 50% 50%;\n\t-o-transform-origin: 50% 50%;\n\t-ms-transform-origin: 50% 50%;\n\ttransform-origin: 50% 50%;\n}\n\n.tabulous_active {\n\tbackground: white !important;\n\tcolor: #655c89 !important;\n}\n\n.tabulousclear {\n\tdisplay: block;\n\tclear: both;\n}" }, { "path": "demo/demo/tabulous.js", "content": "/*!\n * strength.js\n * Original author: @aaronlumsden\n * Further changes, comments: @aaronlumsden\n * Licensed under the MIT license\n */\n;(function ( $, window, document, undefined ) {\n\n var pluginName = \"tabulous\",\n defaults = {\n effect: 'scale'\n };\n\n // $('').appendTo('head');\n\n function Plugin( element, options ) {\n this.element = element;\n this.$elem = $(this.element);\n this.options = $.extend( {}, defaults, options );\n this._defaults = defaults;\n this._name = pluginName;\n this.init();\n }\n\n Plugin.prototype = {\n\n init: function() {\n\n var links = this.$elem.find('a');\n var firstchild = this.$elem.find('li:first-child').find('a');\n var lastchild = this.$elem.find('li:last-child').after('');\n\n if (this.options.effect == 'scale') {\n tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hidescale');\n } else if (this.options.effect == 'slideLeft') {\n tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hideleft');\n } else if (this.options.effect == 'scaleUp') {\n tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hidescaleup');\n } else if (this.options.effect == 'flip') {\n tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hideflip');\n }\n\n var firstdiv = this.$elem.find('#tabs_container');\n var firstdivheight = firstdiv.find('div:first').height();\n\n var alldivs = this.$elem.find('div:first').find('div');\n\n alldivs.css({'position': 'absolute','top':'40px'});\n\n firstdiv.css('height',firstdivheight+'px');\n\n firstchild.addClass('tabulous_active');\n\n links.bind('click', {myOptions: this.options}, function(e) {\n e.preventDefault();\n\n var $options = e.data.myOptions;\n var effect = $options.effect;\n\n var mythis = $(this);\n var thisform = mythis.parent().parent().parent();\n var thislink = mythis.attr('href');\n\n\n firstdiv.addClass('transition');\n\n links.removeClass('tabulous_active');\n mythis.addClass('tabulous_active');\n thisdivwidth = thisform.find('div'+thislink).height();\n\n if (effect == 'scale') {\n alldivs.removeClass('showscale').addClass('make_transist').addClass('hidescale');\n thisform.find('div'+thislink).addClass('make_transist').addClass('showscale');\n } else if (effect == 'slideLeft') {\n alldivs.removeClass('showleft').addClass('make_transist').addClass('hideleft');\n thisform.find('div'+thislink).addClass('make_transist').addClass('showleft');\n } else if (effect == 'scaleUp') {\n alldivs.removeClass('showscaleup').addClass('make_transist').addClass('hidescaleup');\n thisform.find('div'+thislink).addClass('make_transist').addClass('showscaleup');\n } else if (effect == 'flip') {\n alldivs.removeClass('showflip').addClass('make_transist').addClass('hideflip');\n thisform.find('div'+thislink).addClass('make_transist').addClass('showflip');\n }\n\n\n firstdiv.css('height',thisdivwidth+'px');\n\n \n\n\n });\n\n \n\n\n \n \n },\n\n yourOtherFunction: function(el, options) {\n // some logic\n }\n };\n\n // A really lightweight plugin wrapper around the constructor,\n // preventing against multiple instantiations\n $.fn[pluginName] = function ( options ) {\n return this.each(function () {\n new Plugin( this, options );\n });\n };\n\n})( jQuery, window, document );\n\n\n" }, { "path": "demo/src/tabulous.css", "content": "/* Don't forget to include a CSS reset file otherwise it might look a little bit strange*/\na:active,a:focus {\n\toutline: expression(hideFocus='true');\n}\n\np {\n\tmargin-bottom: 20px;\n}\n\n#wrapper {\n\twidth: 960px;\n\tmargin: 0 auto;\n\tmargin-top: 100px;\n}\n#tabs,#tabs2,#tabs3,#tabs4,#tabs5 {\n\twidth: 500px;\n\tmargin: 0 auto;\n\tmargin-bottom: 40px;\n}\n\n#tabs li,#tabs2 li,#tabs3 li,#tabs4 li,#tabs5 li {\n\tfloat: left;\n\tmargin-right: 2px;\n}\n\n#tabs li a,#tabs2 li a,#tabs3 li a,#tabs4 li a,#tabs5 li a {\n\tdisplay: block;\n\tpadding: 17px 30px;\n\tbackground: #544f6b;\n\ttext-decoration: none;\n\tcolor: #8478B3;\n}\n\n#tabs li a:hover,#tabs2 li a:hover,#tabs3 li a:hover,#tabs4 li a:hover,#tabs5 li a:hover {\n\tbackground: rgb(78, 74, 99);\n}\n\n#tabs_container {\n\tpadding: 40px;\n\toverflow: hidden;\n\tposition: relative;\n\tbackground: white;\n}\n\n#tabs_container div {\n\tmargin-right: 40px;\n}\n\n.transition {\n\t-webkit-transition: all .3s ease-in-out;\n\t-moz-transition: all .3s ease-in-out;\n\t-o-transition: all .3s ease-in-out;\n\t-ms-transition: all .3s ease-in-out;\n\ttransition: all .3s ease-in-out;\n\n\t-webkit-transition-delay: .3s;\n\t-moz-transition-delay: .3s;\n\t-o-transition-delay: .3s;\n\t-ms-transition-delay: .3s;\n\ttransition-delay: .3s;\n}\n\n.make_transist {\n\t-webkit-transition: all .3s ease-in-out;\n\t-moz-transition: all .3s ease-in-out;\n\t-o-transition: all .3s ease-in-out;\n\t-ms-transition: all .3s ease-in-out;\n\ttransition: all .3s ease-in-out;\n}\n\n.hidescale {\n\t-webkit-transform: scale(0.9);\n\t-moz-transform: scale(0.9);\n\t-o-transform: scale(0.9);\n\t-ms-transform: scale(0.9);\n\ttransform: scale(0.9);\n\t-ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";\n\tfilter: alpha(opacity=0);\n\tfilter: alpha(opacity=0);\n\topacity: 0;\n}\n\n.showscale {\n\t-webkit-transform: scale(1);\n\t-moz-transform: scale(1);\n\t-o-transform: scale(1);\n\t-ms-transform: scale(1);\n\ttransform: scale(1);\n\t-ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)\";\n\tfilter: alpha(opacity=100);\n\topacity: 1;\n\n\t-webkit-transition-delay: .3s;\n\t-moz-transition-delay: .3s;\n\t-o-transition-delay: .3s;\n\t-ms-transition-delay: .3s;\n\ttransition-delay: .3s;\n}\n\n.hideleft {\n\t-webkit-transform: translateX(-100%);\n\t-moz-transform: translateX(-100%);\n\t-o-transform: translateX(-100%);\n\t-ms-transform: translateX(-100%);\n\ttransform: translateX(-100%);\n\t-ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";\n\tfilter: alpha(opacity=0);\n\topacity: 0;\n}\n\n.showleft {\n\t-webkit-transform: translateX(0px);\n\t-moz-transform: translateX(0px);\n\t-o-transform: translateX(0px);\n\t-ms-transform: translateX(0px);\n\ttransform: translateX(0px);\n\t-ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)\";\n\tfilter: alpha(opacity=100);\n\topacity: 1;\n\n\t-webkit-transition-delay: .3s;\n\t-moz-transition-delay: .3s;\n\t-o-transition-delay: .3s;\n\t-ms-transition-delay: .3s;\n\ttransition-delay: .3s;\n}\n\n.hidescaleup {\n\t-webkit-transform: scale(1.1);\n\t-moz-transform: scale(1.1);\n\t-o-transform: scale(1.1);\n\t-ms-transform: scale(1.1);\n\ttransform: scale(1.1);\n\t-ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";\n\tfilter: alpha(opacity=0);\n\topacity: 0;\n}\n\n.showscaleup {\n\t-webkit-transform: scale(1);\n\t-moz-transform: scale(1);\n\t-o-transform: scale(1);\n\t-ms-transform: scale(1);\n\ttransform: scale(1);\n\t-ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)\";\n\tfilter: alpha(opacity=100);\n\topacity: 1;\n\n\t-webkit-transition-delay: .3s;\n\t-moz-transition-delay: .3s;\n\t-o-transition-delay: .3s;\n\t-ms-transition-delay: .3s;\n\ttransition-delay: .3s;\n}\n\n.hideflip {\n\t-ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)\";\n\tfilter: alpha(opacity=0);\n\topacity: 0;\n\n\t-webkit-transform: rotatey(-90deg) scale(1.1);\n\t-moz-transform: rotatey(-90deg) scale(1.1);\n\t-o-transform: rotatey(-90deg) scale(1.1);\n\t-ms-transform: rotatey(-90deg) scale(1.1);\n\ttransform: rotatey(-90deg) scale(1.1);\n\n\t-webkit-transform-origin: 50% 50%;\n\t-moz-transform-origin: 50% 50%;\n\t-o-transform-origin: 50% 50%;\n\t-ms-transform-origin: 50% 50%;\n\ttransform-origin: 50% 50%;\n}\n\n.showflip {\n\t-ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)\";\n\tfilter: alpha(opacity=100);\n\topacity: 1;\n\n\t-webkit-transition-delay: .3s;\n\t-moz-transition-delay: .3s;\n\t-o-transition-delay: .3s;\n\t-ms-transition-delay: .3s;\n\ttransition-delay: .3s;\n\n\t-webkit-transform: rotatey(0deg) scale(1);\n\t-moz-transform: rotatey(0deg) scale(1);\n\t-o-transform: rotatey(0deg) scale(1);\n\t-ms-transform: rotatey(0deg) scale(1);\n\ttransform: rotatey(0deg) scale(1);\n\n\t-webkit-transform-origin: 50% 50%;\n\t-moz-transform-origin: 50% 50%;\n\t-o-transform-origin: 50% 50%;\n\t-ms-transform-origin: 50% 50%;\n\ttransform-origin: 50% 50%;\n}\n\n.tabulous_active {\n\tbackground: white !important;\n\tcolor: #655c89 !important;\n}\n\n.tabulousclear {\n\tdisplay: block;\n\tclear: both;\n}" }, { "path": "demo/src/tabulous.js", "content": "/*!\n * strength.js\n * Original author: @aaronlumsden\n * Further changes, comments: @aaronlumsden\n * Licensed under the MIT license\n */\n;(function ( $, window, document, undefined ) {\n\n var pluginName = \"tabulous\",\n defaults = {\n effect: 'scale'\n };\n\n // $('').appendTo('head');\n\n function Plugin( element, options ) {\n this.element = element;\n this.$elem = $(this.element);\n this.options = $.extend( {}, defaults, options );\n this._defaults = defaults;\n this._name = pluginName;\n this.init();\n }\n\n Plugin.prototype = {\n\n init: function() {\n\n var links = this.$elem.find('a');\n var firstchild = this.$elem.find('li:first-child').find('a');\n var lastchild = this.$elem.find('li:last-child').after('');\n\n if (this.options.effect == 'scale') {\n tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hidescale');\n } else if (this.options.effect == 'slideLeft') {\n tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hideleft');\n } else if (this.options.effect == 'scaleUp') {\n tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hidescaleup');\n } else if (this.options.effect == 'flip') {\n tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hideflip');\n }\n\n var firstdiv = this.$elem.find('#tabs_container');\n var firstdivheight = firstdiv.find('div:first').height();\n\n var alldivs = this.$elem.find('div:first').find('div');\n\n alldivs.css({'position': 'absolute','top':'40px'});\n\n firstdiv.css('height',firstdivheight+'px');\n\n firstchild.addClass('tabulous_active');\n\n links.bind('click', {myOptions: this.options}, function(e) {\n e.preventDefault();\n\n var $options = e.data.myOptions;\n var effect = $options.effect;\n\n var mythis = $(this);\n var thisform = mythis.parent().parent().parent();\n var thislink = mythis.attr('href');\n\n\n firstdiv.addClass('transition');\n\n links.removeClass('tabulous_active');\n mythis.addClass('tabulous_active');\n thisdivwidth = thisform.find('div'+thislink).height();\n\n if (effect == 'scale') {\n alldivs.removeClass('showscale').addClass('make_transist').addClass('hidescale');\n thisform.find('div'+thislink).addClass('make_transist').addClass('showscale');\n } else if (effect == 'slideLeft') {\n alldivs.removeClass('showleft').addClass('make_transist').addClass('hideleft');\n thisform.find('div'+thislink).addClass('make_transist').addClass('showleft');\n } else if (effect == 'scaleUp') {\n alldivs.removeClass('showscaleup').addClass('make_transist').addClass('hidescaleup');\n thisform.find('div'+thislink).addClass('make_transist').addClass('showscaleup');\n } else if (effect == 'flip') {\n alldivs.removeClass('showflip').addClass('make_transist').addClass('hideflip');\n thisform.find('div'+thislink).addClass('make_transist').addClass('showflip');\n }\n\n\n firstdiv.css('height',thisdivwidth+'px');\n\n \n\n\n });\n\n \n\n\n \n \n },\n\n yourOtherFunction: function(el, options) {\n // some logic\n }\n };\n\n // A really lightweight plugin wrapper around the constructor,\n // preventing against multiple instantiations\n $.fn[pluginName] = function ( options ) {\n return this.each(function () {\n new Plugin( this, options );\n });\n };\n\n})( jQuery, window, document );\n\n\n" } ]