From version 14.4
edited by Vincent Massol
on 2015/05/06 17:34
To version 15.1
edited by Pascal Bastien
on 2015/05/07 10:34
Change comment: 2 links added

Summary

Details

Page properties
Author
... ... @@ -1,1 +1,1 @@
1 -xwiki:XWiki.VincentMassol
1 +xwiki:XWiki.pbas
ExtensionCode.ExtensionClass[0]
Description
... ... @@ -2,7 +2,7 @@
2 2  
3 3  I have an xWiki application with data and I want simply add tabs presentation and tooltip help.
4 4  This page is more an howto doc about xwiki application rendering than an extension.
5 -My Xar extension provide 4 pages in Sandbox space: BootstrapTabExample, BootstrapTabClass, BootstrapTabSheet and BootstrapTabTemplate.
5 +My Xar extension [[BootstrapTabExample-0.9.xar>>attach:Sandbox.BootstrapTabExample-0.9.xar]] provide 4 pages in //Sandbox// space: //BootstrapTabExample//, //BootstrapTabClass//, //BootstrapTabSheet// and //BootstrapTabTemplate//.
6 6  
7 7  = Ingredients =
8 8  
... ... @@ -13,6 +13,7 @@
13 13  * and finally some velocity instruction in my //BootstrapTabSheet// to display HTML code or not depending of property name.
14 14  
15 15  = Directions =
16 +
16 16  Here velocity code in my //BootstrapTabSheet// sheet:
17 17  
18 18  {{code}}
... ... @@ -73,17 +73,14 @@
73 73  I use a classic loop to display all my field/properties but I insert some HTML code for tab and tooltips.
74 74  
75 75  === Tabs ===
77 +
76 76  I use a classic loop to display all my field/properties except for field who's the name starting with //'CodeH_'// string. In this case, I display only the PrettyName value. This PrettyName value of this specific field contains of course HTML code for my tabs (and bloc).
77 77  For this property I use //Computed Field// type property because it is unnecessary to store data in this field.
78 78  
79 79  * Here, first HTML code to display all tabs on top of page:
80 -{{code}}
81 -<div class="tabs"><ul class="nav nav-tabs"><li><a data-toggle="tab" href="#P1"><span class="Down">&#x25BC;</span> Tab one</a></li><li><a data-toggle="tab" href="#P2"><span class="Down">&#x25BC;</span> Tab two</a></li><li><a data-toggle="tab" href="#P9"><span class="Down">&#x25BC;</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>
82 -{{/code}}
82 +{{code}}<div class="tabs"><ul class="nav nav-tabs"><li><a data-toggle="tab" href="#P1"><span class="Down">&#x25BC;</span> Tab one</a></li><li><a data-toggle="tab" href="#P2"><span class="Down">&#x25BC;</span> Tab two</a></li><li><a data-toggle="tab" href="#P9"><span class="Down">&#x25BC;</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> {{/code}}
83 83  * and HTML code to start a new tab:
84 -{{code}}
85 -<div id="P2" class="tab-pane fade"><h4>Another Comment with large width</h4><DIV Id="TabP2" Class="container">
86 -{{/code}}
84 +{{code}}<div id="P2" class="tab-pane fade"><h4>Another Comment with large width</h4><DIV Id="TabP2" Class="container">{{/code}}
87 87  
88 88  Here a screenshot of //BootstrapTabClass// and result to understand better:
89 89  [[image:BootstrapTabsClass.png||alt="BootstrapTabsClass"]]
... ... @@ -91,15 +91,17 @@
91 91  [[image:BootstrapTabsView.png||alt="BootstrapTabsView"]]
92 92  
93 93  === Tooltips ===
92 +
94 94  To display tooltips, in //BootstrapTabClass// I paste in the PrettyName of a property this HTML span tag code:
95 -{{code}}
96 -My PrettyName <span class="BtsHelp yellow-tooltip" rel="tooltip" data-toggle="tooltip" data-placement="bottom" title="Text displayed in tooltip"> icon:lightbulb </span>:
97 -{{/code}}
94 +{{code}}My PrettyName <span class="BtsHelp yellow-tooltip" rel="tooltip" data-toggle="tooltip" data-placement="bottom" title="Text displayed in tooltip"> icon:lightbulb </span>: {{/code}}
98 98  [[image:BootstrapTabsTooltip.png||alt="BootstrapTabsTooltip"]]
99 99  
100 100  === Large column ===
98 +
101 101  If I want display a data (e.g a textarea comment) on full width of the page, I simply don't fill PrettyName of the property and //BootstrapTabSheet// will display data on one column.
102 102  
103 103  [[image:BootstrapTabsLarge.png||alt="BootstrapTabsLarge"]]
104 104  
105 -= XAR example in Sandbox space =
103 += Links =
104 +* Bootstrap tabs: http://getbootstrap.com/components/#nav
105 +* Bootstrap tooltips: http://www.w3schools.com/bootstrap/bootstrap_tooltip.asp

Get Connected