Tuesday, December 6, 2011

Enhanced tabs (blur tabs after clicking)

Hi All,



Just made some modification in my code for the Tabbed Panels
widget:

Before, when you clicked on a tab, it keeps the little dashed
link outline (to show that the focus is on that link) until you
click something else.

This, in my opinion, takes away from the overall effect of
the widget, and i thought it would look much better without it.

So without further adue, here's the one line mod:



in SpryTabbedPanels.js:



351 this.addClassName(tabs[tpIndex], this.tabSelectedClass);

352 this.addClassName(panels[tpIndex],
this.panelVisibleClass);

353 panels[tpIndex].style.display = ''block'';

354 this.currentTabIndex = tpIndex;



changes to:



351 this.addClassName(tabs[tpIndex], this.tabSelectedClass);

352 this.addClassName(panels[tpIndex],
this.panelVisibleClass);

353 panels[tpIndex].style.display = ''block'';


354 panels[tpIndex].blur();

355 this.currentTabIndex = tpIndex;



I don't know if anyone will find this useful, but thought I
would post it just in case someone out there was pondering about
it. :D

No comments:

Post a Comment