|
From: <tri...@us...> - 2007-11-23 12:37:09
|
Revision: 161
http://equanda.svn.sourceforge.net/equanda/?rev=161&view=rev
Author: triathlon98
Date: 2007-11-23 04:37:04 -0800 (Fri, 23 Nov 2007)
Log Message:
-----------
EQ-86 tabs component, documentation
Modified Paths:
--------------
trunk/equanda-tapestry5/src/site/site.xml
trunk/equanda-tapestry5/src/site/wiki/accordion.wiki
trunk/equanda-tapestry5/src/site/wiki/index.wiki
Added Paths:
-----------
trunk/equanda-tapestry5/src/site/wiki/tabs.wiki
Modified: trunk/equanda-tapestry5/src/site/site.xml
===================================================================
--- trunk/equanda-tapestry5/src/site/site.xml 2007-11-23 11:39:54 UTC (rev 160)
+++ trunk/equanda-tapestry5/src/site/site.xml 2007-11-23 12:37:04 UTC (rev 161)
@@ -8,6 +8,11 @@
<menu name="tapestry5">
<item name="Introduction" href="index.html"/>
+ <item name="Components" collapse="false">
+ <item name="Accordion" href="accordion.html"/>
+ <item name="Tabs" href="tabs.html"/>
+ </item>
</menu>
+
</body>
</project>
Modified: trunk/equanda-tapestry5/src/site/wiki/accordion.wiki
===================================================================
--- trunk/equanda-tapestry5/src/site/wiki/accordion.wiki 2007-11-23 11:39:54 UTC (rev 160)
+++ trunk/equanda-tapestry5/src/site/wiki/accordion.wiki 2007-11-23 12:37:04 UTC (rev 161)
@@ -2,7 +2,7 @@
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 fifty panels. Only panels which have both a title and content parameter block are displayed, however the indexes do not need to be sequential (hence then need for a limit).
+You have to pass the title and content panes as parameters to the accordion component. There is currently a limitation of fifty panels. Only panels which have both a title and content parameter block are displayed, however the indexes do not need to be sequential (hence the need for a limit).
{code}
<span t:type="equanda/Accordion" id="accordion">
Modified: trunk/equanda-tapestry5/src/site/wiki/index.wiki
===================================================================
--- trunk/equanda-tapestry5/src/site/wiki/index.wiki 2007-11-23 11:39:54 UTC (rev 160)
+++ trunk/equanda-tapestry5/src/site/wiki/index.wiki 2007-11-23 12:37:04 UTC (rev 161)
@@ -5,4 +5,5 @@
The following components are provided
- [Accordion|accordion.html]
+- [Tabs|tabs.html]
- ...
Added: trunk/equanda-tapestry5/src/site/wiki/tabs.wiki
===================================================================
--- trunk/equanda-tapestry5/src/site/wiki/tabs.wiki (rev 0)
+++ trunk/equanda-tapestry5/src/site/wiki/tabs.wiki 2007-11-23 12:37:04 UTC (rev 161)
@@ -0,0 +1,74 @@
+h1. Tabs
+
+A tabs component which allows grouping objects in tab pages, based on the [domtab|http://www.onlinetools.org/tools/domtabdata/] library.
+
+You have to pass the title and content panes as parameters to the accordion component. There is currently a limitation of fifty panels. Only panels which have both a title and content parameter block are displayed, however the indexes do not need to be sequential (hence the need for a limit).
+
+{code}
+ <span t:type="equanda/Tabs" id="tabs">
+ <t:parameter name="title1">First title</t:parameter>
+ <t:parameter name="content1">
+ <p>This is the content for the first tab</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}
+
+How the tabs are displayed is handled using CSS. Below is an example of styling for the CSS.
+
+{code}
+div.domtab {
+ padding:0 3em;
+ width:80%;
+}
+ul.domtabs {
+ float:left;
+ width:100%;
+ margin: 0 0 0 0;
+ list-style:none;
+}
+ul.domtabs li {
+ float:left;
+ padding:0 .5em 0 0;
+}
+ul.domtabs a:link,
+ul.domtabs a:visited,
+ul.domtabs a:active,
+ul.domtabs a:hover {
+ width:8em;
+ padding:.2em 1em;
+ display:block;
+ background:lightgray;
+ color:black;
+ font-weight:bold;
+ text-decoration:none;
+}
+ul.domtabs a:hover {
+ background:gray;
+ color:white;
+}
+div.domtab div {
+ clear:both;
+ width:auto;
+ background:white;
+ border:solid 1px;
+ color:black;
+ padding:1em 3em;
+}
+ul.domtabs li.active a:link,
+ul.domtabs li.active a:visited,
+ul.domtabs li.active a:active,
+ul.domtabs li.active a:hover {
+ background:black;
+ color:white;
+}
+{code}
This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site.
|