Home
Capitoli 2012
Log-in
Codice sorgente Wiki di
Tabs macro
Mostra i numeri di riga
{{box cssClass="floatinginfobox" title="**Contents**"}}{{toc start="2" depth="6" numbered="false" scope="page" /}}{{/box}} {{velocity}} #macro(tabs $tabsKeyNames) ## for debugging, please ## 1) copy/paste the macro code from macro object into here ## 2) replace #set ($tabsSortedMapString = $context.macro.params.tabsKeyNames) with #set ($tabsSortedMapString = $tabsKeyNames) #end {{/velocity}} {{info}}This is home and test page for the "tabs" macro.{{/info}} Creates tabbed view for specified content areas wrapped in <div/>s with unique ids == Usage == {{box}} 1. Define where tabs should be rendered {{{{{tabs idsToLabels='tabId1=Tab One, tabId2=Tab Two, ..., tabIdN=Tab N' /}}}}} 2. Define tabs content in {{{(%id="<unique tab id>"%)(((<tab content here>)))}}}: {{{(%id="tabId1"%)(((Tab 1 Content)))}}} {{{(%id="tabId2"%)(((Tab 2 Content)))}}} ... {{{(%id="tabIdN"%)(((Tab N Content)))}}} {{/box}} == Parameters definition == |=Name |=Optional |=Allowed values |=Default value |=Description |idsToLabels |no |String | - |This parameter required a comma-separated tab id to tab label values sting formatted like idsToLabels='tabId1=Tab One, tabId2=Tab Two, tabId3=TabThree'. == Known issues == * Tab size is fixed (toucan skin), labels that do not fit will get trimmed (see [[Tab name too long>>#HTabnametoolong?skin=toucan]]) * Layout consistency is dependent on white-spaces (see [[Interesting layout bugs>>#HInterestinglayoutbugs]]) == Examples == === Content generated by XWiki-wide macro === {{tabs idsToLabels='tabId11=My xwiki-wide tabs, tabId12=My working tabs :)' /}} (%id="tabId11"%)((({{box cssClass="tabId11div"}} First tab! {{/box}} I can post any content here ))) (%id="tabId12"%)((({{box cssClass="tabId12div"}} Second tab! {{/box}} And here too ))) === Known bugs example === ==== Tab name too long ==== You should view this issue in [[Toucan>>#HTabnametoolong?skin=toucan]] skin. Content is generated from this code: ##~{~{tabs idsToLabels='sql2key1=Small tab, sql2key2=**Second large tab with large label**' /~}~}## {{tabs idsToLabels='sql2key1=Small tab, sql2key2=Second large tab with large label' /}} (%id="sql2key1"%)((({{code language="sql" }} SELECT COUNT(ctg_id) AS col_0_0_ FROM categories -- some text -- several lines -- of comments -- describing this sql query {{/code}}))) (%id="sql2key2"%)((({{code language="sql"}} SELECT COUNT(ctg_id) AS col_0_0_ FROM categories2 -- another tab with text -- Testing content overflow -- Text below this box ... -- ... should not get covered with it -- just check this!!! -- btw: no extra-paragraph has been added before the macro {{/code}}))) ==== Interesting layout bugs ==== ===== White spaces before ~(~%id ===== {{tabs idsToLabels='sql3key1=Tab 1, sql3key2=Tab 2' /}} (%id="sql2key1"%)((({{code language="sql" }} SELECT COUNT(ctg_id) AS col_0_0_ FROM categories -- some text -- of comments -- describing this sql query {{/code}}))) (%id="sql3key2"%)((({{code language="sql"}} SELECT COUNT(ctg_id) AS col_0_0_ FROM categories2 -- another tab with text -- some text -- more lines in comments -- describing this sql query {{/code}}))) ===== White spaces before ~{~{code ===== Check this bug in both [[Colibri>>#HWhitespacesbeforecode?skin=colibri]] and [[Toucan>>#HWhitespacesbeforecode?skin=toucan]] skins. {{tabs idsToLabels='sql4key1=Tab 1, sql4key2=Tab 2' /}} (%id="sql4key1"%)((( {{code language="sql" }} SELECT COUNT(ctg_id) AS col_0_0_ FROM categories -- some text -- of comments -- describing this sql query {{/code}}))) (%id="sql4key2"%)((( {{code language="sql"}} SELECT COUNT(ctg_id) AS col_0_0_ FROM categories2 -- another tab with text -- some text -- more lines in comments -- describing this sql query {{/code}}))) === Example for debugging === Content generated by in-page macro (used for quick macro debugging). See instructions for debugging at the top of the page {{velocity}}#tabs('tabId31=Tab one, tabId32=Tab 2'){{/velocity}} (%id="tabId31"%)((({{box }} First tab content {{/box}}))) (%id="tabId32"%)((({{box }} Second tab content {{/box}})))
