jQuery Hotshot电子书

jQuery HOTSHT

Table of Contents

jQuery HOTSHT

Credits

Foreword

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

Getting started with jQuery

What this book covers

What you need for this book

Who this book is for


Conventions

Mission Briefing

Why Is It Awesome?

Your Hotshot Objectives

Mission Checklist

Task 1

Prepare for Lift Off

Engage Thrusters

Objective Complete - Mini Debriefing

Classified Intel

Reader feedback

Customer support

Downloading the example code

Errata

Piracy

Questions

1. Sliding Puzzle

Mission Briefing

Why Is It Awesome?

Your Hotshot Objectives

Mission Checklist

Laying down the underlying HTML

Prepare for Lift Off

Engage Thrusters

Objective Complete - Mini Debriefing

Creating a code wrapper and defining variables

Prepare for Lift Off

Engage Thrusters

Objective Complete - Mini Debriefing

Splitting an image into pieces

Prepare for Lift Off

Engage Thrusters

Objective Complete - Mini Debriefing

Classified Intel

Shuffling the puzzle pieces

Prepare for Lift Off

Engage Thrusters

Objective Complete - Mini Debriefing

Adding an event handler to the button using on()

Shuffling the pieces

Positioning the pieces

Positioning the empty space

Making the puzzle pieces draggable

Prepare for Lift Off

Engage Thrusters

Objective Complete - Mini Debriefing

When the drag begins

During the drag

When the drag ends

Starting and stopping the timer

Prepare for Lift Off

Engage Thrusters

Objective Complete - Mini Debriefing

Determining if the puzzle has been solved

Prepare for Lift Off

Engage Thrusters

Objective Complete - Mini Debriefing

Remembering best times and adding some final styling

Prepare for Lift Off

Engage Thrusters

Objective Complete - Mini Debriefing

Classified Intel

Mission Accomplished

You Ready To Go Gung HO? A Hotshot Challenge

2. A Fixed Position Sidebar with Animated Scrolling

Mission Briefing

Why Is It Awesome?

Your Hotshot Objectives

Building a suitable demo page

Prepare for Lift Off

Engage Thrusters

Objective Complete - Mini Debriefing

Classified Intel

Storing the initial position of the fixed element

Engage Thrusters

Objective Complete - Mini Debriefing

Detecting when the page has scrolled

Engage Thrusters

Objective Complete - Mini Debriefing

Handling browser window resizes

Engage Thrusters

Objective Complete - Mini Debriefing

Automating scrolling

Engage Thrusters

Objective Complete - Mini Debriefing

Restoring the browser's back button

Engage Thrusters

Objective Complete - Mini Debriefing

Handling the hash fragment on page load

Engage Thrusters

Objective Complete - Mini Debriefing

Mission Accomplished

You Ready To Go Gung HO? A Hotshot Challenge

3. An Interactive Google Map

Mission Briefing

Why Is It Awesome?

Your Hotshot Objectives

Mission Checklist

Creating the page and interface

Engage Thrusters

Objective Complete - Mini Debriefing

Initializing the map

Prepare for Lift Off

Engage Thrusters

Objective Complete - Mini Debriefing

Showing the company HQ with a custom overlay

Prepare for Lift Off

Engage Thrusters

Objective Complete - Mini Debriefing

Capturing clicks on the map

Engage Thrusters

Objective Complete - Mini Debriefing

Classified Intel

Updating the UI with the start and end locations

Prepare for Lift Off

Engage Thrusters

Objective Complete - Mini Debriefing

Handling marker repositions

Engage Thrusters

Objective Complete - Mini Debriefing

Factoring in weights

Engage Thrusters

Objective Complete - Mini Debriefing

Classified Intel

Displaying the projected distance and cost

Engage Thrusters

Objective Complete - Mini Debriefing

Classified Intel

Mission Accomplished

You Ready To Go Gung HO? A Hotshot Challenge

4. A jQuery Mobile Single-page App

Mission Briefing

Why Is It Awesome?

Your Hotshot Objectives

Mission Checklist

Building the welcome page

Prepare for Lift Off

Engage Thrusters

Objective Complete - Mini Debriefing

Classified Intel

Adding a second page

Prepare for Lift Off

Engage Thrusters

Objective Complete - Mini Debriefing

Classified Intel

Creating the script wrapper

Engage Thrusters

Objective Complete - Mini Debriefing

Classified Intel

Getting some bounties

Engage Thrusters

Objective Complete - Mini Debriefing

Adding a JsRender template

Prepare for Lift Off

Engage Thrusters

Objective Complete - Mini Debriefing

Building the list view

Engage Thrusters

Objective Complete - Mini Debriefing

Classified Intel

Building an item view

Engage Thrusters

Objective Complete - Mini Debriefing

Handling paging

Engage Thrusters

Objective Complete - Mini Debriefing

Mission Accomplished

You Ready To Go Gung HO? A Hotshot Challenge

5. jQuery File Uploader

Mission Briefing

Why Is It Awesome?

Your Hotshot Objectives

Mission Checklist

Creating the page and plugin wrapper

Prepare for Lift Off

Engage Thrusters

Objective Complete - Mini Debriefing

Classified Intel

Generating the underlying markup

Engage Thrusters

Objective Complete - Mini Debriefing

Adding event handlers for receiving files to upload

Engage Thrusters

Objective Complete - Mini Debriefing

Displaying the list of selected files

