Cover image for jQuery Tools UI Library

jQuery Tools UI Library

Author Alex Lib
Release Date: 2012/02/01
ISBN: 9781849517805
Topic:
0%
34
Chapters
0-1
Hours read
0k
Total Words
    Start Reading Now    
       Add to Wishlist       
View table of contents

Book Description

Learn jQuery Tools with clear, practical examples and get inspiration for developing your own ideas with the library book.

  • Learn how to use jQuery Tools, with clear, practical projects that you can use today in your websites
  • Learn how to use useful tools such as Overlay, Scrollabl e, Tabs and Tooltips
  • Full of practical examples and illustrations, with code that you can use in your own projects, straight from the book

In Detail

You’re designing a website, which is going to become a work of art, with snappy response times – do you want to slow it down with lots of extra, unwanted functionality? jQuery Tools can provide you with just the functionality you need, that appears on most websites around the world, and which you can customize to your heart’s content.

jQuery Tools UI Library will show you how to add useful functionality to your website, using the compact but powerful jQuery Tools library. You will get stuck into simple yet powerful projects that you can implement straightaway, and which will give you inspiration for developing your own versions in future projects.

You will go on a whirlwind tour through jQuery Tools, beginning with best practices that should be used, through to detailed projects on each tool in the Library, that you can copy from the book, or download from Packt’s website. The book will include tips and comments on how to alter elements, or ideas on what can be included to extend the functionality you want to include in your websites.

Begin with a short explanation of the origins of jQuery Tools, followed by some of the best practices that should be used, as well as some detail on how to use its API and event capabilities.

When you have finished reading “jQuery Tools UI Library”, you will have learnt all about the library, using clear, practical examples that you can take into your own projects and use, or develop into your own designs for future use.

Table of Contents

  1. jQuery Tools UI Library
    1. jQuery Tools UI Library
    2. Credits
    3. About the Author
    4. About the Reviewers
    5. www.PacktPub.com
      1. Support files, eBooks, discount offers and more
        1. Why Subscribe?
        2. Free Access for Packt account holders
    6. Preface
      1. What this book covers
      2. Who this book is for
      3. Conventions
      4. Reader feedback
      5. Customer support
        1. Downloading the example code
        2. Errata
        3. Piracy
        4. Questions
    7. 1. Getting Started
      1. jQuery Tools basics and rules: a primer
        1. The role of HTML
        2. The role of JavaScript and jQuery
        3. The role of CSS
          1. Using tools for graphic design and presentation
            1. CSS-based design
            2. Image-based design
            3. CSS and image-based design
      2. Using tools for development
      3. Downloading the library
        1. But I want more… using the CDN links
      4. Rolling your own tools—using the download builder
        1. Using Firebug
        2. Including and initializing the tools
          1. Using global configurations
      5. Best practices for events and API calls
        1. Application Programming Interface (API)
        2. jQuery Tools events
          1. Before and after events
          2. Supplying events
            1. Within the configuration
            2. Using jQuery's bind method
            3. Supplying listeners from the API
        3. The event object
        4. Creating jQuery Tools plugins
        5. Using jQuery Tools plugins and effects
          1. Effects
      6. Performance of jQuery Tools
        1. Reduce the number of HTTP requests
        2. jQuery Tools are available through CDN
        3. Adding an expires header
        4. GZIP components
        5. Minifying JavaScript
      7. Summary
    8. 2. Getting along with your UI Tools
      1. UI tools—a template
      2. What is an overlay?
        1. Overlay for the perfect eye candy
        2. Usage
        3. Project: building a viewer for Google Maps
          1. Creating the basic HTML structure
          2. Adding in the overlay
          3. Setting up and configuring the overlay JavaScript
          4. Adding the styling and visual effects
      3. Tooltips — the only web fundamentals you need
        1. Usage
        2. Impress everyone with slide effect and dynamic plugins
        3. Project: building a book "buy now" using tooltip
          1. Setting up the basic HTML
          2. Adding in the tooltip CSS styles
            1. We need some more styles though..!
          3. Configuring the Tooltip
      4. For everything else—there's Scrollable
        1. Usage
        2. Project: building a mini gallery
          1. Setting up the basic HTML
          2. Time for some JavaScript magic
          3. Time for some styles
            1. Some extra styling
      5. Tabs in action
        1. Usage
        2. Project: building a rolling slideshow
          1. Setting up the basic HTML
          2. Adding the visual effects
            1. "Mmm…I want more!"
          3. Configuring the Tab effects
            1. Setting the button visibility
      6. Summary
    9. 3. Form Tools
      1. Using Validator
        1. Why basic Validator?
        2. Usage
        3. Project: improving styling, and adding custom field validators
          1. Creating the basic HTML structure
          2. Adding in the form details
          3. Styling the form
          4. The final part—the script
            1. Custom Validators
        4. "It seems very negative, this onFail…"
        5. Validator—a final thought
      2. Making your HTML5 date input look and behave the way you want with Dateinput
        1. Usage
        2. Project: styling and localization
          1. Creating the basic HTML
          2. Setting up the JavaScript
          3. Adding the styling
        3. A final thought
      3. Controlling your HTML5 range input with RangeInput
        1. Why basic RangeInput?
        2. Usage
        3. Project: building a product gallery
          1. Setting up the basic HTML structure
          2. Adding in the book images
          3. Adding in the JavaScript functionality
          4. Styling the gallery
        4. Some final comments
      4. Summary
    10. 4. jQuery Tools Toolbox
      1. Using FlashEmbed to include Flash movies
        1. Usage
          1. HTML setup
          2. JavaScript setup
        2. Demo: let's embed a Flash movie
          1. Space for the video
          2. Styling for the video
          3. Script to make the video work
        3. Some final comments
      2. Going backwards with history
        1. Usage
      3. Showing off content with Expose
        1. Usage
        2. Demo: using Expose to display video content
          1. Setting up the basic HTML structure
          2. Adding the video content
          3. Adding the styling
          4. Getting the player to work
      4. Take control of your mouse with mousewheel
        1. Usage
      5. Summary