Mastering jQuery UI电子书

Mastering jQuery UI

Table of Contents

Mastering jQuery UI

Credits

About the Author

About the Reviewers

www.PacktPub.com

Support files, eBooks, discount offers, and more

Why subscribe?

Free access for Packt account holders

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Downloading the color images of this book

Errata

Piracy

Questions

1. Designing a Simple Quiz Application

Setting up jQuery UI

Downloading the required files

Using jQuery/jQuery UI libraries with a CDN

Setting up the folder structure for the JavaScript and CSS files

Creating the layout

Markup for the quiz page

Styling elements

Making the quiz functional

Displaying data on the page

Draggable country names

Droppable capital names and scoring

Accepting a draggable element

The drop event

Resetting the quiz

Improving the quiz

Summary

2. Building a Jigsaw Puzzle Game

Getting ready

Creating the layout

Creating the markup for the puzzle

Styling elements

Making the puzzle functional

Creating slices of the image

The CSS background-position property

Starting the game

Handling events for puzzle pieces

Checking for puzzle completion

Resetting the puzzle

Improving the puzzle

Summary

3. Creating a Website Tour

Getting ready

Designing the home page

Writing markup for the page

Styling elements

Making the tour functional

Initializing accordion and tooltips

Defining the dialog

Defining the tour steps

Initializing the tour

Displaying a tour step

Making the Previous and Next buttons functional

Ending the tour

Improving the tour

Summary

4. Creating a Tabbed News Reader

Creating the folder structure

Designing the page

Writing markup for tabs

Styling the content

Getting the code structure ready

Adding event handlers in the init method

Displaying posts of a subreddit

Creating the tab structure

Building the DOM for posts

Getting comments for a post

Improving MyjqReddit

Summary

5. Implementing CAPTCHA using Draggable and Droppable

Creating the folder structure

Implementing the drag and drop CAPTCHA

Setting a random color

Displaying the CAPTCHA

Making the drag and drop functional

Validating on the server

Improving the color CAPTCHA

Creating the slider CAPTCHA

Generating minimum and maximum values for the slider

Making the slider functional

Validating the slider values

Improving the slider CAPTCHA

Creating the number CAPTCHA

Generating the five-digit number

Displaying CAPTCHA on the page

Adding the sortable functionality

Validating the number on the server

Summary

6. Creating an Event Timeline Using a Slider

Creating the folder structure

Designing the page

Styling the content

Getting the code structure ready

Creating the timeline markup from data

Implementing the timeline functionality

Making the slider work

The if block

The else block

Dragging the year window

Displaying event details when a year window is clicked on

Closing the event details window

Improving the timeline

Summary

7. Using jQuery UI with Google Maps API

Creating the folder structure

Getting a Google Maps API key

Designing the page

Styling the content

Getting the code structure ready

Setting minimum and maximum prices

Displaying hotels in accordion

Setting up the spinner

Displaying the map

Setting markers and infowindows in the map

Implementing the slider

Improving the functionality

Summary

8. Creating a Photo Album Manager

Creating the folder structure

Designing the page

Creating placeholders for albums and pictures

Writing markup for dialog boxes

Styling the content

Creating the JSON file for albums

Getting code structure ready

Implementing the initialize method

Filling album names

Displaying the albums

Making the pictures sortable

Initializing dialogs for edit, delete, and zoom

Handling click events for edit, delete icons, and zooming pictures

Editing, deleting, and rearranging pictures

Editing a picture name

Deleting a picture

Rearranging pictures of an album

The ajaxAlbum.php file

Improving album manager

Summary

9. Creating Widgets Using the Widget Factory

The folder structure

Creating a widget to search data in a table

Writing markup for the table

Styling the content

Implementing the widget

Defining the widget structure

Setting up default options

Initializing the widget and attaching event handlers

Filtering the table

Making changes when the option value is changed

Destroying the widget

Calling the widget from the page

Improving the searchable widget

Creating a widget to display a slideshow

Writing markup for slides

Styling the content

Implementing the widget

Defining the widget structure

Setting up default options

Initializing the widget and displaying the first slide

Displaying slides one by one

Making changes when the option value is changed

Destroying the widget

Calling the widget from the page

Improving the banner widget

Summary

10. Building a Color Picker with Hex RGB Conversion

Setting up the folder structure

Writing markup for the page

Styling the content

Implementing the color picker

Defining the object structure

The init method

Changing colors and updating the spinner

The getHexColor method

Converting to hex

Improving the Colorpicker

Summary

11. Creating a Fully Functional Dashboard

Setting up the stage

Designing the page

Styling the content

Getting the code structure ready

Initializing the portlets

Implementing sharing buttons

Displaying Flickr photos

Creating a weather widget

Displaying posts from the reddit front page

Creating an image display widget

Improving the portlets

Summary

A. Best Practices for Developing with jQuery UI

General Guidelines

Using a CDN

Use a customized build of jQuery UI

Using the jQuery UI icons

Be specific about elements as much as possible

Chain, chain, and chain

Cache selectors

Cache your loop variables

DOM manipulation is costly

Using jQuery UI Themeroller to customize a theme

Index