ENHANCEMENT Using jQuery UI tabs in TabSet form field. Using custom javascript 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
This commit is contained in:
parent
053431aaf0
commit
b3f0a9a034
|
@ -49,15 +49,14 @@ class TabSet extends CompositeField {
|
||||||
* The HTML is a standardised format, containing a <ul;
|
* The HTML is a standardised format, containing a <ul;
|
||||||
*/
|
*/
|
||||||
public function FieldHolder() {
|
public function FieldHolder() {
|
||||||
Requirements::javascript(THIRDPARTY_DIR . "/loader.js");
|
Requirements::javascript(THIRDPARTY_DIR . "/jquery/jquery-latest.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_improvements.js");
|
Requirements::javascript(THIRDPARTY_DIR . "/jquery/jquery_improvements.js");
|
||||||
Requirements::javascript(THIRDPARTY_DIR . '/jquery/plugins/livequery/jquery.livequery.js');
|
Requirements::javascript(THIRDPARTY_DIR . '/jquery/ui/jquery-ui.js');
|
||||||
Requirements::javascript(THIRDPARTY_DIR . "/tabstrip/tabstrip.js");
|
Requirements::javascript(THIRDPARTY_DIR . '/jquery/ui/ui.core.js');
|
||||||
Requirements::css(THIRDPARTY_DIR . "/tabstrip/tabstrip.css");
|
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");
|
return $this->renderWith("TabSetFieldHolder");
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 %>
|
<% control Tabs %>
|
||||||
<li class="$FirstLast $MiddleString"><a href="#$id" id="tab-$id">$Title</a></li>
|
<li class="$FirstLast $MiddleString"><a href="#$id" id="tab-$id">$Title</a></li>
|
||||||
<% end_control %>
|
<% end_control %>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<% control Tabs %>
|
<% control Tabs %>
|
||||||
<div class="tab" id="$id">
|
<div class="tab" id="$id">
|
||||||
<% if Tabs %>
|
<% if Tabs %>
|
||||||
$FieldHolder
|
$FieldHolder
|
||||||
<% else %>
|
<% else %>
|
||||||
<% control Fields %>
|
<% control Fields %>
|
||||||
$FieldHolder
|
$FieldHolder
|
||||||
<% end_control %>
|
<% end_control %>
|
||||||
<% end_if %>
|
<% end_if %>
|
||||||
</div>
|
</div>
|
||||||
<% end_control %>
|
<% end_control %>
|
||||||
|
</div>
|
Loading…
Reference in New Issue