PANTONE 2955 CPANTONE Orange 021 C CMYK 100, 45, 0, 37CMYK O, 53, 100, 0 Black 100%Black 50% CMYK: Pantone: Grey scale SIMPLE, FAST, POWERFUL — JAVASCRIPT THE WAY IT SHOULD BE JQUERY NOVICE TO NINJA BY EARLE CASTLEDINE & CRAIG SHARKIE NEW KICKS AND TRICKS SECOND EDITION Summary of Contents Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii 1. Falling in Love with jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 2. Selecting, Decorating, and Enhancing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 3. Animating, Scrolling, and Resizing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 4. Images and Slideshows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93 5. Menus, Tabs, Tooltips, and Panels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139 6. Construction, Ajax, and Interactivity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187 7. Forms, Controls, and Dialogs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239 8. Lists, Trees, and Tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 305 9. Plugins, Themes, and Advanced Topics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 347 A. Reference Material . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 409 B. JavaScript Tidbits . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 419 C. Plugin Helpers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 425 Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 431 JQUERY: NOVICE TO NINJA BY EARLE CASTLEDINE & CRAIG SHARKIE Down l o a d f rom Wo w ! e B o ok <ww w . w o w e book.c o m > jQuery: Novice to Ninja by Earle Castledine and Craig Sharkie Copyright © 2012 SitePoint Pty. Ltd. Assistant Technical Editor: Diana MacDonaldProduct Manager: Simon Mackie Indexer: Michele CombesTechnical Editor: Tom Museth Cover Designer: Alex WalkerExpert Reviewer: Jörn Zaefferer Editor: Kelly Steele Latest Update: February 2012Printing History: First Edition: February 2010 Second Edition: February 2012 Notice of Rights All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means without the prior written permission of the publisher, except in the case of brief quotations included in critical articles or reviews. Notice of Liability The authors and publisher have made every effort to ensure the accuracy of the information herein. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors and SitePoint Pty. Ltd., nor its dealers or distributors, will be held liable for any damages to be caused either directly or indirectly by the instructions contained in this book, or by the software or hardware products described herein. Trademark Notice Rather than indicating every occurrence of a trademarked name as such, this book uses the names only in an editorial fashion and to the benefit of the trademark owner with no intention of infringement of the trademark. Published by SitePoint Pty. Ltd. 48 Cambridge Street Collingwood VIC Australia 3066 Web: www.sitepoint.com Email: business@sitepoint.com ISBN 978-0-9871530-1-2 (print) ISBN 978-0-9871530-7-4 (ebook) Printed and bound in the United States of America iv About Earle Castledine Sporting a Masters in Information Technology and a lifetime of experience on the Web of Hard Knocks, Earle Castledine (aka Mr. Speaker) holds an interest in everything computery. Raised in the wild by various 8-bit home computers, he settled in the Internet during the mid-nineties and has been living and working there ever since. A senior systems analyst and JavaScript flâneur, he is equally happy in the rapid rivers of Scala, the dense foliage of mobile apps and games, or the fluffy clouds of client-side interaction development. As co-creator of the client-side opus TurnTubelist, 1 as well as countless web-based experi- ments, Earle recognizes the Internet not as a lubricant for social change but as a vehicle for unleashing frivolous ECMAScript gadgets and interesting time-wasting technologies. About Craig Sharkie A degree in Fine Art is a strange entrance to a career with a passion for programming, but that’s where Craig started. A right-brain approach to code and problem-solving has seen him plying his craft in many of the big names of the Web: AOL, Microsoft, Yahoo, Ziff-Davis, and Australia’s Atlassian. Today, you’ll find him coding HTML5 and JavaScript solutions for Telstra Media’s IPTV division, stretching the boundaries of where you might expect to find jQuery. His passion for programming and a fondness for serial commas and the like have led him on a path from journalism, through development, on to conferencing, and now into print. Taking up JavaScript in 1995, he was an evangelist for the “good parts” even before Crockford coined the term, and has seen the language flow from the desktop through mobile, and out to televi- sions and beyond. Being able to start the day with his new daughter just makes seeing where each day leads all the more fascinating. About Tom Museth Tom Museth first fell in love with code while creating scrolling adventure games in BASIC on his Commodore 64, and usability testing them on reluctant family members. He then spent 16 years as a journalist and production editor before deciding web development would be more rewarding. He has a passion for jQuery, PHP, HTML5, and CSS3; is eagerly eyeing the world of mobile dev; and likes to de-stress via a book, a beach, and a fishing rod. 1 http://www.turntubelist.com/ v About Jörn Zaefferer Jörn Zaefferer is a freelance web developer, consultant, and trainer, residing in Cologne, Germany. Jörn evolved jQuery’s test suite into QUnit, a JavaScript unit-testing framework, and maintains it. He also created and maintains a number of popular plugins. As a jQuery UI development lead, he focuses on the development of new plugins, widgets, and utilities. About SitePoint SitePoint specializes in publishing fun, practical, and easy-to-understand content for Web professionals. Visit http://www.sitepoint.com/ to access our blogs, books, newsletters, articles, and community forums. vi For Amelia. Thank you. —Earle For Jemima: May it remain others that continue oblivious to the myriad unseen opportunities that lay open before us. —Craig Down l o a d f rom Wo w ! e B o ok <ww w . w o w e book.c o m > [...]... 431 Preface 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 In recent times, jQuery has proven itself to be a simple but powerful tool for taming and transforming web pages,... browsers, or those not standards-compliant 3 4 jQuery: Novice to Ninja And while you might gain a little more power and a few extra features from more dedicated feature detection micro-libraries like Modernizr1, making use of the tools to hand is a ninja s signature It’s bad form to add even a micro-library when you don’t need to jQuery UI jQuery has already been used to make some impressive widgets and effects,... than a wee bit wonderful Together with Earle and SitePoint, I’m privileged to be able to bring jQuery to a new generation of coders, but as good as it was to work with Earle and SitePoint once again, it’s only a wee privilege compared to watching Jemima grow Conventions Used in This Book You’ll notice that we’ve used certain typographic and layout styles throughout the book to signify different types... your skills to the next level, you’ll find a wealth of good coding advice and in-depth knowledge You should already have intermediate to advanced HTML and CSS skills, as jQuery uses CSS-style selectors to zero in on page elements Some rudimentary programming knowledge will be helpful to have, as jQuery despite its clever abstractions—is still based on JavaScript That said, we’ve tried to explain any... almost any functionality 5 6 jQuery: Novice to Ninja you might require is likely to have already been turned into a plugin, and is available for you to start using Even if it turns out that you need to do some work yourself, the plugin repository is often the best place to steer you in the right direction Where Are My Plugins? At the time of publication, the jQuery plugin2 repository is under development... quick look at them here Take the jQuery Quiz Now that you’ve reached the end of the book, put your jQuery ninja skills to the test with our simple online quiz We’ve created a series of multiple choice questions based on the book’s content that you can use to assess your learning The quiz is on the SitePoint website at http://www .sitepoint. com/quiz -jquery Where to Find Help jQuery is under active development,... are you’ll still need to fall back on the everyday list, the humdrum tree, or even the oft-derided table to present information to your users This chapter will show how jQuery can make even the boring stuff fun, as we’ll learn how to transform lists into dynamic, sortable data, and tables into data grids with sophisticated functionality Chapter 9: Plugins, Themes, and Advanced Topics jQuery is more than... alternatives, but if the reasons we’ve outlined appeal to you, jQuery is probably the way to go Enough talk: time for jQuery to put its money where its mouth is! Downloading and Including jQuery Before you can fall in love with jQuery (or at least, judge it for yourself) you need to obtain the latest version of the code and add it to your web pages There are a few ways to do this, each with a couple of options... featured experience to users whose browsers allow it, and an acceptable experience to everyone else 2 http://plugins .jquery. com/ http://blog .jquery. com/2011/12/08/what-is-happening -to- the -jquery- plugins-site/ 4 https://github.com /jquery/ plugins .jquery. com 3 Falling in Love with jQuery Widespread Adoption If you study usage trends on Google Trends,5 you’ll witness jQuery s exponential rise to superstardom... them into a neat library that sits on top of jQuery The first library of this type is called jQuery UI, and the latest is jQuery Mobile (which we’ll look at more closely in Chapter 9) jQuery UI comprises a menagerie of useful effects and advanced widgets that are accessible and highly customizable through the use of themes Some of these features are illustrated in Figure 1.1 Figure 1.1 A few jQuery . . . 431 JQUERY: NOVICE TO NINJA BY EARLE CASTLEDINE & CRAIG SHARKIE Down l o a d f rom Wo w ! e B o ok <ww w . w o w e book.c o m > jQuery: Novice to Ninja by Earle Castledine and. 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. easy to learn. Once you’ve chained together your first few actions, you’ll be addicted to the jQuery building blocks, and your friends and family will wish you’d never discovered it! On top of