Mastering jQuery UI

Book description

Become an expert in creating real-world Rich Internet Applications using the varied components of jQuery UI

In Detail

With browsers becoming more and more powerful each day, the jQuery UI library provides tools that can be used to create feature rich and interactive applications without bearing the pain of writing numerous lines of JavaScript.

Mastering jQuery UI will help you explore the depths of the jQuery UI library. Right from the first chapter, you will build your own projects while learning the intricacies of the library. Each chapter explores a new topic and covers some related components. By gaining confidence from the initial chapters you will proceed ahead to create complex applications like the Tabbed News reader utilizing the AJAX and Reddit APIs. As a bonus, you will also learn about the best and most proven practices earned through years of diligent work on the jQuery UI platform.

Each chapter is an independent mini project in itself covering different components from jQuery UI. You won't have to wait long to actually build something functional.

What You Will Learn

  • Create mashups using APIs of popular websites such as Reddit and Google Maps

  • Integrate AJAX with different components

  • Create projects that solve real-world problems and are not theoretical

  • Discover the best usage of components in a given situation

  • Use effects to make the UI more interactive

  • Use JSONP to make cross-origin AJAX requests

  • Get to grips with best practices to use while developing with jQuery UI

  • Table of contents

    1. Mastering jQuery UI
      1. Table of Contents
      2. Mastering jQuery UI
      3. Credits
      4. About the Author
      5. About the Reviewers
      6. www.PacktPub.com
        1. Support files, eBooks, discount offers, and more
          1. Why subscribe?
          2. Free access for Packt account holders
      7. Preface
        1. What this book covers
        2. What you need for this book
        3. Who this book is for
        4. Conventions
        5. Reader feedback
        6. Customer support
          1. Downloading the example code
          2. Downloading the color images of this book
          3. Errata
          4. Piracy
          5. Questions
      8. 1. Designing a Simple Quiz Application
        1. Setting up jQuery UI
          1. Downloading the required files
          2. Using jQuery/jQuery UI libraries with a CDN
          3. Setting up the folder structure for the JavaScript and CSS files
        2. Creating the layout
          1. Markup for the quiz page
          2. Styling elements
        3. Making the quiz functional
          1. Displaying data on the page
          2. Draggable country names
          3. Droppable capital names and scoring
            1. Accepting a draggable element
              1. The drop event
          4. Resetting the quiz
        4. Improving the quiz
        5. Summary
      9. 2. Building a Jigsaw Puzzle Game
        1. Getting ready
        2. Creating the layout
          1. Creating the markup for the puzzle
          2. Styling elements
        3. Making the puzzle functional
          1. Creating slices of the image
            1. The CSS background-position property
          2. Starting the game
          3. Handling events for puzzle pieces
          4. Checking for puzzle completion
          5. Resetting the puzzle
        4. Improving the puzzle
        5. Summary
      10. 3. Creating a Website Tour
        1. Getting ready
        2. Designing the home page
          1. Writing markup for the page
          2. Styling elements
        3. Making the tour functional
          1. Initializing accordion and tooltips
          2. Defining the dialog
          3. Defining the tour steps
          4. Initializing the tour
          5. Displaying a tour step
          6. Making the Previous and Next buttons functional
          7. Ending the tour
        4. Improving the tour
        5. Summary
      11. 4. Creating a Tabbed News Reader
        1. Creating the folder structure
        2. Designing the page
          1. Writing markup for tabs
          2. Styling the content
        3. Getting the code structure ready
        4. Adding event handlers in the init method
        5. Displaying posts of a subreddit
          1. Creating the tab structure
          2. Building the DOM for posts
        6. Getting comments for a post
        7. Improving MyjqReddit
        8. Summary
      12. 5. Implementing CAPTCHA using Draggable and Droppable
        1. Creating the folder structure
        2. Implementing the drag and drop CAPTCHA
          1. Setting a random color
          2. Displaying the CAPTCHA
          3. Making the drag and drop functional
          4. Validating on the server
          5. Improving the color CAPTCHA
        3. Creating the slider CAPTCHA
          1. Generating minimum and maximum values for the slider
          2. Making the slider functional
          3. Validating the slider values
          4. Improving the slider CAPTCHA
        4. Creating the number CAPTCHA
          1. Generating the five-digit number
          2. Displaying CAPTCHA on the page
          3. Adding the sortable functionality
          4. Validating the number on the server
        5. Summary
      13. 6. Creating an Event Timeline Using a Slider
        1. Creating the folder structure
        2. Designing the page
        3. Styling the content
        4. Getting the code structure ready
        5. Creating the timeline markup from data
        6. Implementing the timeline functionality
          1. Making the slider work
            1. The if block
            2. The else block
          2. Dragging the year window
          3. Displaying event details when a year window is clicked on
          4. Closing the event details window
        7. Improving the timeline
        8. Summary
      14. 7. Using jQuery UI with Google Maps API
        1. Creating the folder structure
          1. Getting a Google Maps API key
        2. Designing the page
          1. Styling the content
          2. Getting the code structure ready
          3. Setting minimum and maximum prices
          4. Displaying hotels in accordion
          5. Setting up the spinner
        3. Displaying the map
          1. Setting markers and infowindows in the map
          2. Implementing the slider
        4. Improving the functionality
        5. Summary
      15. 8. Creating a Photo Album Manager
        1. Creating the folder structure
        2. Designing the page
          1. Creating placeholders for albums and pictures
          2. Writing markup for dialog boxes
          3. Styling the content
        3. Creating the JSON file for albums
        4. Getting code structure ready
        5. Implementing the initialize method
        6. Filling album names
          1. Displaying the albums
          2. Making the pictures sortable
          3. Initializing dialogs for edit, delete, and zoom
          4. Handling click events for edit, delete icons, and zooming pictures
        7. Editing, deleting, and rearranging pictures
          1. Editing a picture name
          2. Deleting a picture
          3. Rearranging pictures of an album
          4. The ajaxAlbum.php file
        8. Improving album manager
        9. Summary
      16. 9. Creating Widgets Using the Widget Factory
        1. The folder structure
        2. Creating a widget to search data in a table
          1. Writing markup for the table
          2. Styling the content
          3. Implementing the widget
            1. Defining the widget structure
            2. Setting up default options
            3. Initializing the widget and attaching event handlers
            4. Filtering the table
            5. Making changes when the option value is changed
            6. Destroying the widget
          4. Calling the widget from the page
        3. Improving the searchable widget
        4. Creating a widget to display a slideshow
          1. Writing markup for slides
          2. Styling the content
          3. Implementing the widget
            1. Defining the widget structure
            2. Setting up default options
            3. Initializing the widget and displaying the first slide
            4. Displaying slides one by one
            5. Making changes when the option value is changed
            6. Destroying the widget
          4. Calling the widget from the page
        5. Improving the banner widget
        6. Summary
      17. 10. Building a Color Picker with Hex RGB Conversion
        1. Setting up the folder structure
        2. Writing markup for the page
        3. Styling the content
        4. Implementing the color picker
          1. Defining the object structure
          2. The init method
          3. Changing colors and updating the spinner
            1. The getHexColor method
            2. Converting to hex
        5. Improving the Colorpicker
        6. Summary
      18. 11. Creating a Fully Functional Dashboard
        1. Setting up the stage
        2. Designing the page
          1. Styling the content
        3. Getting the code structure ready
        4. Initializing the portlets
        5. Implementing sharing buttons
        6. Displaying Flickr photos
        7. Creating a weather widget
        8. Displaying posts from the reddit front page
        9. Creating an image display widget
        10. Improving the portlets
        11. Summary
      19. A. Best Practices for Developing with jQuery UI
        1. General Guidelines
          1. Using a CDN
          2. Use a customized build of jQuery UI
          3. Using the jQuery UI icons
          4. Be specific about elements as much as possible
          5. Chain, chain, and chain
          6. Cache selectors
            1. Cache your loop variables
          7. DOM manipulation is costly
        2. Using jQuery UI Themeroller to customize a theme
      20. Index

    Product information

    • Title: Mastering jQuery UI
    • Author(s): Vijay Joshi
    • Release date: February 2015
    • Publisher(s): Packt Publishing
    • ISBN: 9781783286652