jQuery for Designers Beginner's Guide: Second Edition电子书

jQuery for Designers Beginner's Guide Second Edition

Table of Contents

jQuery for Designers Beginner's Guide Second Edition

Credits

About the Author

Acknowledgments

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

Time for action – heading

What just happened?

Pop quiz – heading

Have a go hero – heading

Reader feedback

Customer support

Downloading the example code

Downloading the color images of this book

Errata

Piracy

Questions

1. Designer, Meet jQuery

What is jQuery?

Why is jQuery awesome for designers?

It uses CSS selectors you already know

It uses HTML markup you already know

Impressive effects in just a few lines of code

Huge plugin library available

Great community support

JavaScript basics

Progressive enhancement and graceful degradation

Gotta keep 'em separated

Content

Presentation

Behavior

Designer, Meet JavaScript

Variables

Objects

Functions

Downloading jQuery and getting set up

Time for action – downloading and attaching jQuery

What just happened?

Pop quiz – setting up a new project

Another option for using jQuery

Your first jQuery script

Time for action – getting ready for jQuery

What just happened?

Adding a paragraph

Time for action – adding a new paragraph

What just happened?

Have a go hero – adding more content

Summary

2. Enhancing Links

Simple tabs

Time for action – creating simple tabs

What just happened?

Pop quiz – working with events

Designer, meet plugins

Choosing a plugin

Simple custom tooltips

Time for action – simple custom tooltips

What just happened?

Customizing PowerTip's appearance

Time for action – customizing PowerTip

What just happened?

Enhancing navigation with tooltips

Time for action – building a fancy navigation bar

What just happened?

Showing other content in tooltips

Time for action – showing custom content in tooltips

What just happened?

Have a go hero – create clickable tooltips for an image gallery

Summary

3. Making a Better FAQ Page

Marking up the FAQ page

Time for action – setting up the HTML file

What just happened?

Time for action – moving around an HTML document

What just happened?

Sprucing up our FAQ page

Time for action – making it fancy

What just happened?

We're almost there!

Time for action – adding some final touches

What just happened?

Summary

4. Building an Interactive Navigation Menu

The horizontal drop-down menu

Time for action – creating a horizontal drop-down menu

What just happened?

The vertical fly-out menu

Time for action – creating a vertical fly-out menu

What just happened?

Customizing the navigation menu

:hover and .sfHover

Cascading inherited styles

Pop quiz – understanding the cascade in CSS

Styling the :focus pseudoclass

Time for action – customizing Superfish menus

What just happened?

The hoverIntent plugin

Time for action – incorporating custom animations

What just happened?

Have a go hero – further customizing the Superfish menu

Summary

5. Showing Content in Lightboxes

A simple photo gallery

Time for action – setting up a simple photo gallery

What just happened?

Customizing Colorbox's behavior

Transition

Time for action – using a custom transition

What just happened?

Fixed size

Time for action – setting a fixed size

What just happened?

Creating a slideshow

Time for action – creating a slideshow

What just happened?

Fancy login

Time for action – creating a fancy login form

What just happened?

Video player

Time for action – showing a video in a lightbox

What just happened?

Pop quiz – loading content into Colorbox

A one-page web gallery

Time for action – creating a one-page web gallery

What just happened?

Have a go hero – create a custom Colorbox

Summary

6. Creating Slideshows and Sliders

Planning a slideshow or slider

A simple crossfade slideshow

Time for action – creating a simple crossfade slideshow

What just happened?

Pop quiz – working with jQuery chaining

Using the Basic Slider plugin

Time for action – building a Basic Slider

What just happened?

Have a go hero – customize the Basic Slider

Creating a Cycle2 slideshow

Time for action – building a slideshow with Cycle2

The Cycle2 carousel

Time for action – building a Cycle2 carousel

Combining a carousel with a slideshow

Setting up the carousel

Time for action – creating the carousel controller

Adding the slideshow

Time for action – adding the slideshow

