Permalink
Browse files

ENHANCEMENT Using jQuery UI tabs in TabSet form field. Using custom j…

…avascript to ensure sizing of tabs within layout-managed containers.

API CHANGE Changed CSS-class in TabSet template from "tabstrip" to "ss-tabset".

git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/sapphire/trunk@92477 467b73ca-7a2a-4603-9d3b-597d59a354a9
  • Loading branch information...
1 parent 053431a commit b3f0a9a034c0d8963095fc8d5693f54a3c4dcc91 @chillu chillu committed Nov 21, 2009
Showing with 83 additions and 19 deletions.
  1. +7 −8 forms/TabSet.php
  2. +63 −0 javascript/TabSet.js
  3. +13 −11 templates/TabSetFieldHolder.ss
View
@@ -49,15 +49,14 @@ public function id() {
* The HTML is a standardised format, containing a <ul;
*/
public function FieldHolder() {
- Requirements::javascript(THIRDPARTY_DIR . "/loader.js");
- Requirements::javascript(THIRDPARTY_DIR . "/prototype.js");
- Requirements::javascript(THIRDPARTY_DIR . "/behaviour.js");
- Requirements::javascript(THIRDPARTY_DIR . "/prototype_improvements.js");
- Requirements::javascript(THIRDPARTY_DIR . "/jquery/jquery.js");
+ Requirements::javascript(THIRDPARTY_DIR . "/jquery/jquery-latest.js");
Requirements::javascript(THIRDPARTY_DIR . "/jquery/jquery_improvements.js");
- Requirements::javascript(THIRDPARTY_DIR . '/jquery/plugins/livequery/jquery.livequery.js');
- Requirements::javascript(THIRDPARTY_DIR . "/tabstrip/tabstrip.js");
- Requirements::css(THIRDPARTY_DIR . "/tabstrip/tabstrip.css");
+ Requirements::javascript(THIRDPARTY_DIR . '/jquery/ui/jquery-ui.js');
+ Requirements::javascript(THIRDPARTY_DIR . '/jquery/ui/ui.core.js');
+ Requirements::javascript(THIRDPARTY_DIR . '/jquery/ui/ui.tabs.js');
+ Requirements::javascript(SAPPHIRE_DIR . '/javascript/TabSet.js');
+ Requirements::css(THIRDPARTY_DIR . '/jquery/themes/smoothness/ui.all.css');
+ Requirements::css(THIRDPARTY_DIR . '/jquery/themes/smoothness/ui.tabs.css');
return $this->renderWith("TabSetFieldHolder");
}
View
@@ -0,0 +1,63 @@
+jQuery(document).ready(function () {
+ /**
+ * Replace prefixes for all hashlinks in tabs.
+ * SSViewer rewrites them from "#Root_MyTab" to
+ * e.g. "/admin/#Root_MyTab" which makes them
+ * unusable for jQuery UI.
+ */
+ jQuery('.ss-tabset > ul a').each(function() {
+ var href = jQuery(this).attr('href').replace(/.*(#.*)/, '$1');
+ jQuery(this).attr('href', href);
+ })
+
+ // Initialize tabset
+ jQuery('.ss-tabset').tabs();
+
+ /**
+ * Adjust height of nested tabset panels contained
+ * in jQuery.layout panels to allow scrolling.
+ */
+ var ss_tabset_fixHeight = function(e) {
+ console.debug(jQuery('.ss-tabset .tab'));
+ jQuery('.ss-tabset .tab').each(function() {
+ console.debug(this);
+ var $tabPane = jQuery(this);
+ var $layoutPane = $tabPane.parents('.ui-layout-pane:first');
+
+ // don't apply resizing if tabset is not contained in a layout pane
+ if(!$layoutPane) return;
+
+ // substract heights of unrelated tab elements
+ var $tabSets = $tabPane.parents('.ss-tabset');
+ var $tabBars = $tabSets.children('.ui-tabs-nav');
+ var tabPaneHeight = $layoutPane.height();
+ console.log('total', tabPaneHeight);
+ // each tabset has certain padding and borders
+ $tabSets.each(function() {
+ console.log('tabset',jQuery(this).outerHeight(true) - jQuery(this).innerHeight());
+ tabPaneHeight -= jQuery(this).outerHeight(true) - jQuery(this).innerHeight();
+ });
+ // get all "parent" tab navigation bars to substract their heights
+ // from the total panel height
+ $tabBars.each(function() {
+ console.log('tabbar', jQuery(this).outerHeight(true));
+ // substract height of every tab bar from the total panel height
+ tabPaneHeight -= jQuery(this).outerHeight(true);
+ });
+ // Remove any margins from the tab pane
+ console.log('tabpane', $tabPane.outerHeight(true) - $tabPane.innerHeight());
+ tabPaneHeight -= $tabPane.outerHeight(true) - $tabPane.innerHeight();
+ console.log('final', tabPaneHeight);
+ $tabPane.height(tabPaneHeight);
+
+ // if tab has no nested tabs, set overflow to auto
+ if(!$tabPane.find('.tab').length) {
+ $tabPane.css('overflow', 'auto');
+ }
+ });
+ }
+
+ ss_tabset_fixHeight();
+
+ jQuery(window).bind('resize', ss_tabset_fixHeight);
+});
@@ -1,17 +1,19 @@
- <ul class="tabstrip">
+<div class="ss-tabset">
+ <ul>
<% control Tabs %>
<li class="$FirstLast $MiddleString"><a href="#$id" id="tab-$id">$Title</a></li>
<% end_control %>
</ul>
-
+
<% control Tabs %>
- <div class="tab" id="$id">
- <% if Tabs %>
- $FieldHolder
- <% else %>
- <% control Fields %>
- $FieldHolder
- <% end_control %>
- <% end_if %>
- </div>
+ <div class="tab" id="$id">
+ <% if Tabs %>
+ $FieldHolder
+ <% else %>
+ <% control Fields %>
+ $FieldHolder
+ <% end_control %>
+ <% end_if %>
+ </div>
<% end_control %>
+</div>

0 comments on commit b3f0a9a

Please sign in to comment.