Engage Thrusters

Objective Complete - Mini Debriefing

Classified Intel

Removing files from the upload list

Engage Thrusters

Objective Complete - Mini Debriefing

Adding a jQuery UI progress indicator

Engage Thrusters

Objective Complete - Mini Debriefing

Uploading the selected files

Engage Thrusters

Objective Complete - Mini Debriefing

Reporting success and tidying up

Engage Thrusters

Objective Complete - Mini Debriefing

Mission Accomplished

You Ready To Go Gung HO? A Hotshot Challenge

6. Extending Chrome with jQuery

Mission Briefing

Why Is It Awesome?

Your Hotshot Objectives

Setting up the basic extension structure

Prepare for Lift Off

Engage Thrusters

Objective Complete - Mini Debriefing

Classified Intel

Adding a manifest and installing the extension

Prepare for Lift Off

Engage Thrusters

Objective Complete - Mini Debriefing

Adding a sandboxed JsRender template

Prepare for Lift Off

Engage Thrusters

Objective Complete - Mini Debriefing

Posting a message to the sandbox

Engage Thrusters

Objective Complete - Mini Debriefing

Adding a content script

Engage Thrusters

Objective Complete - Mini Debriefing

Scraping the page for microdata

Engage Thrusters

Objective Complete - Mini Debriefing

Adding a mechanism for saving the microdata

Prepare for Lift Off

Engage Thrusters

Objective Complete - Mini Debriefing

Adding the communication module

Updating the content script

Adding the simple styling

Classified Intel

Mission Accomplished

You Ready To Go Gung HO? A Hotshot Challenge

7. Build Your Own jQuery

Mission Briefing

Why Is It Awesome?

Your Hotshot Objectives

Mission Checklist

Installing Git and Make

Prepare for Lift Off

Mac developers

Windows developers

Engage Thrusters

Mac developers

Windows developers

Post-installation tasks

Objective Complete - Mini Debriefing

Installing Node.js

Prepare for Lift Off

Engage Thrusters

Mac

Windows

Objective Complete - Mini Debriefing

Installing Grunt.js

Engage Thrusters

Objective Complete - Mini Debriefing

Classified Intel

Configuring the environment

Prepare for Lift Off

Engage Thrusters

Objective Complete - Mini Debriefing

Building a custom jQuery

Engage Thrusters

Objective Complete - Mini Debriefing

Classified Intel

Running unit tests with QUnit

Prepare for Lift Off

Engage Thrusters

Objective Complete - Mini Debriefing

Classified Intel

Mission Accomplished

You Ready To Go Gung HO? A Hotshot Challenge

8. Infinite Scrolling with jQuery

Mission Briefing

Why Is It Awesome?

Your Hotshot Objectives

Mission Checklist

Preparing the underlying page

Prepare for Lift Off

Engage Thrusters

Objective Complete - Mini Debriefing

Classified Intel

Getting the initial feeds

Prepare for Lift Off

Engage Thrusters

Objective Complete - Mini Debriefing

Displaying the initial set of results

Engage Thrusters

Objective Complete - Mini Debriefing

Handling scrolling to the bottom of the page

Engage Thrusters

Objective Complete - Mini Debriefing

Mission Accomplished

You Ready To Go Gung HO? A Hotshot Challenge

9. A jQuery Heat Map

Mission Briefing

Why Is It Awesome?

Your Hotshot Objectives

Mission Checklist

Determining and saving the environment

Prepare for Lift Off

Engage Thrusters

Objective Complete - Mini Debriefing

Classified Intel

Capturing visitor clicks

Engage Thrusters

Objective Complete - Mini Debriefing

Saving the click data

Engage Thrusters

Objective Complete - Mini Debriefing

Classified Intel

Adding the management console

Prepare for Lift Off

Engage Thrusters

Objective Complete - Mini Debriefing

Classified Intel

Requesting click data

Engage Thrusters

Objective Complete - Mini Debriefing

Displaying a heat map

Engage Thrusters

Objective Complete - Mini Debriefing

Allowing different layouts to be selected

Engage Thrusters

Objective Complete - Mini Debriefing

Classified Intel

Showing heat maps for each layout

Engage Thrusters

Objective Complete - Mini Debriefing

Classified Intel

Mission Accomplished

You Ready To Go Gung HO? A Hotshot Challenge

10. A Sortable, Paged Table with Knockout.js

Mission Briefing

Why Is It Awesome?

Your Hotshot Objectives

Mission Checklist

Rendering the initial table

Prepare for Lift Off

Engage Thrusters

Objective Complete - Mini Debriefing

Classified Intel

Sorting the table

Engage Thrusters

Objective Complete - Mini Debriefing

Sorting the data

observableArray

Comparing different value types

Checking the order

Adding icons

Setting the page size

Engage Thrusters

Objective Complete - Mini Debriefing

Classified Intel

Adding Previous and Next Links

Engage Thrusters

Objective Complete - Mini Debriefing

Adding numerical page links

Engage Thrusters

Objective Complete - Mini Debriefing

Classified Intel

Managing class names

Engage Thrusters

Objective Complete - Mini Debriefing

Resetting the page

Engage Thrusters

Objective Complete - Mini Debriefing

Filtering the table

Engage Thrusters

Objective Complete - Mini Debriefing

Populating the states array

Building the <select> box

Filtering the data

Mission Accomplished

You Ready To Go Gung HO? A Hotshot Challenge

Index