JavaScript DHTML/Dojo toolkit/Stack Container

Материал из Web эксперт
Перейти к: навигация, поиск

Create stack container programmatically

   <source lang="html4strict">

<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"); 
           function f(){
               var container = new dijit.layout.StackContainer({}, "foo");
               
               var leftChild = new dijit.layout.ContentPane({});
               leftChild.domNode.innerHTML="page 1";
               
               var rightChild = new dijit.layout.ContentPane({});
               rightChild.domNode.innerHTML="page 2";
               
               container.addChild(leftChild);
               container.addChild(rightChild);
               
               container.startup(  );
               
               dijit.byId("foo").forward(  );
           }
   </script>
 </head>
 <body class="tundra" onload=f()>

</body> </html> 

 </source>


Stack container with back and forward actions

   <source lang="html4strict">

<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">
One
Two
Three
Four
     <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> 

 </source>


Use StackContainer and ContentPane

   <source lang="html4strict">

<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">
One
Two
Three
Four
     <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> 

 </source>


Wizard based on stack container

   <source lang="html4strict">

<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("dojo.parser");
       dojo.require("dijit.layout.ContentPane");
       dojo.require("dijit.layout.StackContainer");
       dojo.require("dijit.form.Button");
   </script>
 </head>
 <body class="tundra">
   <button id="previous" onClick="dijit.byId("mainTabContainer").back()">Previous</button>
   <button id="next" onClick="dijit.byId("mainTabContainer").forward()">Next</button>

Page First

Page Second.

Page Third.

 </body>

</html> 

 </source>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Dojo_toolkit/Stack_Container&oldid=2079»