Test Driven JavaScript Development- P11:This book is about programming JavaScript for the real world, using the techniques and workflow suggested by Test-Driven Development. It is about gaining confidence in your code through test coverage, and gaining the ability to fearlessly refactor and organically evolve your code base. It is about writing modular and testable code. It is about writing JavaScript that works in a wide variety of environments and that doesn’t get in your user’s way. | Unobtrusive Tabbed Panel Example 193 Listing Using the tab controller function if typeof document undefined return var dom var ol news-tabs . try var controller ol js-tabs function curr prev getPanel prev active-panel getPanel curr active-panel a 0 catch e The getPanel function used in the above example uses the semantic markup to find which panel an anchor should toggle. It extracts the part of the anchor s href attribute after the hash character looks up elements with corresponding names and finally picks the first one it finds. It then traverses the element s parent until it finds a div element. The method can be seen in Listing . Listing Finding the panel to toggle function . function getPanel element if element typeof string return null var target . var panel target 0 Please purchase PDF Split-Merge on to remove this watermark. From the Library of 194 Unobtrusive JavaScript while panel div panel return panel . Note that getPanel defensively checks its argument and aborts if it doesn t receive an actual element. This means that we can fearlessly call it using the curr and prev anchors in the onTabChange method even though the prev argument will be undefined the first time it is called. To make the tabbed panels appear as panels we can sprinkle on some very simple CSS as seen in Listing . Listing Simple tabbed panel CSS .js-tabs .section clear left display none .js-tabs .active-panel display block .js-tabs .nav border-bottom 1px solid bbb margin 0 0 6px overflow visible padding 0 .js-tabs .nav li display inline list-style none .js-tabs .nav a background eee border 1px solid bbb .
