JavaScript DHTML/Dojo toolkit/Accordion Pane — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
|
(нет различий)
|
Версия 12:59, 26 мая 2010
Содержание
Create Accordian Pane with your code
<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.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="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.AccordionContainer"); </script> </head> <body class="tundra">
A.
B.
C
</body>
</html>
</source>
Create dijit.layout.AccordionContainer
<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.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="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.AccordionContainer"); dojo.require("dijit.layout.AccordionPane"); </script> </head> <body class="tundra">
One
Two
Three
Four
</body> </html>
</source>
Set title for Accordion Pane
<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.AccordionContainer"); </script> </head> <body class="tundra">
first
second
third
</body>
</html>
</source>