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 `` section ##### Create the 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
Variable Default Value Description Valid Options
effect scale The effect to use for the transition scale / slideLeft / scaleUp / flip
================================================ FILE: demo/demo/index.html ================================================ Tabulous.js

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

================================================ 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' }; // $('').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(''); 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' }; // $('').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(''); 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 );