[Equanda-svn-commit] SF.net SVN: equanda: [146] trunk/equanda-tapestry5/src/site/wiki/accordion. wiki

[<tri...@us...>]

Revision: 146
          http://equanda.svn.sourceforge.net/equanda/?rev=146&view=rev
Author:   triathlon98
Date:     2007-11-11 13:52:05 -0800 (Sun, 11 Nov 2007)

Log Message:
-----------
EQ-79 accordion component documentation

Modified Paths:
--------------
    trunk/equanda-tapestry5/src/site/wiki/accordion.wiki

Modified: trunk/equanda-tapestry5/src/site/wiki/accordion.wiki
===================================================================
--- trunk/equanda-tapestry5/src/site/wiki/accordion.wiki	2007-11-10 23:11:22 UTC (rev 145)
+++ trunk/equanda-tapestry5/src/site/wiki/accordion.wiki	2007-11-11 21:52:05 UTC (rev 146)
@@ -1,3 +1,55 @@
 h1. Accordion
 
-...
\ No newline at end of file
+An accordion component integrates nicely in tapestry.
+
+You have to pass the title and content panes as parameters to the accordion component. There is currently a limitation of twentyone panels.
+
+{code}
+    <span t:type="equanda/Accordion" id="accordion">
+        <t:parameter name="title1">First title</t:parameter>
+        <t:parameter name="content1">
+            <p>This is the content for the first pane</p>
+            <p>With some more text</p>
+        </t:parameter>
+        <t:parameter name="title2">Another title pane</t:parameter>
+        <t:parameter name="content2">
+            <p>With even more content</p>
+        </t:parameter>
+        <t:parameter name="title3">Latin text</t:parameter>
+        <t:parameter name="content3">
+            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero ipsum, volutpat nec, posuere vitae, pulvinar ut, quam. Morbi fringilla pulvinar nisi. Cras luctus leo sed orci. In id mi eget nunc blandit nonummy. Morbi at lacus. Ut sed elit. Donec libero. Sed feugiat tempor erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Nam lorem mi, accumsan id, commodo sit amet, interdum sit amet, augue.</p>
+            <p>Cras massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum accumsan neque vitae odio. Phasellus luctus arcu quis nibh. Maecenas leo. Ut aliquam hendrerit odio. Vestibulum luctus diam nec enim. Nam mi. Etiam eros turpis, ultrices et, ullamcorper nec, posuere sed, nisi. Integer placerat risus sit amet purus. Nulla elit purus, consequat sed, blandit in, feugiat bibendum, quam. In hac habitasse platea dictumst. Ut vel lorem. Ut pharetra leo. Sed sit amet felis. Nunc sed eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed elit metus, euismod sed, laoreet a, aliquam a, enim.</p>
+        </t:parameter>
+    </span>
+{code}
+
+The component automatically handles the hiding of all (except one) panel at the start, and making sure the correct pane is selected when the title is clicked on.
+
+How the accordion is displayed is handled using CSS. The classes which are used depend on the accordion component id. This also assures it will work when there are several accordion components on a page (just assure they have a different id).
+
+{code}
+.accordion_title {
+    background-color: lightgray;
+    color: black;
+    height: 15px;
+    font-weight: normal;
+    padding-left: 5px;
+    padding-top: 3px;
+    padding-bottom: 3px;
+    cursor: pointer;
+}
+
+.accordion_title_active {
+    font-weight: bold;
+}
+
+.accordion_content {
+    padding-top: 10px;
+    padding-bottom: 10px;
+    padding-left: 10px;
+    padding-right: 2px;
+    background-color: beige;
+    overflow: auto;
+    height: 200px;
+}
+{code}


This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site.