Đang chuẩn bị nút TẢI XUỐNG, xin hãy chờ
Tải xuống
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. | 9.5 Unobtrusive Tabbed Panel Example 193 Listing 9.10 Using the tab controller function if typeof document undefined Idocument.getElementByld return var dom tddjs.dom var ol document.getElementById news-tabs . try var controller tddjs.ui.tabController.create ol dom.addClassName ol.parentNode js-tabs controller.onTabChange function curr prev dom.removeClassName getPanel prev active-panel dom.addClassName getPanel curr active-panel controller.activateTab ol.getElementsByTagName 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 9.11. Listing 9.11 Finding the panel to toggle function . function getPanel element if element typeof element.href string return null var target element.href.replace . var panel document.getElementsByName target 0 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. From the Library of WoweBook.Com 194 Unobtrusive JavaScript while panel panel.tagName.toLowerCase div panel panel.parentNode 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 9.12. Listing 9.12 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 .