Connecting the carousel and the slider

Time for action – connecting the carousel and the slider

Summary

7. Working with Responsive Designs

Using FitVids for responsive videos

Time for action – resizing videos

What just happened?

Pop quiz – choosing breakpoints for responsive design

Responsive menus

Time for action – making our menu responsive

What just happened?

Have a go hero – create a custom menu

Creating a tiled layout

Time for action – creating a masonry layout

What just happened?

Creating a tiled layout with items of different widths

Time for action – creating a tiled layout with different width items

What just happened?

Summary

8. Getting the Most from Images

Lazy loading images

Time for action – lazy loading images

What just happened?

Pop quiz – building accessible pages

Creating zoomable images

Time for action – creating zoomable images

What just happened?

Zooming in on multiple images

Time for action – creating multiple zoomable images

What just happened?

Using fullscreen backgrounds

Time for action – creating a fullscreen background image

What just happened?

Creating a fullscreen slideshow

Time for action – creating a fullscreen slideshow

What just happened?

Summary

9. Improving Typography

Sizing headlines perfectly

Time for action – sizing headlines to the screen width

What just happened?

Creating bold text blocks

Time for action – creating a bold text block with SlabText

What just happened?

Pop quiz – sizing text in responsive designs

Styling individual letters

Time for action – using Lettering.js to style letters

What just happened?

Have a go hero – creating fancy effects with Lettering.js

Setting text on a curve

Time for action – setting text on a curve with the ArcText plugin

What just happened?

Summary

10. Displaying Data Beautifully

A basic data grid

Time for action – creating a basic data grid

What just happened?

A customized data grid

Time for action – customizing the data grid

What just happened?

Pop quiz – building correct tables

Showing graphs and charts

Time for action – showing data in graphs and charts

What just happened?

Creating pie charts

Time for action – creating a pie chart

Using charts and graphs in responsive designs

Time for action – calculating the ideal size for charts and graphs

What just happened?

Summary

11. Reacting to Scrolling

Setting up the document

Time for action – setting up the HTML file

What just happened?

Setting up HTML for scrolling animations

Time for action – setting up HTML for Scrollorama

What just happened?

Adding a parallax effect

Time for action – creating a parallax effect

What just happened?

Creating other animations

Time for action – creating a horizontal animation

What just happened?

Have a go hero – add custom animations

Adding navigation

Time for action – adding navigation to sections of the page

What just happened?

Pop quiz – using Scrollorama in responsive design

Summary

12. Improving Forms

An HTML5 web form

Time for action – setting up an HTML5 web form

What just happened?

Pop quiz – working with HTML5 form elements

Setting focus

Time for action – setting focus to the first field

What just happened?

Validating site visitor entry

Time for action – validating form values on the fly

What just happened?

Improving the appearance

Time for action – improving form appearance

What just happened?

Styling the unstyleable

Time for action – adding Fancyform to style the unstyleable

Have a go hero – a fully custom form

Summary

A. Pop Quiz Answers

Chapter 1, Designer, Meet jQuery

Pop quiz – setting up a new project

Chapter 2, Enhancing Links

Pop quiz – working with events

Chapter 4, Building an Interactive Navigation Menu

Pop quiz – understanding the cascade in CSS

Chapter 5, Showing Content in Lightboxes

Pop quiz – loading content into Colorbox

Chapter 6, Creating Slideshows and Sliders

Pop quiz – working with jQuery chaining

Chapter 7, Working with Responsive Designs

Pop quiz – choosing breakpoints for responsive design

Chapter 8, Getting the Most from Images

Pop quiz – building accessible pages

Chapter 9, Improving Typography

Pop quiz – sizing text in responsive designs

Chapter 10, Displaying Data Beautifully

Pop quiz – building correct tables

Chapter 11, Reacting to Scrolling

Pop quiz – using Scrollorama in responsive design

Chapter 12, Improving Forms

Pop quiz – working with HTML5 form elements

Index