Sweeping Design

Just thought I’d share a tip about making Tabbed Panels more flexible with the CSS Selector.

In working on the Menu page for The Bank Restaurant and Wine Bar, I needed Tabbed Panels with the same custom scroll bar I used on the rest of the site. I chose the fleXcroll kit because it is flexible, unobtrusive, and cross-browser compatible (if poorly documented). Once you figure out how fleXcroll wants you to give it the elements of your scroll bar, activating it is as easy as adding the “fleXcroll” class to the div you want scrolled. This was the same div which wraps my Tabbed Panels (div.TabbedPanelsContentGroup).

No problem, I thought, as fleXcroll makes a big deal about how it “can cope with dynamic updates such as dynamic content injected via AJAX.” The problem, though, is that that Tabbed Panels can’t cope with the wrappers fleXcroll injects inside the panel container, as Tabbed Panels depends on a clean and fixed hierarchy to identify panels as direct descendants of that container. Tabbed Panels thought the fleXcroll wrappers were panels, and things just didn’t work.

Luckily, the CSS Selector provides a much easier method of finding panels and tabs than traversing a fixed hierarchy. Instead of identifying tabs as children of .TabbedPanelsTabGroup (which is identified as the first child of the div you give to Tabbed Panel’s constructor) and panels as children of .TabbedPanelsContentGroup, you simply identify tabs as Spry.$$(”.TabbedPanelsTab”) and panels as Spry.$$(”.TabbedPanelsContent”)!

In SpryTabbedPanels.js, tabs and panels are collected with getTabs() and getPanels():


  var tabs = this.getTabs();
  var panels = this.getContentPanels();


To escape the hierarchical bounds of Tabbed Panels, you just have to change:


Spry.Widget.TabbedPanels.prototype.getTabs = function() {
  var tabs = [];
  var tg = this.getTabGroup();
  if (tg)
    tabs = this.getElementChildren(tg);
  return tabs;
};

to:


Spry.Widget.TabbedPanels.prototype.getTabs = function() {
  var tabs = [];
  tabs = Spry.$$(".TabbedPanelsTab");   // or your selector of choice
  return tabs;
};

and:


Spry.Widget.TabbedPanels.prototype.getContentPanels = function() {
  var panels = [];
  var pg = this.getContentPanelGroup();
  if (pg)
    panels = this.getElementChildren(pg);
  return panels;
};

to:


Spry.Widget.TabbedPanels.prototype.getContentPanels = function() {
  var panels = [];
  panels = Spry.$$(".TabbedPanelsContent");  // or your selector of choice
  return panels;
};