PayEx Developer Portal

1.1	1	{{box cssClass="floatinginfobox" title="Contents"}}{{toc start="2" depth="6" numbered="false" scope="page" /}}{{/box}}
	2
	3	{{velocity}}
	4	#macro(tabs $tabsKeyNames)
	5	## for debugging, please
	6	## 1) copy/paste the macro code from macro object into here
	7	## 2) replace #set ($tabsSortedMapString = $context.macro.params.tabsKeyNames) with #set ($tabsSortedMapString = $tabsKeyNames)
	8	#end
	9	{{/velocity}}
	10
	11	{{info}}This is home and test page for the "tabs" macro.{{/info}}
	12	Creates tabbed view for specified content areas wrapped in <div/>s with unique ids
	13
	14	== Usage ==
	15
	16	{{box}}
	17	1. Define where tabs should be rendered {{{{{tabs idsToLabels='tabId1=Tab One, tabId2=Tab Two, ..., tabIdN=Tab N' /}}}}}
	18	2. Define tabs content in {{{(%id="<unique tab id>"%)(((<tab content here>)))}}}:
	19	{{{(%id="tabId1"%)(((Tab 1 Content)))}}}
	20	{{{(%id="tabId2"%)(((Tab 2 Content)))}}}
	21	...
	22	{{{(%id="tabIdN"%)(((Tab N Content)))}}}
	23	{{/box}}
	24
	25	== Parameters definition ==
	26
	27	\|=Name \|=Optional \|=Allowed values \|=Default value \|=Description
	28	\|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'.
	29
	30	== Known issues ==
	31	* Tab size is fixed (toucan skin), labels that do not fit will get trimmed (see [[Tab name too long>>#HTabnametoolong?skin=toucan]])
	32	* Layout consistency is dependent on white-spaces (see [[Interesting layout bugs>>#HInterestinglayoutbugs]])
	33
	34	== Examples ==
	35
	36	=== Content generated by XWiki-wide macro ===
	37	{{tabs idsToLabels='tabId11=My xwiki-wide tabs, tabId12=My working tabs :)' /}}
	38	(%id="tabId11"%)((({{box cssClass="tabId11div"}}
	39	First tab!
	40	{{/box}}
	41	I can post any content here
	42	)))
	43
	44	(%id="tabId12"%)((({{box cssClass="tabId12div"}}
	45	Second tab!
	46	{{/box}}
	47	And here too
	48	)))
	49
	50
	51	=== Known bugs example ===
	52	==== Tab name too long ====
	53	You should view this issue in [[Toucan>>#HTabnametoolong?skin=toucan]] skin.
	54	Content is generated from this code: ##~{~{tabs idsToLabels='sql2key1=Small tab, sql2key2=Second large tab with large label' /~}~}##
	55	{{tabs idsToLabels='sql2key1=Small tab, sql2key2=Second large tab with large label' /}}
	56	(%id="sql2key1"%)((({{code language="sql" }}
	57	SELECT COUNT(ctg_id) AS col_0_0_ FROM categories
	58	-- some text
	59	-- several lines
	60	-- of comments
	61	-- describing this sql query
	62	{{/code}})))
	63
	64	(%id="sql2key2"%)((({{code language="sql"}}
	65	SELECT COUNT(ctg_id) AS col_0_0_ FROM categories2
	66	-- another tab with text
	67
	68	-- Testing content overflow
	69	-- Text below this box ...
	70	-- ... should not get covered with it
	71
	72	-- just check this!!!
	73
	74	-- btw: no extra-paragraph has been added before the macro
	75	{{/code}})))
	76
	77	==== Interesting layout bugs ====
	78	===== White spaces before ~(~%id =====
	79	{{tabs idsToLabels='sql3key1=Tab 1, sql3key2=Tab 2' /}}
	80	(%id="sql2key1"%)((({{code language="sql" }}
	81	SELECT COUNT(ctg_id) AS col_0_0_ FROM categories
	82	-- some text
	83	-- of comments
	84	-- describing this sql query
	85	{{/code}})))
	86
	87	(%id="sql3key2"%)((({{code language="sql"}}
	88	SELECT COUNT(ctg_id) AS col_0_0_ FROM categories2
	89	-- another tab with text
	90	-- some text
	91	-- more lines in comments
	92	-- describing this sql query
	93	{{/code}})))
	94
	95	===== White spaces before ~{~{code =====
	96	Check this bug in both [[Colibri>>#HWhitespacesbeforecode?skin=colibri]] and [[Toucan>>#HWhitespacesbeforecode?skin=toucan]] skins.
	97	{{tabs idsToLabels='sql4key1=Tab 1, sql4key2=Tab 2' /}}
	98	(%id="sql4key1"%)(((
	99	{{code language="sql" }}
	100	SELECT COUNT(ctg_id) AS col_0_0_ FROM categories
	101	-- some text
	102	-- of comments
	103	-- describing this sql query
	104	{{/code}})))
	105
	106	(%id="sql4key2"%)(((
	107	{{code language="sql"}}
	108	SELECT COUNT(ctg_id) AS col_0_0_ FROM categories2
	109	-- another tab with text
	110	-- some text
	111	-- more lines in comments
	112	-- describing this sql query
	113	{{/code}})))
	114
	115	=== Example for debugging ===
	116	Content generated by in-page macro (used for quick macro debugging).
	117	See instructions for debugging at the top of the page
	118	{{velocity}}#tabs('tabId31=Tab one, tabId32=Tab 2'){{/velocity}}
	119	(%id="tabId31"%)((({{box }}
	120	First tab content
	121	{{/box}})))
	122
	123	(%id="tabId32"%)((({{box }}
	124	Second tab content
	125	{{/box}})))

Wiki source code of Tabs macro