TAILIEUCHUNG - Test Driven JavaScript Development- P11

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 .

• Đồ họa - Thiết kế - Flash
• thiết kế web
• giáo trình css
• kĩ thuật cắt html
• flash cơ bản
• giáo trình photoshop
• Thiết kế trang web
• hướng dẫn Thiết kế trang web
• kinh nghiệm Thiết kế trang web
• tài liệu Thiết kế trang web
• cẩm nang Thiết kế trang web
• kỹ thuật Thiết kế trang web
• Bài giảng Thiết kế Web
• Đại cương Thiết kế Web
• Tổng quan Thiết kế Web
• Môn học Thiết kế Web
• Mục tiêu Thiết kế Web
• Giáo trình Thiết kế giao diện web
• Thiết kế và quản lý website
• Thiết kế giao diện web
• Nhận dạng các trang web
• Cấu trúc trang web
• phương pháp thiết kế trang Web
• kỹ thuật thiết kế Web
• thiết kế web nhanh
• thực hành thiết kế web
• thiết kế web đẹp
• tài liệu về thiết kế web
• thủ thuật thiết kế web
• mẹo dùng web
• học thiết kế web
• Thiết kế web động
• tài liệu Thiết kế web động
• hướng dẫn Thiết kế web động
• kinh nghiệm Thiết kế web động
• cẩm nang Thiết kế web động