Stack container with back and forward actions

 

<html>
  <head>
    <link rel="StyleSheet" type="text/css" href="js/dojo/dijit/themes/tundra/tundra.css">
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/",
        parseOnLoad : true
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
            dojo.require("dijit.layout.StackContainer");
            dojo.require("dijit.layout.ContentPane");
            dojo.require("dojo.parser");
            dojo.require("dojo.Button"); 
    </script>
  </head>
  <body class="tundra">
      <div id="stack" dojoType="dijit.layout.StackContainer" style="margin:5px; border:solid 1px;">
        <div dojoType="dijit.layout.ContentPane">One</div>
        <div dojoType="dijit.layout.ContentPane">Two</div>
        <div dojoType="dijit.layout.ContentPane">Three</div>
        <div dojoType="dijit.layout.ContentPane">Four</div>
      </div>
      <button dojoType="dijit.form.Button">Back
        <script type="dojo/method" event="onClick" args="evt">dijit.byId("stack").back(  );</script>
      </button>
      <button dojoType="dijit.form.Button">Next
        <script type="dojo/method" event="onClick" args="evt">dijit.byId("stack").forward(  );</script>
      </button>
</body>
</html>

Dojo-toolkit.zip( 3,849 k)

Related examples in the same category

1.	Create stack container programmatically
2.	Use StackContainer and ContentPane
3.	Wizard based on stack container

Stack container with back and forward actions : Stack Container « Dojo toolkit « JavaScript DHTML

Related examples in the same category