TAILIEUCHUNG - JQuery: Novice to Ninja- P13

JQuery: Novice to Ninja- P13:No matter what kind of ninja you are—a cooking ninja, a corporate lawyer ninja, or an actual ninja ninja—virtuosity lies in first mastering the basic tools of the trade. Once conquered, it’s then up to the full-fledged ninja to apply that knowledge in creative and inventive ways. | Menus Tabs Tooltips and Panels 157 p id about StarTrackr was founded in early 2009 when a young . p p id disclaimer Disclaimer This service is not intended for the those . p div Next we need to create our tab navigation bar. As with so many controls and effects it s the overall illusion that s important. An unordered list of links will do nicely but we ll style them to look tab-like chapter_05 11_simple_tabs excerpt ul id info-nav li a href intro Intro a li li a href about About Us a li li a href disclaimer Disclaimer a li ul We ve styled the links with CSS to have a tab-like appearance but there are dozens of different ways of accomplishing this so use whatever you re familiar with or what seems most sensible. We ve opted for extremely basic styles since what we want to focus on is the functionality. The first task we ll do after our document s ready is hide all of the tabs except the first one this will be our default tab. We could do this by hiding all the panes and then showing the first one like this info p .hide .eq 0 .show But this makes jQuery do more work than is necessary we want to avoid hiding a tab only to show it again straight away. Instead we can be more specific with our selector we can combine filters to select everything except the first element chapter_05 11_simple_tabs excerpt info p not first .hide 158 jQuery Novice to Ninja The important point is that once the page loads only one tab content pane is displayed to the user. The code to switch tabs is straightforward and quite similar to the other hide show controls we ve built so far chapter_05 11_simple_tabs excerpt info-nav li .click function e info p .hide info-nav .current .removeClass current this .addClass current var clicked this .find a first .attr href info clicked .fadeIn fast .eq 0 .addClass current There s one peculiar aspect worth pointing out to select the content pane corresponding to the clicked link we re joining the href .

• Đồ họa - Thiết kế - Flash
• thiết kế web
• giáo trình photoshop
• css căn bản
• thủ thuật cắt html
• đồ họa máy tính
• 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