TAILIEUCHUNG - JQuery: Novice to Ninja- P23

JQuery: Novice to Ninja- P23: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. | Lists Trees and Tables 307 li span Dot-Com millionaires span ul li Joel Mynor li The tree can nest as far as is needed just repeat the structure inside the appropriate child list item. Because it s nice and consistent you can easily generate the HTML on the server. With the list on the page the next step is to pretty it up with some CSS. That s in your court but our code will add a few extra classes you can use to customize the display. The handle class will be assigned to the element we ll insert to act as the toggle handle. When a branch of the tree is opened it ll receive the opened class otherwise it ll have the closed class. We ve used these classes below to add a CSS sprite which will change between a plus sign and a minus sign chapter_08 04_expandable_tree excerpt .handle background transparent url no-repeat left top display block float left width 10px height 10px cursor pointer .closed background-position left top .opened background-position left -10px The code for the tree is remarkably simple thanks to the recursive nature of a tree we just have to do one small piece of code and attach it to each subcategory. Our plan of attack for creating the expanding collapsing tree effect is to first hide all of the nested ul categories. Then we ll add in a new element before the category title that contains a click event handler this will open and close its branch 308 jQuery Novice to Ninja chapter_08 04_expandable_tree excerpt celebTree ul .hide .prev span .before span span .prev .addClass handle closed .click function plus minus handle click Six chained actions. Bet you re feeling some of that jQuery power coursing through your veins right about now Here we see where consistent markup helps us out in each subcategory list we look for the previous span element that s the subcategory title. Then we insert a new span element right before the title. Because our handle was added before the title we need to move back to it with the .

• Đồ 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