23,30 €
Mehr erfahren.
- Herausgeber: Packt Publishing
- Kategorie: Wissenschaft und neue Technologien
- Sprache: Englisch
In Detail
jQuery is the most famous JavaScript library. If you use jQuery a lot, it can be a good idea to start packaging your code into plugins. A jQuery plugin is simply a way to put your code into a package, which makes it easier to maintain your code and use across different projects. While basic scripting is relatively straightforward, writing plugins can leave people scratching their heads.
With this exhaustive guide in hand, you can start building your own plugins in a matter of minutes! This book takes you beyond the basics of jQuery and enables you to take full advantage of jQuery's powerful plugin architecture to deliver highly interactive content to your website viewers.
This book contains all the information you need to successfully author your very own jQuery plugin with a particular focus on the practical aspect of design and development.
This book will also cover some details of real life plugins and explain their functioning to gain a better understanding of the overall concept of plugin development and jQuery plugin architecture.
Different topics regarding plugin development are discussed, and you will learn how to develop many types of add-ons, ranging from media plugins (such as slideshows, video and audio controls, and so on) to various utilities (image pre-loading, handling cookies) and use and applications of jQuery effects and animations (sliding, fading, combined animations) to eventually demonstrate how all of these plugins can be merged and give birth to a new, more complex, and multipurpose script that comes in handy in a lot of situations.
A practical straightforward guide for creating your first jQuery plugin
Approach
This book takes a beginner's guide approach, giving you step-by-step instructions for creating a number of different jQuery plugins covering most of the common issues one may encounter when working on web pages and sites. It is a practical guide, which will show you how to design and build the most commonly used jQuery plugins.
Who this book is for
This book is for anyone who wants to have a better understanding of the dynamics of jQuery when plugins come into play, as well as for those who are willing to push jQuery to its limits and develop awesome plugins to use in their websites. A little background information about JS and jQuery cannot harm, but even very beginners can have a chance to be introduced to the wonderful world of jQuery.
Sie lesen das E-Book in den Legimi-Apps auf:
Seitenzahl: 299
Veröffentlichungsjahr: 2010
Ähnliche
Table of Contents
jQuery 1.4 Plugin Development
jQuery 1.4 Plugin Development
Beginner's Guide
Copyright © 2010 Packt Publishing
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 embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.
First published: October 2010
Production Reference: 1121010
Published by Packt Publishing Ltd.
32 Lincoln Road
Olton
Birmingham, B27 6PA, UK.
ISBN 978-1-849512-24-4
www.packtpub.com
Cover Image by Asher Wishkerman (<[email protected]>)
Credits
Author
Giulio Bai
Reviewers
Abel Mohler
Peter Guo Pei
Keith Wood
Acquisition Editor
Chaitanya Apte
Development Editor
Chaitanya Apte
Technical Editor
Hithesh Uchil
Indexer
Hemangini Bari
Editorial Team Leader
Aanchal Kumar
Project Team Leader
Lata Basantani
Project Coordinator
Shubhanjan Chatterjee
Proofreader
Chris Smith
Graphics
Nilesh Mohite
Production Coordinator
Aparna Bhagat
Cover Work
Aparna Bhagat
About the Author
Giulio Bai is a law student living in Modena, Italy who spends most of his time toying with stuff that doesn't have anything to do with law.
Even after trying to keep the list of his past achievements as short as possible, the number of projects he joined in (and invariably sunk short thereafter) makes it hard to narrow down his interests to programming and carousels alone.
It should be made clear that any claim of responsibility for those unfortunate ventures is wholeheartedly rejected—they never had the necessary potential to make it anyway.
I can't brag about this book with anybody if no credit for the beautiful JavaScript library jQuery is given to its author, John Resig.
Also, a bunch of thanks are randomly distributed to everybody I had any kind of contact with, in both real and virtual life, who have—no doubt—somehow helped me in writing this precious manuscript.
About the Reviewers
Abel Mohler is a freelance web developer and jQuery plugin author who works from his home near Asheville in the mountains of North Carolina. He is the author of popular jQuery plugins such as Mapbox and wTooltip. You can see a list of the plugins he has released at http://wayfarerweb.com/jquery/plugins/.
I'd like to thank those at Packt Publishing who reached out to me to work on a project as fun as this one, to the author for doing such a wonderful job with the material, and to Project Coordinator Shubhanjan Chatterjee for his patience and diligence in helping glue this project together into what it became.
I'd also like to thank those who helped me along the way to become a better developer, Brett Lytle of Lytleworks, who has the vision to find unique and simple solutions to any problem, Matt McCabe for his endless ideas and projects, and Mike Bykov of TigerTiger for helping to inspire me to grow my own technologies. Most of all, I'd like to thank my wife, Rebecca, for putting up with countless sleepless nights of studying, and pushing me to be a better man.
Peter Guo Pei is a Chinese Canadian website and software specialist. His expertise is mainly in the design of websites and applications and other computer software systems. He lives in the quiet town of Langley along the US-Canadian border with his lovely wife and two kids. He studied computer science in Fudan University China.
He has worked for various IT companies in China, USA, and Canada, including Sun Microsystems, Tandem, Wang, Kodak, and Motorola.
He loves to ride his bike.
I would like to thank my sweet wife Yan and my two lovely kids—my daughter Angel and son Jimmy. They have always been the sunshine of my life.
Keith Wood lives in Brisbane, Australia, where he is a Solutions Architect for Hyro Ltd.
He has been in the IT industry for over 20 years, working his way down from mainframes, through mini-computers, to PCs. He has used Delphi and JBuilder since their first release, contributing many OpenTools to the JBuilder community. He was also a frequent contributor of technical articles to Delphi Informant, Delphi Developer's Journal, Hardcore Delphi, and The Delphi Magazine magazines, and has written three books:
He did the initial development for log4d, a port of log4j to Delphi, and SAX for Pascal.
More recently, he has worked with jQuery for several years and has contributed many jQuery plugins—http://keith-wood.name/index.html#jquery—as well as developed with Marc Grabanski the Datepicker component that was incorporated into the jQuery UI project.
Mostly, he works with Java these days, but uses jQuery for any frontend work.
Preface
jQuery is the most famous JavaScript library. If you use jQuery a lot, it may be a good idea to start packaging your code into plugins. A jQuery plugin is simply a way to put your code into a package, which makes it easier to maintain your code and use it across different projects. Although basic scripting is relatively straightforward, writing plugins can leave people scratching their heads.
With this exhaustive guide in hand, you can start building your own plugins in a matter of minutes! This book takes you beyond the basics of jQuery and enables you to take full advantage of jQuery's powerful plugin architecture to deliver highly interactive content to your website viewers.
This book contains all the information you need to successfully author your very own jQuery plugin with a particular focus on the practical aspect of design and development.
This book will also cover some details of real-life plugins and explain their functioning to gain a better understanding of the overall concept of plugin development and jQuery plugin architecture.
Different topics regarding plugin development are discussed, and you will learn how to develop many types of add-ons, ranging from media plugins (such as slideshows, video and audio controls, and so on) to various utilities (image pre-loading, handling cookies). You will also learn the use and applications of jQuery effects and animations (sliding, fading, and combined animations) to eventually demonstrate how all of these plugins can be merged and give birth to a new, more complex, and multipurpose script that comes in handy in a lot of situations.
What this book covers
Chapter 1, What is jQuery About?, covers what jQuery is and why we should use and prefer it over other libraries. Some basic concepts, as well as some history, are covered in this chapter that acts as an introduction to the real topic of the book.
Chapter 2, Plugins Basics, is our first real approach to jQuery plugins. It provides an in-depth description of jQuery's own plugin architecture, providing some examples and sample applications for some of the most popular plugins.
Chapter 3, Our First jQuery Plugin, as its name suggests, is about creating our first, working, and fantastic jQuery plugin! Step-by-step instructions are provided in order to guide even very beginners to the successful realization of their first plugin.
Chapter 4, Media Plugins: Images Plugins, discusses how images play a big role in today's Internet. Since we don't want to be left out, nor behind, in this chapter, we do our best to create a jQuery plugin that is very easy to use, customize, and at the same time, very effective and good looking. Besides, a gallery-like plugin will certainly enhance the user experience of our web pages!
Chapter 5, Media Plugins: Audio Plugins, shows us how, after images, sounds too can be used in a variety of different ways to hold the visitor's attention. Not only will we learn how to develop a jQuery-based audio player plugin, but we will also analyze the advantages and disadvantages of the HTML5 audio tag, compared to JavaScript solutions.
Chapter 6, Media Plugins: Video Plugins, presents a detailed guide to the creation of a video player plugin, and also offers some hints on how to better display video objects on a web page with the aid of JavaScript and/or HTML code.
Chapter 7, Form Plugins, shows a handful of different, but all extremely useful, plugins we can develop in order to improve our forms and offer an enhanced user experience on our website. A number of jQuery plugins are coded, step-by-step, and discussed to better understand what to use, how to use it, and in what circumstances.
Chapter 8, User Interface Plugins, offers many plugin examples and explains how the developer should tackle the problem, in such a way that the final result can be easily modified and integrated into an organized project.
Chapter 9, User Interface Plugins: Tooltip Plugins, explains that to get a fully working tooltip plugin, a series of preliminary steps is required. These include understanding mouse movement and events, positioning through CSS rules, and, last but not least, interaction with jQuery code to actually show and hide the tooltip element at our will.
Chapter 10, User Interface Plugins: Menu and Navigation Plugins, discusses how developing menu and navigation plugins with some additional effects to enhance their appearance and user experience is rather simple. The principles are explained in this chapter, as well as a number of different approaches that we might want to use to obtain a menu plugin.
Chapter 11, Animation Plugins, discusses how fun-to-activate and nice-to-look-at animation plugins play one of the most important roles when it comes to user interaction. Be it a moving image or a bouncing shape, they are always worth the time spent coding them and actually amuse the visitor. We will learn how to make things move, bounce, fade in and away—nothing more, nothing less.
Chapter 12, Utility Plugins, shows how creating utility plugins (which can be easily used thanks to jQuery's own internal structure and which allow for a very effective integration) is a big plus. If we need some kind of function or method to take care of some repetitive task, we could speed up the process with just a few lines of code.
Chapter 13, Top jQuery Plugins, is a selection of the top 10 plugins. It briefly shows how they are customized on a website, their uses, their advantages and disadvantages, as well as provides a basic documentation that readers can easily use and refer to when (and if) they decide to mess with any of the plugins discussed in this chapter.
Appendix A, Tools, reference, and final recommendations, contains some useful jQuery-related links and offline resources for further reference.
Who this book is for
This book is for anyone who wants to have a better understanding of the dynamics of jQuery when plugins come into play, as well as for those who are willing to push jQuery to its limits and develop awesome plugins to use on their websites. A little background information about JavaScript and jQuery cannot harm anyone, but even very beginners can have a chance to be introduced to the wonderful world of jQuery.
Conventions
In this book, you will find several headings appearing frequently.
To give clear instructions on how to complete a procedure or task, we use:
Reader feedback
Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.
To send us general feedback, simply send an e-mail to <[email protected]>, and mention the book title via the subject of your message.
If there is a book that you need and would like to see us publish, please send us a note in the SUGGEST A TITLE form on www.packtpub.com or e-mail <[email protected]>.
If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.
Customer support
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
Tip
Downloading the example code for this book
You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.
Errata
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/support, selecting your book, clicking on the errata submission form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded on our website, or added to any list of existing errata, under the Errata section of that title. Any existing errata can be viewed by selecting your title from http://www.packtpub.com/support.
Piracy
Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.
Please contact us at <[email protected]> with a link to the suspected pirated material.
We appreciate your help in protecting our authors, and our ability to bring you valuable content.
Questions
You can contact us at <[email protected]> if you are having a problem with any aspect of the book, and we will do our best to address it.
Chapter 1. What is jQuery About?
With the ever increasing number of websites and an overall surge of web professionals trying to make the Web a more beautiful and usable place, JavaScript has become fairly popular amongst web designers and developers in an attempt to overcome HTML and CSS shortcomings.
But, as we all know, JavaScript is a rather obtrusive language. It often happens to mess things up and worsen what before was good markup if we don't pay close attention to using unobtrusive JavaScript solutions. These are the reasons why web designers (and web professionals in general) avoid plain JavaScript like a plague and limit its usage to short and simple parts of the coding process.
Instead, jQuery has been designed with the aim of making it easier to navigate a document, select Document Object Model(DOM) elements, handle events, develop AJAX applications, and eventually smooth out any browser differences.
In this chapter, we will cover the following:
A little background
Short after being officially presented by John Resig at BarCamp NYC in January 2006, jQuery, though still "new", spread rather quickly. It has become, as of today, the most used JavaScript library and is in use at 20 percent of the 10,000 biggest websites, including Google, Digg, and WordPress.
The reason why jQuery was created is to be found in the lack of a JavaScript library providing its users with a simple and easy-to-use syntax. In fact, at the time of its announcement, jQuery was aiming to improve and simplify the use of selectors in JavaScript a topic much overlooked by libraries such as Behaviour.
The library then rapidly gained community interest and, shortly after the first plugin had been developed, AJAX support and some new effects were added. Less than one year later, the first sponsored developer joined the team and, as of now, four years later, companies such as Nokia and Microsoft are actively supporting the open source library.
Its success, so huge and originating a fast growing movement, which has undoubtedly contributed to promoting the library, has definitely helped jQuery to constantly improve the quality of both its features and code. This has made it more and more popular over time, especially amongst ASP.NET developers, as a 2009 survey points out (http://codeclimber.net.nz/archive/2009/06/22/ajax-survey-2009-jquery-and-ms-ajax-are-almost-tied.aspx).
The code, free and dual licensed under the MIT License and the GNU General Public License (GPL) Version 2, proves its suitability to the purpose by being extremely lightweight and cross-browser, supporting a variety of web applications and taking relatively little time to execute.
jQuery: "the write less, do more JavaScript library"
Indeed, jQuery provides a simple and fast way to manipulate web pages, emphasizing the interaction between JavaScript and HTML. Even a few lines of code can make the User Interface (UI) more logical and way nicer to look at.
At first glance, we might think jQuery is only a different way to write JavaScript. However, after spending some time dealing with documentation or examples, we realize it's much more than a mere framework. It actually has features that make it easier and extremely straightforward to handle DOM elements (traversal, modification, and elements selection), deal with events (through specific calls), manipulate CSS, and create any type of effect and animation (sliding, fading, or combined effects).
Moreover, one of the main, big benefits of using jQuery over plain JavaScript is that the former hides the differences between browsers, at least to some level, relieving us of the onerous task of differentiating the code depending on the user agent.
Ultimately, it provides easy methods to access AJAX functionalities and extend the library itself through the use of plugins, which is the most powerful and useful way to interact with the jQuery API.
How jQuery works
To get the most out of this book there are a couple of things that we should have clear in mind:
Time for action — writing a basic jQuery script
We're going to create a simple script to check if everything is set up correctly and is working properly.
What just happened?
There's no need to spend time talking about stuff like loading JavaScript libraries or displaying pop ups. Instead, it would make a good point to explain why, contrary to what most JavaScript programmers will do instinctively, we avoid adding code to our program once the window.onload event strikes—right after the page is loaded.
However, the JavaScript code isn't actually run until all images are finished downloading, (which could last for quite a lot of time). Instead, jQuery's "document ready" event checks the document and only waits until it's ready to be manipulated, leaving images and other media to load at their own pace.
Time for action — callback and functions
Callbacks are functions that are passed as an argument to another function and are to be executed at the appropriate time within the processing of the code (for example, when a click event happens or when an AJAX update is ready to be sent).
What just happened?
It's important to notice that, though the final result is the same, in this case, there is difference in the way callbacks are to be handled depending on them having (or not having) arguments:
Another interesting point to understand is, in fact, what anonymous functions are and how they behave.
Following the previous example, we may notice we have bound the click event directly to a structure in which we defined a function. This is what is called an anonymous function. It has no name and can be defined on the spot, resulting in a useful replacement for a function that we might use only once (and that would be a waste of time to define) and then call in two different places.
Extending jQuery: Plugins
Apart from offering a simple, yet effective, way of managing documents, elements, and various scripts, jQuery also offers a mechanism for adding methods and extra functionalities to the core module.
Thanks to this mechanism, we are also allowed to create new portions of code and add them to our application everytime we need them. It results in a reusable resource that we don't need to rewrite in our next page or project.
Additional methods and functions created making use of this structure are then bundled as plugins. These can be subsequently used (and/or included) in new jQuery scripts, developed by the plugin authors themselves and by other people as well (if the code is released in some way thus made publicly available for download and use).
The extremely easy-to-use Application Programming Interface (API) jQuery is built on (evidently developed without forgetting the very beginner programmers out there, and the immediate syntax jQuery made us all used to), combined with a bit of will, makes jQuery plugin development not too harsh to regular script coders with a minimum of experience in the field, as well as to those new to either plugin writing or jQuery internal mechanisms.
Of course, writing simple plugins is fairly easy, whereas a more complex plugin requires a more advanced programming background and a certain proficiency with both JavaScript and jQuery.
Also, it's important to know that most of the methods and functions jQuery is packaged with were written by taking advantage of the jQuery plugin construct itself, thereby pushing towards steady and frequent improvements of this complex plugin architecture.
Plugins basics
The question "So, what's all this about?" is likely to come naturally now.
In fact, this "plugin thing" may sound a little strange to newcomers, if they're not used to dealing with languages or frameworks that allow for such extension of features and options.
To dissipate even the slightest doubt, we're going to understand what plugins are and why they matter. Most importantly, we will see how is it possible to bring to light our own creation, starting from scratch and eventually shaping our original idea into a more concrete, working jQuery plugin.
Plugins are coded by making use of the jQuery API functions and methods, which are really handy on many occasions. However, plain JavaScript often happens to be used heavily, since, after all, it's the language jQuery is written in.
For those already familiar with jQuery syntax, methods, and features (everybody should be, when considering writing a plugin), flipping through the pages of any jQuery-related book is enough. However, if an inexperienced jQuery developer is reading this (even though they usually jump straight to some random code, so they're more likely to never see this part anyway), they'd better stop for a while and read some beginners' guide to jQuery programming first.
Code generated using the jQuery built-in tools and eventually packaged into a plugin, must then be included in the web page it's intended to work in, without forgetting that it requires a compatible version of jQuery to run properly. More generally, in fact, plugins are extra parts, not expected nor supported in any way by jQuery developers. These extra parts are attached to the main functions and add in new user-generated functionalities working on top of the core methods, functions, and options explicitly provided by the jQuery library for third-party use.
It is true that plugins, especially the well known ones, are normally supported by their authors. The authors are, usually, open to suggestions and feedback, and are constantly doing their best to make their work compatible and working flawlessly with the latest release of jQuery.
Suggested reading that could help greatly
Thinking of plugin development as a wild-goose chase is obviously overplaying it. Some old wise man would probably say impossible is nothing, and he couldn't be more right. If each of these resources, all of this documentation, and these tools are at hand, authoring a plugin is a trifle requiring some special effort at the beginning along with a good knowledge of the basis.
Books
Printed books are, even in our extremely digitalized era, one of the best sources to learn from. Also, they come handy whenever we have to look something up and haven't the possibility to switch to another window or just need to check something up—the book is there, right next to our keyboard.
Learning jQuery 1.3
By Jonathan Chaffer and Karl Swedberg—Packt Publishing, 2009
Book page:http://www.packtpub.com/learning-jquery-1.3/book
TOC:http://www.packtpub.com/article/learning-jquery-1.3-table-ofcontents
