JavaScript Tutorial/Dojo toolkit/Accordion Pane

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

Create Accordian Pane with your code

<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">
    <div id="my">&nbsp;</div>
  </body>
</html>


Create Accordion Pane declaratively

<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">
    <div dojoType="dijit.layout.AccordionContainer" duration="80" style="margin-right: 10px; width: 500px; height: 200px;">
        <div dojoType="dijit.layout.AccordionPane" selected="true" title="A">
            <paragraph >A.</paragraph>
        </div>
        <div dojoType="dijit.layout.AccordionPane" title="B">
            <paragraph>B.</paragraph>
        </div>
        <div dojoType="dijit.layout.AccordionPane" title="C">
            <paragraph>C</paragraph>
        </div>
    </div>
  </body>
</html>


Create dijit.layout.AccordionContainer

<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 id="foo" >
    </div>
</div>
</body>
</html>


Nested Accordion Pane

<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">
    <div id="foo" dojoType="dijit.layout.AccordionContainer"  style="margin:5px">
    <div dojoType="dijit.layout.AccordionPane" title="one">
            <paragraph>One</paragraph>
    </div>
    <div dojoType="dijit.layout.AccordionPane" title="two">
            <paragraph>Two</paragraph>
    </div>
    <div dojoType="dijit.layout.AccordionPane" title="three">
            <paragraph>Three</paragraph>
    </div>
    <div id="blue" dojoType="dijit.layout.AccordionPane" title="four">
        <div dojoType="dijit.layout.ContentPane" href="blueFish">Four</div>
    </div>
</div>
</body>
</html>


Set title for Accordion Pane

<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">
     <div dojoType="dijit.layout.AccordionContainer" duration="2000"
       style="width:300px;height:800px;">
       <div dojoType="dijit.layout.AccordionPane"
         selected="true" title="Accordion Pane 1">
         first
       </div>
       <div dojoType="dijit.layout.AccordionPane"
         selected="false" title="Accordion Pane 2">
         second
       </div>
       <div dojoType="dijit.layout.AccordionPane"
         selected="false" title="Accordion Pane 3">
         third
       </div>
     </div>
  </body>
</html>
Источник — «http://wbex.ru/index.php?title=JavaScript_Tutorial/Dojo_toolkit/Accordion_Pane&oldid=8631»