JavaScript Tutorial/Dojo toolkit/Accordion Pane

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

Create Accordian Pane with your code

   <source lang="javascript">

<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.AccordionContainer");
     dojo.addOnLoad(show);
     
     function show() {
       var myDijit = new dijit.layout.AccordionContainer({
         duration : 900
       });
       dojo.byId("my").appendChild(myDijit.domNode);
       myDijit.domNode.style.width = "300px";
       myDijit.domNode.style.height = "800px";
       var myPane1 = new dijit.layout.AccordionPane({
         selected : false, title : "Pane 1"
       });
       myPane1.setContent("first");
       myDijit.addChild(myPane1);
       var myPane2 = new dijit.layout.AccordionPane({
         selected : true, title : "Pane 2"
       });
       myPane2.setContent("second");
       myDijit.addChild(myPane2);
       var myPane3 = new dijit.layout.AccordionPane({
         selected : false, title : "Pane 3",
         href : "yourPage.htm"
       });
       myDijit.addChild(myPane3);
       myDijit.startup();
     }      
   </script>
 </head>
 <body class="tundra">
 
 </body>

</html></source>


Create Accordion Pane declaratively

   <source lang="javascript">

<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.AccordionContainer");
   </script>
 </head>
 <body class="tundra">

           <paragraph >A.</paragraph>

           <paragraph>B.</paragraph>

           <paragraph>C</paragraph>

 </body>

</html></source>


Create dijit.layout.AccordionContainer

   <source lang="javascript">

<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.AccordionContainer");
           dojo.require("dijit.layout.AccordionPane");
           function f(){
               var container = new dijit.layout.AccordionContainer({}, "foo");
               var child1 = dojo.doc.createElement("div");
               child1.innerHTML="pane 1";
               
               var content1 = dojo.doc.createElement("p");
               content1.innerHTML = "content 1";
               
               var ap1 = new dijit.layout.AccordionPane({title: "pane1", selected : true}, content1);
               container.addChild(ap1);
               
               var child2 = dojo.doc.createElement("div");
               child2.innerHTML="pane 2";
               
               var content2 = dojo.doc.createElement("p");
               content2.innerHTML = "content 2";
               var ap2 = new dijit.layout.AccordionPane({title: "pane2"}, content2);
               container.addChild(ap2);
               
               container.startup(  );
           }
   </script>
 </head>
 <body class="tundra" onload=f()>

</div> </body> </html></source>


Nested Accordion Pane

   <source lang="javascript">

<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.AccordionContainer");
           dojo.require("dijit.layout.AccordionPane");
   </script>
 </head>
 <body class="tundra">

           <paragraph>One</paragraph>

           <paragraph>Two</paragraph>

           <paragraph>Three</paragraph>
Four

</body> </html></source>


Set title for Accordion Pane

   <source lang="javascript">

<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.AccordionContainer");
   </script>
 </head>
 <body class="tundra">

        first

        second

        third

 </body>

</html></source>

Источник — «http://wbex.ru/index.php?title=JavaScript_Tutorial/Dojo_toolkit/Accordion_Pane&oldid=8631»