Skip to content
forked from niki4810/stacky

A simple jquery plugin for organizing your container as a stack.

Notifications You must be signed in to change notification settings

mroknich/stacky

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 

Repository files navigation

stacky

Stacky is a simple jquery plugin for organizing your container as a stack. It makes use of css3 transitions for creating a slide down/up animation as you toggle the stack.

##Demo

View an example at the following link

##How to set up

To set up a basic stacky :

  • include the dependent libraries and css files
	<link href="stacky.css" rel="stylesheet" type="text/css" />
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<script src="stacky.js"></script>
  • create a basic html template as shown below
	<div class="three">
	    <div>
			<!-- some content -->
	    </div>
	    <div>
			<!-- some content -->
	    </div>
	    <div>
			<!-- some content -->
	    </div>
	    <div>
		    <!-- some content -->  
	    </div>
	</div>	
  • call the stacky function over the container
	$(".three").stacky();	

Setting options

Setting custom width

By default the stacky stretches to the full width of its parent container, however if you want to set a static width, you can pass it along as an option as shown below.

	$(".three").stacky({
		width: 100 //set the stacky width to 100px
	});	

Hiding the default toggle button

stacky attaches a default toggle button to the first child container. However if you wish to hide this button you can simply set the showToggleButton property to false as shown below

	$(".two").stacky({
			    showToggleButton : false
	});

Custom events for opening, collapsing and toggle a stacky

As mentioned above, stack provides a default toggle button. However if you wish to open, collapse or toggle an external source such as a button click, you can simply trigger a openStacky , collapseStacky or toggleStacky events.

	$("#btnOpen").click(function () {
			    $(".two").trigger("openStacky"); //opens a stacky when a button is clicked
	});
	$("#btnClose").click(function () {
			    $(".two").trigger("collapseStacky"); //collapses a stacky
	});
	$("#btnToggle").click(function () {
			    $(".two").trigger("toggleStacky"); //toggles the state of a stack
	});

License

Stacky is licensed under MIT

About

A simple jquery plugin for organizing your container as a stack.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • CSS 44.2%
  • HTML 35.6%
  • JavaScript 20.2%