Add support for SelectionGroup form fields

SelectionGroup should be created with the SilverstrapSelectionGroup
class provided by entidi/silverstrap-module (to avoid pulling in
conflicting javascript code).

They are rendered as togglable tabs with pill navigation:
http://getbootstrap.com/javascript/#tabs

The value is submitted as an hidden input.

js/silverstrap.js

@@ -36,6 +36,15 @@ $(document).ready(function () {
     }
   });
 
+  // Set hidden input of SilverstrapSelectionGroup
+  $subject = $('ul.silverstrapselectiongroup.nav a');
+  $subject.on('click', function () {
+    var href  = $(this).attr('href'),
+        pivot = href.lastIndexOf('-'),
+        name  = href.substr(1, pivot - 1);
+    $('input[type="hidden"][name="' + name + '"]').val($(this).data('value'));
+  });
+
   // Enable colorbox support on Fotorama frames
   if ($.isFunction($.colorbox) && $.isFunction($.Fotorama)) {
     var transition;

templates/forms/SelectionGroup.ss

@@ -0,0 +1,11 @@
+<input type="hidden" name="$Name.ATT" value="$Value.ATT">
+<ul class="nav nav-pills<% if extraClass %> $extraClass<% end_if %>"><% loop $FieldSet %>
+  <li role="presentation"<% if $Selected || $Up.IsReadonly %> class="<% if $Selected %>active<% end_if %> <% if $Up.IsReadOnly %>disabled<% end_if %>"<% end_if %>>
+    <a href="#$Up.Name.ATT-$Pos" aria-controls="$Up.Name.ATT-$Pos" role="tab" data-toggle="tab" data-value="$value.ATT">$Title</a>
+  </li><% end_loop %>
+</ul>
+<div class="tab-content"><% loop $FieldSet %>
+  <div id="$Up.Name.ATT-$Pos" role="tab-panel" class="tab-pane fade<% if $Selected %> in active<% end_if %>"><% if $FieldList %>
+    $FieldHolder<% end_if %>
+  </div><% end_loop %>
+</div>