jQuery for Designers: Beginner’s Guide电子书

jQuery for Designers Beginner's Guide

Table of Contents

jQuery for Designers Beginner's Guide

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

Time for action – heading

What just happened?

Pop quiz – heading

Have a go hero – heading

Reader feedback

Customer support

Downloading the example code

Errata

Piracy

Questions

1. Designer, Meet jQuery

What is jQuery?

Why is jQuery awesome for designers?

Uses CSS selectors you already know

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

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?

Summary

2. Enhancing Links

Opening links in a new window

Why not just use the target attribute?

Time for action – opening a link in a new window

What just happened?

Adding icons to links

Time for action – creating a list of links

What just happened?

Simple tabs

Time for action – creating simple tabs

What just happened?

Summary

3. Making a Better FAQ Page

FAQ page markup

Time for action – setting up the HTML

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 Custom Scrollbars

Designer, meet plugins

Choosing a plugin

Setting up some scrollable HTML

Time for action – scrollable HTML

Adding custom scrollbars

Time for action – simple custom scrollbars

What just happened?

Adding arrow controls

Time for action – adding up and down arrows

What just happened?

Customizing the Scrollbar Style

Time for action – adding our own styles

What just happened?

Have a go hero – style the scrollbars the way you want

Smooth scrolling

Time for action – setting up smooth scrolling

What just happened?

Summary

5. Creating Custom Tooltips

Simple custom text tooltips

Time for action – simple text tooltips

What just happened?

Customizing qTip's appearance

Time for action – customizing qTips

What just happened?

Custom styles for tooltips

Time for action – writing custom tooltip styles

What just happened?

Have a go hero – create a tooltip of your own design

Enhancing navigation with tooltips

Time for action – building a fancy navigation bar

What just happened?

Showing other content in tooltips

Time for action – building custom Ajax tooltips

Summary

6. Building an Interactive Navigation Menu

Horizontal drop-down menu

Time for action – creating a horizontal drop-down menu

Time for action – improving the drop-down menu with jQuery

What just happened?

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

Vendor prefixes

Time for action – customizing Superfish menus

What just happened?

Custom animation

Time for action – incorporating custom animation

What just happened?

The hoverIntent plugin

Time for action – adding the hoverIntent plugin

Have a go hero – set your own speed

Summary

7. Navigating Asynchronously

Simple asynchronous navigation

Time for action – setting up a simple website

What just happened?

Time for action – adding Ajax magic

What just happened?

Deluxe asynchronous navigation

Time for action – building deluxe asynchronous navigation

What just happened?

Time for action – using the BBQ plugin

What just happened?

Time for action – highlighting the current page in the Navigation

What just happened?

Time for action – adding a loading animation

What just happened?

Summary

8. Showing Content in Lightboxes

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?

innerWidth/innerHeight

InitialWidth/initialHeight

maxWidth/maxHeight

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?

One-page web gallery

Time for action – creating a one-page web gallery

What just happened?

Summary

9. Creating Slideshows

Planning a slideshow

Simple crossfade slideshow

Time for action – creating a simple crossfade slideshow

What just happened?

Nivo Slider

Time for action – creating a Nivo Slider slideshow

What just happened?

Have a go hero – customize the slideshow

Galleriffic slideshow

Time for action – creating a Galleriffic slideshow

What just happened?

The CrossSlide plugin

Time for action – building a CrossSlide slideshow

What just happened?

Summary

10. Featuring Content in Carousels and Sliders

Basic jCarousel

Time for action – creating a basic carousel

What just happened?

Animated news ticker

Time for action – creating an animated news ticker

What just happened?

Have a go hero – design your own carousel

Featured content slider

Time for action – creating a featured content slider

Pagination controls

Time for action – adding pagination controls

Next and previous buttons

Time for action – adding next and previous buttons

What just happened?

Carousel slideshow

Time for action – creating a thumbnail slideshow

What just happened?

Slideshow

Time for action – adding the slideshow

What just happened?

Next and previous buttons

Time for action – activating the Next and Previous Buttons

What just happened?

Summary

11. Creating an Interactive Data Grid

Basic data grid

Time for action – creating a basic data grid

What just happened?

Customizing the data grid

Time for action – customizing the data grid

What just happened?

Summary

12. Improving Forms

An HTML5 web form

Time for action – setting up an HTML5 web form

What just happened?

Setting focus

Time for action – setting focus to the first field

What just happened?

Placeholder text

Time for action – adding placeholder text

What just happened?

Validating user entry

Time for action – validating form values on the fly

What just happened?

Improving appearance

Time for action – improving form appearance

What just happened?

Styling the unstylable

Time for action – adding uniform for styling the unstylable

Styles for all

Time for action – styling the styleable

What just happened?

Our own theme

Time for action – creating a custom uniform theme

What just happened?

Summary

Index