You are previewing jQuery 1.4 Plugin Development.
O'Reilly logo
jQuery 1.4 Plugin Development

Book Description

Build powerful, interactive plugins to implement jQuery in the best way possible

  • Utilize jQuery's plugin framework to create a wide range of useful jQuery plugins from scratch

  • Understand development patterns and best practices and move up the ladder to master plugin development

  • Discover the ins and outs of some of the most popular jQuery plugins in action

  • A Beginner's Guide packed with examples and step-by-step instructions to quickly get your hands dirty in developing high quality jQuery plugins

  • 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

    Table of Contents

    1. jQuery 1.4 Plugin Development
      1. jQuery 1.4 Plugin Development
      2. Credits
      3. About the Author
      4. About the Reviewers
      5. Preface
        1. What this book covers
        2. Who this book is for
        3. Conventions
        4. Time for action — heading
          1. What just happened?
          2. Pop quiz
          3. Have a go hero — heading
        5. Reader feedback
        6. Customer support
          1. Errata
          2. Piracy
          3. Questions
      6. 1. What is jQuery About?
        1. A little background
        2. jQuery: "the write less, do more JavaScript library"
        3. How jQuery works
        4. Time for action — writing a basic jQuery script
          1. What just happened?
        5. Time for action — callback and functions
          1. What just happened?
        6. Extending jQuery: Plugins
        7. Plugins basics
        8. Suggested reading that could help greatly
          1. Books
            1. Learning jQuery 1.3
            2. jQuery 1.4 Reference Guide
          2. Online reference and documentation
            1. jQuery.com
            2. Nettuts
            3. Cheatsheets
            4. Forums and mailing lists
          3. Pop quiz
        9. Summary
      7. 2. Plugins Basics
        1. Using plugins
        2. Time for action — looking for a plugin
          1. What just happened?
          2. Have a go hero — get another example running
        3. Time for action — setting up our own page
          1. What just happened?
        4. Structure of a plugin
        5. Time for action — types of plugins: Function plugins
          1. What just happened?
          2. Have a go hero — exceptions logging
        6. Time for action — types of plugins: Messing with methods
          1. What just happened?
          2. Have a go hero — more colors
        7. Time for action — chaining
          1. What just happened?
          2. Have a go hero — put it all together
        8. Basic plugins examples
        9. A few key things to remember
          1. Pop quiz
        10. Summary
      8. 3. Our First jQuery Plugin
        1. Defining our own default plugin structure
        2. Setting the basics for our first plugin
        3. Time for action — our first plugin, Part I
          1. What just happened?
        4. Getting a step farther
        5. Time for action — our first plugin, Part II: Hovering
          1. What just happened?
          2. Have a go hero — html () versus text ()
        6. Dealing with options
        7. Time for action — our first plugin, Part III: Options
          1. What just happened?
          2. Have a go hero — adding colors
        8. Using functions inside the plugin
        9. Time for action — our first plugin, Part IV: Functions
          1. What just happened?
          2. Have a go hero — experimenting with functions
        10. Closures: Making functions private
        11. Time for action — our first plugin, Part V: Closures
          1. What just happened?
          2. Have a go hero — avoid conflicts
          3. Pop quiz
        12. Summary
      9. 4. Media Plugins: Images Plugins
        1. Plugin overview
        2. Handling images
        3. Time for action — showing images
          1. Have a go hero — could it have been done differently?
        4. Time for action — one step more
          1. Have a go hero — implementing options
        5. Centering things
        6. Time for action — turning theory into code
          1. Have a go hero — vertical and horizontal centering
        7. Putting it all together
        8. Time for action — the final step
          1. Have a go hero — looks is everything
          2. Pop quiz
        9. Summary
      10. 5. Media Plugins: Audio Plugins
        1. Plugin overview
        2. Handling audio files
        3. The player
        4. Time for action — creating the Flash player
        5. Putting the plugin together
        6. Time for action — creating the plugin
          1. Have a go hero — add controls
        7. Styling and multiple players
        8. Time for action — adding support for multiple players
          1. Have a go hero — manage multiple sounds
        9. Time for action — adding some style
          1. Have a go hero — improve controls
          2. Pop quiz
        10. Summary
      11. 6. Media Plugins: Video Plugins
        1. Plugin overview
        2. Handling video files
        3. Embedding YouTube videos
        4. Time for action — creating your first video plugin
          1. Have a go hero — fix some minor imperfections
        5. Adding preview thumbnails and the pop-up feel
        6. Time for action — adding previews
        7. Time for action — creating a pop up
          1. What just happened?
          2. Pop quiz
        8. Summary
      12. 7. Form Plugins
        1. Form plugins in general
        2. Validating forms
        3. Time for action — creating the form check plugin
          1. Have a go hero — improve the user experience
        4. Auto-growing textareas
        5. Time for action — creating the autogrow plugin
          1. What just happened?
          2. Have a go hero — improved autogrow
          3. Other types of form-related plugins
          4. Checkboxes and radio buttons
          5. Text manipulation
          6. Edit in place
          7. Have a go hero — add more options
          8. Pop quiz
        6. Summary
      13. 8. User Interface Plugins
        1. Positioning
        2. Time for action — understanding mouse movement events
          1. Have a go hero — improve the plugin
        3. Setting equal heights
        4. Time for action — setting the same height
        5. Other examples of user interface plugins
          1. Menu plugins
          2. Form enhancement plugins
          3. Context menus and tree menus
          4. Pop quiz
        6. Summary
      14. 9. User Interface Plugins: Tooltip Plugins
        1. Tooltip plugins in general
        2. Positioning the tooltip
        3. Custom jQuery selectors
        4. Time for action — creating custom jQuery selectors
        5. Merging pieces together
        6. Time for action — creating a tooltip plugin
          1. What just happened?
          2. Have a go hero — add options
          3. Pop quiz
        7. Summary
      15. 10. User Interface Plugins: Menu and Navigation Plugins
        1. Splitting the work in two
          1. CSS: Drop-down menu and styling
        2. Time for action — creating and styling the menu
          1. Have a go hero — overcome Internet Explorer problems
          2. jQuery: Spicing things up
        3. Time for action — adding a fading effect
          1. Have a go hero — try out other effects
        4. Creating the plugin
        5. Time for action — creating the plugin
          1. What just happened?
          2. Have a go hero — allow users to customize the plugin
          3. Pop quiz
        6. Summary
      16. 11. Animation Plugins
        1. Sliding
          1. What does "sliding" actually mean?
          2. Sample plugins that "slide"
          3. Creating an accordion plugin (that slides!)
        2. Time for action — creating sliding panes
          1. What just happened?
          2. Have a go hero — make changes
        3. Fading
          1. What does "fading" actually mean?
          2. Sample plugins that "fade"
          3. Creating a fading news ticker plugin
        4. Time for action — creating the plugin
          1. Have a go hero — add fading effects
        5. The animate() method
          1. Understanding the jQuery animate() method
        6. Time for action — creating your first animation
          1. Have a go hero — experiment with animations
          2. Pop quiz
        7. Summary
      17. 12. Utility Plugins
        1. Generating tag clouds
          1. A bit of theory to start with
        2. Time for action creating a tag cloud plugin
          1. What just happened?
          2. Have a go hero — make some improvements
        3. Cookie handling
          1. How cookies work
        4. Time for action — creating a cookie plugin
          1. What just happened?
          2. Have a go hero — make some small improvements
          3. Pop quiz
        5. Summary
      18. 13. Top jQuery Plugins
        1. Typesearch
          1. Description
          2. Synopsis
        2. Time for action — obtaining an OSX-like search bar with the Typesearch plugin
          1. What just happened?
          2. Final thoughts
        3. JSON plugin
          1. Description
          2. Synopsis
        4. Time for action — encoding and decoding JSON strings
          1. What just happened?
          2. Final thoughts
        5. notNow
          1. Description
          2. Synopsis
        6. Time for action — postponing a function using the notNow plugin
          1. What just happened?
          2. Final thoughts
        7. Webcam
          1. Description
          2. Synopsis
        8. Time for action — setting up and using the webcam plugin
          1. What just happened?
          2. Final thoughts
          3. Have a go hero — creating a green filter
        9. Quovolver
          1. Description
          2. Synopsis
        10. Time for action — putting Quovolver to work
          1. What just happened?
          2. Final thoughts
        11. ScrollToElement
          1. Description
          2. Synopsis
        12. Time for action — different ways of scrolling
          1. What just happened?
          2. Final thoughts
          3. Have a go hero — proceed a step further
        13. PassRoids
          1. Description
          2. Synopsis
        14. Time for action — using the plugin
          1. What just happened?
          2. Final thoughts
        15. Virtual Keyboard Widget
          1. Description
          2. Synopsis
        16. Time for action — using the virtual keyboard plugin
          1. What just happened?
          2. Final thoughts
        17. Sliding Doors
          1. Description
          2. Synopsis
        18. Time for action — creating a sliding door
          1. What just happened?
          2. Final thoughts
        19. idleTimer
          1. Description
          2. Synopsis
        20. Time for action — timing idle users
          1. What just happened?
          2. Final thoughts
          3. Have a go hero — use multiple timers
          4. Pop quiz
        21. Summary
      19. A. Tools, reference, and final recommendations
        1. Reference and bibliography
          1. Official jQuery documentation
          2. jQuery API browser
          3. jQuery 1.4 Reference Guide
        2. Blogs to follow and websites to bookmark
          1. jQuery blog
          2. jQuery UI blog
          3. John Resig
          4. Learning jQuery
          5. Jörn Zaefferer (bassistance)
          6. jQuery for designers
          7. jQuery HowTo
        3. On browsers: compatibility, comparisons, and plugins
          1. Supported browsers
          2. Compatibility master table
          3. Browser plugins
            1. FireBug (Firefox)
            2. Internet Explorer 8 Developer Tools
            3. DebugBar (Internet Explorer)
            4. Safari Web Inspector
            5. Dragonfly (Opera)
            6. Chrome Web Inspector
        4. Cheatsheets
        5. jQuery plugin development checklist
      20. B. Pop Quiz Answers
        1. Chapter 1: What is jQuery About?
        2. Chapter 2: Plugins Basics
        3. Chapter 3: Our First jQuery Plugin
        4. Chapter 4: Media Plugins: Images Plugins
        5. Chapter 5: Media Plugins: Audio Plugins
        6. Chapter 6: Media Plugins: Video Plugins
        7. Chapter 7: Form Plugins
        8. Chapter 8: User Interface Plugins
        9. Chapter 9: User Interface Plugins: Tooltip Plugins
        10. Chapter 10: User Interface Plugins: Menu and Navigation Plugins
        11. Chapter 11: Animation Plugins
        12. Chapter 12: Utility Plugins
        13. Chapter 13: Top jQuery Plugins