BootstrapTabs
 | A way to display data, from an xwiki application, with bootstrap style tabs and tooltip + an application example in Sandbox space |
| Type | XAR |
| Category | Application |
| Developed by | |
| Rating | |
| License | Do What The Fuck You Want To Public License 2 |
| Compatibility | Tested from xWiki 6.4 to 7.0.1 with flamingo skin. |
Description
(still working on it)
Recepi
I have an application with data but I want simply add tabs presentation and tooltip help.
ingredients
- a nice application with a Class BootstrapTabClass, Template BootstrapTabTemplate and Sheet BootstrapTabSheet
- some CSS instruction to dipslay tabs and tooltips in a XWiki.StyleSheetExtension Objects attached to the Sheet BootstrapTabSheet
- some javascript code to save last opened tab when we edit or view a page to stay on same opened tab in an XWiki.JavaScriptExtension object attached to the Sheet BootstrapTabSheet
- some short CSS instruction to apply only in view mode in an XWiki.StyleSheetExtension Objects attached to the Class by example BootstrapTabClass
Directions
Here velocity code in my BootstrapTabSheet sheet:
## tab and table CSS
#set($discard = $xwiki.ssx.use("Sandbox.BootstrapTabSheet"))
#if ($xcontext.action == 'view')
## Affiche une CSS spécifique en visualisation
#set($discard = $xwiki.ssx.use("Sandbox.BootstrapTabClass"))
#end
## Javascript to drop a cookie to save last opened tab
#set($discard = $xwiki.jsx.use("Sandbox.BootstrapTabSheet"))
##Prefix to identify HTML code to display it
#set ($PrefxHtml= 'CodeH')
{{html wiki="true"}}
## Class to use
#set($class = $doc.getObject('Sandbox.BootstrapTabClass').xWikiClass)
## loop on Class properties
#foreach($prop in $class.properties)
## display HTML code (stored in Prettyname property) for tab and container
#if ($prop.Name.startsWith("$!{PrefxHtml}_")=='true')
##Début du bloc Div: insère le contenu HTML (début du Div) contenu dans le prettyName
#set ($StrLine= $prop.prettyName)
#else
##display data in a table
##start the line
#set ($StrLine= "<div class='BstRow'>")
#if ($stringtool.trimToEmpty($prop.prettyName)!='')
#set($classWidthColumn='BtsColumnNormalWidth')
## display PrettyName in first Column
#set ($StrLine= $!StrLine+"<div class='BstColumn1'>$prop.prettyName</div>")
#else
#set($classWidthColumn='BtsColumnLargeWidth')
#end
## display data in second Column
## #set ($StrLine= $!StrLine+" <div class='BstColumn2 BstViewValue'>$doc.display($prop.getName())</div>")
#set ($StrLine= $!StrLine+" <div class='BstColumn2 BstViewValue " + $classWidthColumn + "'>$doc.display($prop.getName())</div>")
## end of the line
#set ($StrLine= $!StrLine+"</div>")
#end
## display the table line
$!StrLine
## and reinit it
#set ($StrLine='')
#end
{{/html}}
{{/velocity}}
How it is working?
I use a classic loop to display all my field except for field who's the name starting with 'CodeH_' string. In this case I display only the PrettyName value. The PrettyName value of this specific field contains of course this HTML code for my tabs.
First HTML code for all tabs:
<div class="tabs"><ul class="nav nav-tabs"><li><a data-toggle="tab" href="#P1"><span class="Down">▼</span> Tab one</a></li><li><a data-toggle="tab" href="#P2"><span class="Down">▼</span> Tab two</a></li><li><a data-toggle="tab" href="#P9"><span class="Down">▼</span> My last tab</a></li></ul><div class="tab-content"><div id="P1" class="tab-pane fade in active"><h4>My Tab one H4 title</h4><DIV Id="TabP1" Class="container"><div class="Bloc"><div class="BlocTitle">My bloc title</div>
and
HTML code to start a new tab:
<div id="P2" class="tab-pane fade"><h4>Another Comment with large width</h4><DIV Id="TabP2" Class="container">
Here a screenshot of BootstrapTabClass and result to understand better:
To display tips I paste in the PrettyName this HTML code:
My PrettyName <span class="BtsHelp yellow-tooltip" rel="tooltip" data-toggle="tooltip" data-placement="bottom" title="Text displayed in tooltip"> icon:lightbulb </span>:
Screenshots
