TAILIEUCHUNG - JQuery: Novice to Ninja- P14

JQuery: Novice to Ninja- P14: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. | 172 jQuery Novice to Ninja chapter_05 17_simple_tooltips excerpt Mouse move code .tooltip .css top - 10 px .css left 20 px Finally we need to respond to mouse movement by updating the tooltip s location. This way the tooltip will follow the mouse around just like the browser s built-in tooltips do. And presto We ve replaced the default tooltips with our own and we re fully in control of their appearance and animation. Advanced Tooltips It s good to know how to build a simple tooltip but we also know that we can do better. For more sophisticated tooltips which can include other markup such as images or links inside the content we ll need to move them from the title attribute into our actual markup. We ll hide them with CSS then reveal and position them using jQuery as required. The final effect is illustrated in Figure . Welcome to StarTrackr the planet s prem where in to the right ier celet -------P r Legal Disclaimer Figure . Our advanced tooltip Our tooltip markup will consist of two nested span elements which will sit inside the element we want to use to trigger the tooltip. This may occasionally require some creativity with your markup but helps us to position the tooltip as we can give it an absolute position offset from the parent element. It also helps us handle triggering events since if the user moves the mouse over the tooltip it will still be over the triggering element so no additional hover event handling is required. Here s an example of the tooltip markup Menus Tabs Tooltips and Panels 173 chapter_05 18_advanced_tooltips excerpt p Welcome to strong StarTrackr span class tooltip span a href Legal Disclaimer a span span strong the planet s premier celebrity tracking . p When we re done the tooltip will look great and will contain a link to the disclaimer page. But let s not hang around we ve considered a few tooltip methods so let s drive straight in. As we ll see when we start writing the code our tooltip .

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