Đang chuẩn bị liên kết để tải về tài liệu:
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 script.js excerpt .handle background transparent url tree-handle.png 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 script.js 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 .