Basic Initialization

Example

Markup

<div>
<button id="container1">Display container 1</button>
<button id="container2">Display container 2 </button>
<button id="container1">Display container 3</button>
<div>

</div><div id="viewStack1">
<div>... </div>
<div> ... </div>
<div>... </div>  
</div>
<p>
..
<label id="lblIndex"></label>
..
<label id="lblTotal"></label>
</p>
<div">
<button id="getIndex"></button>
...<label id="lblCurrentIndex"></label>
</div>
									

Usage

			$(function() {

				//initialize view stack
				var viewStack = $(".myViewStack").viewstack({
					selectedIndex : 0,
					//registering creation complete event
					creationComplete : function(e, data) {
						$("#lblIndex").text(data.selectedIndex);
					},
					//registering selectedIndex change event
					selectedIndexChanged : function(e, data) {
						$("#lblIndex").text(data.selectedIndex);
						//$("#lblCurrentIndex").text(data.selectedIndex);
					}
				});

				//using the getChildrenCount function
				var numChildren = $(".myViewStack").viewstack("getChildrenCount");

				$("#lblTotal").text(numChildren);

				//change view index
				$("#container1").click(function() {
					$(".myViewStack").viewstack("option", "selectedIndex", 0);
				});

				$("#container2").click(function() {
					$(".myViewStack").viewstack("option", "selectedIndex", 1);
				});

				$("#container3").click(function() {
					$(".myViewStack").viewstack("option", "selectedIndex", 2);
				});

				//get current view index
				$("#getIndex").click(function() {
					var selIndex = $(".myViewStack").views