# JQuery: Novice to Ninja- P14

Chia sẻ: Cong Thanh | Ngày: | Loại File: PDF | Số trang:15

0
45
lượt xem
5

## JQuery: Novice to Ninja- P14

Mô tả tài liệu

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.

Chủ đề:

Bình luận(0)

Lưu

## Nội dung Text: JQuery: Novice to Ninja- P14

1. 172 jQuery: Novice to Ninja chapter_05/17_simple_tooltips/script.js (excerpt) // Mouse move code $('.tooltip') .css('top', (e.pageY - 10) + 'px') .css('left', (e.pageX + 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 Licensed to JamesCarlson@aol.com 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 5.11. Figure 5.11. 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: 2. Menus, Tabs, Tooltips, and Panels 173 chapter_05/18_advanced_tooltips/index.html (excerpt) Welcome to StarTrackr! Legal Disclaimer the planet's premier celebrity tracking … 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 Licensed to JamesCarlson@aol.com drive straight in. As we’ll see when we start writing the code, our tooltip will be quite clever, posi­ tioning itself on whichever side of the target element that has enough room for it to be displayed. In order to make a cool text-bubble graphic work in this context, we’ll need four different bubbles: above-left, above-right, below-left, and below- right. We’ll be using a single sprite for each of the tooltip’s four possible states, as illustrated in Figure 5.12. Figure 5.12. Our tooltip sprite These tooltips require some fairly complex jQuery code. We’ll go over it bit by bit, but don’t worry if you have trouble understanding all of it right now. There’s a bit of a leap from writing quick two- or three-line scripts which replace and highlight content on the page to writing a more complex UI widget. At the beginning of the next chapter, we’ll have a look at some of the ways we can try to minimize complex­ ity and keep our code readable, even as it becomes longer and more involved. 3. 174 jQuery: Novice to Ninja For the moment, try to focus on seeing the bits of jQuery you already know employed in a larger context; this should give you an idea of how you can go about combining small pieces of logic into a larger picture that performs really impressively. Our first task is to create a TT object that will contain all our code. We set a delay variable at the top of the object (this will make it easier to modify the configuration of the widget without hunting through the code to find where this variable was set): chapter_05/18_advanced_tooltips/script.js (excerpt) var TT = { delay: 600, Licensed to JamesCarlson@aol.com Then we add a function called setTips, which we’ll run when the page loads or is resized. This function will find all the tooltips on the page and determine their position by looking at their parent elements. It will also set up a hover event on each of them so that they’re displayed on mouseover. Here’s the hover event: chapter_05/18_advanced_tooltips/script.js (excerpt) setTips: function() {$('.tooltip').parent().hover(function() { // store the tooltip being hovered TT.current = $(this); TT.timer = setTimeout(function() { // find the tooltip, TT.current.find(".tooltip").fadeIn('fast'); }, TT.delay); }, function() { // on mouseout, clear timer and hide tooltip clearTimeout(TT.timer);$(this).find(".tooltip").fadeOut('fast'); }).attr("title", ""); // clear the title to stop browser tooltips That’s a fairly dense block of code, so let’s see if we can make some sense of what’s happening: We’ve attached the hover event to the parent of the tooltip span. If you look back at the markup, you’ll see this is correct: we put the tooltip inside the ele­ ment we want to attach it to.
4. Menus, Tabs, Tooltips, and Panels 175 We store a reference to that parent element inside a variable. What’s unusual here is that we’re using a property of our TT object instead of a global variable. We’ll come back to this in the next chapter, but for now just know that it’s much the same as writing var current = $(this);. We’re using the familiar setTimeout function, except that this time we’re saving the timer to a variable. This is so we can turn it off by name if we need to. We’re accessing the delay property we set before as the second parameter for setTimeout. As we’ve seen, this is how long the browser will wait before dis­ playing the tooltip. When the user mouses off the target, we want to stop the timer so that the Licensed to JamesCarlson@aol.com tooltip will stay hidden after the delay expires. We do this with the JavaScript clearTimeout method, passing in the reference to our timer. Okay, so now that our hover handler is set up, we need to determine the position of each of our tooltips. We’ll use each() to loop over them, but first we’ll grab the height and width of the screen. If we were to do this inside the loop, jQuery would need to calculate those values once for each tooltip, even though they’re always the same. By storing the values outside the loop, we avoid this wasteful calculation and improve the performance of our script: 5. 176 jQuery: Novice to Ninja chapter_05/18_advanced_tooltips/script.js (excerpt) var screenWidth =$(window).width(); var screenBottom = $(window).scrollTop() +$(window).height(); $(".tooltip").each(function() { // grab the containing element$container = $(this).parent(); // give it relative position if required if ($container.css("position") != 'absolute' && $container.css("position") != "fixed") {$container.css({position: 'relative'}); } Licensed to JamesCarlson@aol.com var totalHeight = $container.height() +$(this).outerHeight(); var width = $(this).outerWidth(); var offset =$container.offset(); // now we get the position the tip var top = $container.height(); // default placement var left = 0; This part of the code should be a little easier to understand. We loop over each tooltip on the page, and first store a reference to the container element just to avoid having to write$(this).parent() over and over. Notice that the variable name starts with $: this is just to help us remember that the variable contains a jQuery selection. Here’s a breakdown of the contents of the loop: We check to see if the parent element has position: absolute; or position: fixed;. It has to be positioned, since we’ll be using position: absolute; to offset the tooltip from it. If it already has absolute or fixed, we’ll leave it that way. If it doesn’t, though, we’ll give it position: relative;. We need to know the total combined height of both the tooltip and the parent element, so we store that in a variable to use later. By default, we give the tooltip a top position equal to the height of the container. This means it will appear directly below the container (since it is offset from the top by exactly the container’s height). 6. Menus, Tabs, Tooltips, and Panels 177 Logical Operators In JavaScript, when you’re testing for values in an if statement, you can use the && operator to mean and. So in the above example, the contents of the if block will only execute if both conditions (on either side of &&) are met. You can also write || (two pipe symbols) to mean or. If we’d used that instead of && above, the contents of the if block would execute if either condition was met. This is good work so far! We’re almost done, but we need to fix one small problem: what if the tooltip’s position takes it off the screen? If the target element is right at the bottom of the screen, and we want the tooltip to appear below it, the tooltip will Licensed to JamesCarlson@aol.com remain unseen! It’s time for a little collision detection. We need to find out if the tooltip is hitting either the bottom or right edge of the screen. Let’s have a look at how we accomplish this: chapter_05/18_advanced_tooltips/script.js (excerpt) // re-position if it's off the right of the screen if (offset.left + width > screenWidth) { left = 0 - width + 42;$(this).addClass('left'); } else { $(this).removeClass('left'); } // re-position if it's off the bottom of the screen if (offset.top + totalHeight > screenBottom) { top = 0 -$(this).outerHeight(); $(this).addClass('above'); } else {$(this).removeClass('above'); } We check to see if the tip’s horizontal or vertical offset, plus its width or height, is greater than the width or height of the screen (which we calculated earlier). If it is, we modify the top or left property respectively, and assign a class that we’ll use to display the appropriate part of our background image sprite.
7. 178 jQuery: Novice to Ninja The final (and easiest) step is to use the css action to assign the calculated top and left properties to the tips: chapter_05/18_advanced_tooltips/script.js (excerpt) $(this).css({ "top": top, "left": left }); We’ll call our setTips method on document-ready, and also each time the window is resized, to ensure that our tips are always adequately positioned: Licensed to JamesCarlson@aol.com chapter_05/18_advanced_tooltips/script.js (excerpt)$(document).ready(function() { TT.setTips(); }); $(window).resize(function() { TT.setTips(); }); With that code in place, we just need to add some CSS to position our background sprite appropriately, based on the classes we assigned: chapter_05/18_advanced_tooltips/tooltip.css (excerpt) span.tooltip.left { background-position: 100% 0; } span.tooltip.left span { padding: 15px 0 0 17px; } span.tooltip.above { background-position: 0 100%; } span.tooltip.above span { padding: 13px 0 0 12px; } 8. Menus, Tabs, Tooltips, and Panels 179 span.tooltip.above.left { background-position: 100% 100%; } span.tooltip.above.left span { padding: 13px 0 0 17px; } IE6 Support Although jQuery does a fantastic job of handling cross-browser issues in our JavaScript code, it’s not so good for our CSS. The above style rules rely on chaining several class selectors together. This will confuse Internet Explorer 6, which Licensed to JamesCarlson@aol.com will only see the last class in any style rule. Moreover, our PNG image relies on alpha-channel transparency for the tooltip’s drop shadow, and this is also unsup­ ported by IE6. Over the last few years, several major sites (including YouTube and Facebook) began phasing out support for IE6. This doesn’t mean that they totally ignore this browser, rather that they accept that IE6 users will receive a degraded experience (perhaps similar to what visitors without JavaScript will see). For our tooltip example, we could use conditional comments5 to target some styles specifically to IE6 and provide it with the same tooltip functionality—except using a flat background image without a thought-bubble style or a drop shadow. This way, the background position would be inconsequential, and the PNG issue solved. And there you have it! The final tooltip not only waits to see if you really meant for it to display, but it also shifts its position to make sure it’s fully visible whenever it does display! Because we’ve avoided linking this code to anything specific on our page, it’s easy to reuse this script on any other page—you just need to include a few spans with a tooltip class, and you’re off to the races. This is an important lesson: you should always try to structure your code in such a way that you can reuse it later. This will save you work in the long run, and give you more time to experiment with cool new functionality instead of rebuilding the same old widgets every time you need them. 5 http://reference.sitepoint.com/css/conditionalcomments/ 9. 180 jQuery: Novice to Ninja Order off the Menu Whew! That was a hard sprint to the finish line. Over the course of this chapter, we’ve ramped up our jQuery know-how and used it to move beyond simple hiding and revealing, and well into the territory of the true UI ninja. You’ve learned how to reduce complexity on the screen by packaging up links and widgets into collapsing menus, accordions, panels, and tooltips. In the next chapter, we’ll look at reducing complexity in our code, and then tackle what’s ostensibly the most important part of jQuery: Ajax! Licensed to JamesCarlson@aol.com 10. 6 Chapter Licensed to JamesCarlson@aol.com Construction, Ajax, and Interactivity Throughout the preceding chapters we’ve wowed and dazzled our client with a cornucopia of visual effects and optical magic tricks, giving his site a lifelike appear­ ance. Unfortunately, our client is becoming savvy: as well as wanting his pages looking Web 2.0, he wants them acting Web 2.0 as well. And having pages act Web 2.0 means one thing: Ajax! And not just a little bit—he wants the works: inline text editing, Twitter widgets, endlessly scrolling image galleries … he wants StarTrackr! to have more Ajax-enabled bells and whistles than Facebook, Flickr, and Netvibes combined. That’s fine by us. Implementing client-side Ajax functionality is easy, especially with jQuery as our framework. But these cool new features come at a cost of increased complexity. Some simple tasks (such as loading in a snippet of HTML) are no problem—but as we start to tackle the business of creating advanced Ajax compon­ ents, the risk of making a mess of unmaintainable spaghetti code grows large. So before we jump into the deep end, we’ll review some ways we can manage complex­ ity, and write well-behaved code that will impress our peers. 11. 182 jQuery: Novice to Ninja Construction and Best Practices JavaScript is a wonderful language. Don’t let anyone tell you any different. Its his­ torically poor reputation stems from years of misunderstanding and misuse: an al­ most infinite collection of inline scripts, displaying little regard for good coding practices like encapsulation and reuse. But the past few years have ushered in a new era for this underdog of the Web. Developers have begun to respect (and con­ quer) the language, and the result has been some great code libraries—including our favorite, jQuery. jQuery has greatly simplified the process of dealing with Ajax and the DOM, but it hasn’t changed the benefits of writing nice clean JavaScript code. There’s no need Licensed to JamesCarlson@aol.com for us to become masters of JavaScript—but there are a few steps we should take to ensure we’re writing the kind of code that will make future developers and main­ tainers of our projects want to buy us a beer. Cleaner jQuery We’ve done a fairly good job of steering clear of any involved JavaScript code—that’s a testament to how good jQuery is at doing what it does. But as our jQuery compon­ ents and effects grow more complex, we need to start thinking about how to best structure our code. Once again we should remember that, under the hood, jQuery is just JavaScript—so it’ll serve us well to steal a few best practices from the world of JavaScript. We already saw a bit of this kind of code organization when we built our advanced tooltip script at the end of Chapter 5. Now let’s reveal the whys and hows of writing cleaner jQuery code. Code Comments Just like HTML and CSS, JavaScript provides you with a way to comment your code. Any line that you begin with two slashes (//) will be ignored by the browser, so you can safely include explanations about what your code is doing. For example, in this snippet the first line will be ignored, and only the second will be processed as code: // Assign the value '3' to the variable 'count': var count = 3; 12. Construction, Ajax, and Interactivity 183 If you need to write comments which stretch over multiple lines, you can begin them with /* and end them with */. For example: /* An example of a multiline comment */ var count = 3; Comments go a long way to making your code reusable and maintainable: they help you see at a glance what each line or section is doing when you revisit code you wrote months ago. Licensed to JamesCarlson@aol.com Map Objects We’ve been dealing with key/value pair objects since all the way back in Chapter 2. We use them to pass multiple options into a single jQuery action, for example:$('p').css({color:'green', padding:'3px'}); They aren’t special jQuery constructs—once again, it’s just plain old JavaScript—but they’re great for encapsulating data to pass around in your own functions and widgets. For example, if you pull data out from some form fields, you can package them up into key/value mapped pairs that you can then process further: var id = $('input#id').val(); var name =$('input#name').val(); var age = \$('input#age').val(); var data = { type: 'person', id: id, name: name, age: age } With the data all wrapped up, we’re able to easily pass it around and use it however we like. To access any one of an object’s values, we simply need to type the object’s name, followed by a period (.), followed by the key associated with that value we wish to access. For example, given the data object defined above, if you wanted to